Hola a todos!
Estoy tratando de maquetar una web en base al modelo de 3 columnas que
proponen en www.desarrolloweb.com:
<div id="contenedor">
<div id="cabecera">
Cabecera 01
</div>
<div id="cuerpo">
<div id="lateral">
<ul>
<li><a href="#">Enlace 1</a>
<li><a href="#">Vínculo 2</a>
<li><a href="#">Otro enlace</a>
<li><a href="#">Link chulo</a>
<li><a href="#">Más enlaces</a>
<li><a href="#">Otro último</a>
</ul>
</div>
<div id="otrolado">
<img src="bannerlateral.gif" width="120" height="600" alt="">
</div>
<div id="principal">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nulla condimentum commodo orci. Nulla eget purus nec massa
...
</div>
</div>
<div id="pie">
© 2005 DesarrolloWeb.com
</div>
</div>
-----------------
BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ebebeb;
}
#contenedor{
text-align: left;
margin: auto;
}
#cabecera{
background-color: #d0d0ff;
color: #333300;
font-size:12pt;
font-weight: bold;
padding: 3 3 3 10px;
}
#cuerpo{
margin: 10 0 10 0px;
}
#lateral{
width: 160px;
background-color: #999999;
float:left;
}
#otrolado{
width: 120px;
float: right;
}
#principal{
margin-left: 170px;
background-color: #ffffff;
padding: 4 4 4 4px;
margin-right: 130px;
}
#pie{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
clear: both;
}
--------
La idea es que en la cabecera trato de colocar un H1 con el nombre de la
página y al mismo nivel de altura, pero al lado derecho, un pequeño menú
del tipo: item1 | item2 | item3
Lo que he pensado es meter el h1 en una capa y el menú en otra (headl y
headr) y aplicarles los siguientes estilos:
#headl
{
width: 49.5%;
float: left;
}
#headr
{
width: 49.5%;
float:right;
}
Con eso se me jode todo porque el float de los headX parece que no se
lleva muy bien con los float de los menús laterales: todo se mezcla.
Así que pongo un display:inline para que no haya saltos y les coloco un
margin:auto, pero no consigo que el contenido de la capa headr se alinee
a la derecha, queda algo así:
=================================================
=============================
= headl =headr =
=============================
=================================================
cuando lo que yo quiero es que quede así
=================================================
=================================================
= headl
= headr=
=================================================
=================================================
y que, por supuesto, la capa Cuerpo y las columnas laterales se queden
tal y como están.
Está claro que si uso una tabla típica para maquetar esto, pues no
habría problema, pero quisiera hacerlo sólo con css.
Alguna sugerencia?
¿Existe una manera mejor (he probado varias y esta parece que puede ser
mejor que las otras) de maquetar a 3 columnas sin que se haga todo un
fiasco al incluir un float en una capa interior a alguna de las principales?
¿Acaso no me entero mucho del uso de float y cometo algún error tonto?
Con este y otros diseño similares todo va bien hasta que uno decide
"partir verticalmente por la mitad" alguna de las capas (cabecera,
principal o pié) y meter 2 divs que ocupen la mitad de alguna de esas
capas (lo que con tablas sería insertar una tabla anidada de 2 columnas
con 100% de anchura).
En fin, espero no haberme enrollado mucho, pero creo que este es un tema
interesante y por eso quería explicarlo bien. No se ven muchas webs a 3
columnas maquetadas sólo con css, y las que hay no suelen incluir muchas
más capas dentro de las prinpales tal y como describo.
Gracias a todos ;)
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
