maquetar web..pero no me sale..

ryu_on_ice · #1 (**permalink**) 24/10/2010, 03:40

hola gente..

estoy haciendo una web pero tengo un problema con el acomodo de los divs...

este es mi codigo html

Código HTML:

Ver original<body>
   <div id="contenedor"> 
              <div id="logo">logotipo</div>                 
              <div id="cabecera"> "cabecera"</div>
              <div id="menu">"menu"</div>
              <div id="contenido">contenido de la pagina...</div>
              <div id="footer">"footer"</div>
    </div><
</body>

y este es mi codigo CSS

Código CSS:

Ver original#contenedor{ 
    text-align: left; 
    width: 720px; 
    height:700px;
    margin: 10px auto; 
    background-color : #cfffff; 
} 
#cabecera {
background-color:#FF00FF;
width:570px;
height:150px;
float:right;
top:10px;
}
 
#logo {
background-color:#00FF00;
float:left;
width:150px;
height:150px;
}
#menu {
background-color:blue;
float:left;
clear:both;
width:150px;
height:150px;
margin-top:150px;
}
#contenido {
background-color:#FF0000;
width:350px;
height:300px;
top:110px;
margin-left:150px;
float:right;
clear:both;
}
#footer{
background-color:#FFFF00;
clear: both;
width:720px;
height:100px;
margin-top:700px;
margin-bottom:20px;
}

la cosa es que no me quedan acomodados los divs como deveria.....que me esta faltando...

saludos!!!

jomaruro · #2 (**permalink**) 24/10/2010, 05:34

Hola:

¿Y como deberían quedar?

Saludos.

ryu_on_ice · #3 (**permalink**) 24/10/2010, 15:34

hola jomaruro deberia quedarme asi: logotipo y cabecera en la parte de arriba, ahi no tengo problemas, donde empieza a ponerce feo es, en las demas capas, la que es la del menu ya que queda separada de la capa de cabecera y logo...queda a la mitad(es la azul) ademas quiero poner mas capas abajo de esa, en la misma direccion...por ejemplo la negra esa me queda abajo...

la de contenido de la pagina...no se alinea donde deberia y la de footer ps se pierde e el editor..toy usando dreamweaver...

te dejo un enlace de como estan actualmente

saludos y gracias!!

C2am · #4 (**permalink**) 24/10/2010, 15:57

Hola
Fijate:

Código CSS:

Ver original#menu {
background-color:blue;
float:left;
clear:both;  
width:150px;
height:150px;
margin-top:150px; /*acá le estas diciendo que se ubique a 150px por debajo del elemento que tiene arriba y eso hace, solo debes quitar este margin-top o cambiar 150 por algo menos.*/
 
#contenido {
background-color:#FF0000;
width:350px;
height:300px;
top:110px;
margin-left:150px;
float:right;
clear:both; /*quita esto y ve que pasa, la verdad que aún no entiendo bien el funcionamiento del clear both.*/
}

jomaruro · #5 (**permalink**) 25/10/2010, 14:56

Hola:

Con lo que te ha dicho C2am puede que soluciones lo que quieres. Si deseas que el contenido quede a la misma altura que el menú suprime el clear:both de #contenido.

Otra cosa, si el contenido lo flotas a la derecha no es necesario que le pongas el margin-left.

No he entendido bien lo que mencionas del cuadro negro porque no aparece en tu código ¿Quieres colocarlo debajo del menú?

Saludos.