Comunidad oficial de diseñadores web, web developers y Webmasters. Aqui podemos tratar temas actuales sobre diseño y tecnología. Podemos compartir y actualizarnos. Flash, PHP, ASP, Java, HTML, CSS, MySQL, CMS, etc. Unite YA y lee los Sticky

Ver más
  • 20,464 Miembros
  • 15,989 Temas
  • 6,336 Seguidores
  • 0

[Ayuda] Maquetado web

Buenas T!

Necesito hacer lo siguiente:

[Ayuda] Maquetado web


El código html que tengo, es:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- Include links to external files -->
<!-- CSS files-->
<link rel="stylesheet" href="css/global.css" />

<!-- JavaScript files-->
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/js.js"></script>

<!-- Icon -->
<link rel="shortcut icon" href="img/favicon.ico" />

<title>Web title</title>
</head>

<body>
<header class="clear">
<!-- Header content -->
<div id="header" class="clear">
<div id="logo"><a href="#"><img src="img/logo.png" title="Web Title"/></a></div>
<div id="user_box">User box</div>
</div>
</header>

<section class="clear">
<!-- Section content -->
<div id="main" class="clear">

<!-- Columna izquierda -->
<div id="left-col" class="clear">
Left Column content
</div>

<!-- Columna derecha -->
<div id="right-col" class="clear">
<div id="content"> Content</div>
<div id="sidebar"> Sidebar</div>
</div>

</div>
</section>

<footer class="clear">
<!-- Footer content -->
<div id="foot">
Foot content
</div>
</footer>

</body>
</html>



y el código css, es:


body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}


header{
background:#FC6;/**/
}div#header{
width:1000px;
margin:0 auto;
background:#CCC; /**/
}div#logo{
float:left;
}div#logo img{}
div#user_box{
width:300px;
height:30px;
top:50%;
position:relative;
float:right;
margin: -15px 0 0 0;
background:#999;/**/
}


section{
/* CSS to section tag */
background:#F00;/**/
}div#main{
margin:0 auto;
width:1000px;
background:#666;/**/
}div#left-col{
width:200px;
float:left;
background:#333;/**/
}
div#right-col{
width:775px;
float:right;
background:#00F;/**/
}div#content{
width:550px;
float:left;
background:#00C;/**/
padding:5px;
margin-left:5px;
}
div#sidebar{
width:200px;
float:right;
background:#009;/**/
}


footer{
/* CSS to footer tag */
background:#006;/**/
}div#foot{
margin:0 auto;
width:1000px;
background:#0F9;/**/
}



Al probarlo con wampserver ; me arroja esto:

[Ayuda] Maquetado web


Es decir, la columna right-colum aparece floatando a la derecha, pero no al lado, sino a continuación debajo de left-column

El código que utilizo para limpiar (Clase clean) es:


.clear:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clear {
display:inline-block;
clear:both;
}
.clear {
display:block;
}
* html .clear {
height:1px;
}



Donde esta el error(?) Muchas gracias !!!
  • 0
  • 0Calificación
  • 0Seguidores
  • 380Visitas
  • 0Favoritos

1 comentario

@ksper9 Hace más de 2 años
Te conviene ir probando con firebug.
Tienes que ser miembro para responder en este tema