Templates CSS I: Cabecera + dos columnas + pie + un truquito
Después de un año desarrollando páginas webs (HTML + CSS + PHP) para la empresa y para uno mismo y metiéndome en estos berenjenales, creo que es momento de abrir una nueva categoría en el blog: "CSS".
Y para empezar pondremos un diseño bastante fácil, compacto y que todo el mundo lo pueda usar.
Se trata de una página con cabecera, una zona central, una lateral derecha y un pié de página. Todo liquido para que se pueda expandir al ancho de la página.
El truquito de la cabecera, consiste en el lateral inferior derecho (en amarillo), que, siempre está abajo, antes del pie de página.
Muchas veces han preguntado por los forosdelweb como hacerlo para que se vea al final de la página teniendo dos columnas (o varias) y que dependa del tamaño de todas. Esta es una pequeña solución para esos problemas.
El código css es el siguiente:
/* contendor */
/* ———– contenedor-general ———————— */
#contenedor-general { min-width: 765px; max-width: 1100px; width: 97%; margin:1% auto 0; padding: 0;}
/* contenido central */
/* ———– centro ———————— */
#centro {width:65% ; float:left; margin-bottom:2em;}
/*menus derechos */
/* ———– menu_der ———————— */
#menu_der {width: 32%; margin: 0 0 300px 0; float: right;}
/* ———– sub_der ———————— */
#sub_der {width: 300px; float:right; clear: both; margin:-250px 0 0 0; background-color:#ee4;}
/* pie de página */
/* ———–footer————————— */
#footer {clear: both; border-top: solid silver 1px;}
Un ejemplo lo podéis ver en esta url. Y sip, la cabecera es la del blog que me estoy intentando currar.
El truco está en el clear: both; que hace que el div sub_der se ponga por debajo de los dos float centro y menu_der, para colocarlo en su sitio y asegurarte que está bien, solo tienes que dar al menu_der un margen inferior igual o superior al margen superior (negativo, claro), que le des a sub_der.
El diseño está pensado para que funcione en todos los navegadores. No tenga fallos en ninguno y no haya que meterle ningún hack para que se vea en el IE (sip, esa cosa rara que tanto nos amarga a los diseñadores). En caso de que no realice bien el clear: both; lo único que pasa es que se quedará debajo del menu_der obviando el div centro. También se podría solucionar (no lo he probado) poniendo un div que englobe a los dos superiores. Con lo cual siempre estaría debajo de los dos. Pero esta opción la descarte porque no me parecía “accesible” añadir un div innecesario a la hoja para que se viese bien en ciertos navegadores.
Uno de los mayores problemas al desarrollar CSS es, como ya se ha comentado muchas veces en muchos sitios, el pseudo-navegador de haserfroch, el IE. Normalmente, nunca se debe de obviar si quieres que todo el mundo vea tus páginas. Pero, en mi opinión, siempre se ha de hacer como dice Ismael Celis en EstadoBeta “Desarrolla para Firefox, hackea para Explorer“. O como me gusta más decir a mi “Desarrolla para Firefox, y que se joda IE”, siempre y cuando al menos se vea medianamente bien.
Mi idea siempre es la misma. Crear usando el máximo potencial del css y del html. Si el IE decide que no quiere verlo pero la cosa no queda mal del todo, pues adelante. Evitar los pequeños trucos y hacks que solo enguarrinan el código y al final siempre dan problemas.
Estoy escuchando: Mensaje Subliminal - Ktulu - Orden Genético
Estado de ánimo: Estoy escuchando Ktulu a las 8:00 de la mañana (aunque vete a saber cuando me dejará Bitácoras subirlo). Mi estado de ánimo es “con sueño”.
Me gustaría escuchar: Eso es fácil. El único que me perdí el año pasado; Extremusika 2007.
Anotación: Este post lo he empezado ha hacer a las 8 de la mañana, desde que lo he acabado hasta ahora he estado intentando que bitácoras me dejase ponerlo. Algún día funcionará bien??
27 Noviembre 2006 0:57 am
Yo no digo nada pero…. Blind Guardian al Extremusika?? dios mio….
Aparte poder ver de nuevo a EUKZ y Chambao, yo no necesito mas…
Si te digo lo q he tardao yo en entrar para leer el mensaje…..
22 Enero 2007 21:02 pm
Gracias me sirvio clear: both me tenia loco.
Saludos