Hace unos días me puso muy contento con un nuevo link que me pasaron de CSS. En él se veía cómo hacer el diseño de una página con cabecera, tres columnas y pie de muchas formas posibles, en función de qué variantes sobre ese diseño desearamos: columna central estirable y las laterales fijas, las tres fijas, las tres estirables, etc.
Me fijé en el diseño nº13 de dicha página, que es el que me gustaba y me desesperé. La forma de hacerlo con CSS era algo rebuscada y no la entendía bien. Usaba cosas como margin-left:-100% ( ¡¡ menos cien por cient !! ) . Así no aprendería CSS en la vida.
Poco después me puse a hacer unos tutoriales de CSS y quise explicar ese diseño como ejemplo, pero me puse a buscar una forma de hacerlo más sencilla. Nada, no había manera, era totalmente incapaz de hacerlo de forma simple. La solución llegó de un foro, pregunté y el diseño es muy, muy tonto. Lo que hace saber.
Para la columna izquierda basta darle un ancho y un float:left, para la columna derecha un ancho y float:right. La central simplemente fluye entre las dos y para evitar que “desborde” por abajo cuando terminen las columnas laterales, basta con darle un margin-left y un margin-right adecuados
#columna_izquierda { width:100px; float:left; }
#columna_derecha { width:100px; float:left; }
#columna_central { margin-left:120px; margin-right: 120px; }
Gracias a esto, empiezo a pensar que CSS no es tan diabólico, sino que simplemente hay mucha gente por ahí que le gustan las cosas complejas.
February 5th, 2007 at 5:02 pm
Bueno, la misma persona que me contó cómo hacer el diseño también me ha contado porqué puede haberse hecho tan raro en esa página. Básicamente es para que el <div> con el contenido de la página, con el texto importante, esté delante de los
Cuando hay varios float:left y se salen por la derecha del navegador, el margin-left negativo los desplaza hacia la izquierda, para situarlos en el sitio que queramos.
En el caso de la página esa, hay primero un <div id=”wrapper”> con float:left y 100%. El siguiente <div id=”navegation”> con float:left se saldría por la derecha, así que dándole un -100% lo situamos en el lado izquierdo del navegador. Algo parecido con el <div id=”extra”> con float:left, al que sólo hay que darle un -200px (su ancho) para situarlo en el lado derecho.
Nunca te acostarás…