Vaya que si hermano, no es menos cierto que el reto es lo que hace crecer el conocimiento, enseguida me pongo a ver el asunto para poder ayudar, yo tengo maquetada mi web con 3 columnas idem a www.desarrolloweb.com, hasta ahora me ha ido muy bien y como enel futuro nadie sabe que le puede hacer falta, pues manos a la obra, saludos desde cuba,
Adrián Gómez Collantes Director Revista "16 de Abril" http://www.16deabril.sld.cu "No hay realidad que no nazca de un sueño" -----Original Message----- From: bzf1 <[EMAIL PROTECTED]> To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Date: Tue, 20 Sep 2005 00:17:09 +0200 Subject: [Ovillo] maquetación 3 columnas - el eterno caballo de batalla > 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
