Artículo: Maquetando una pagina web con CSS »
JUAN RUIZ FERNANDEZ - ABR 22, 2008 (12:53:08 PM)
Uno de los artículos que más me impactó fue el que traduzco libremente a continuación. Nos permitirá realizar un diseño de página que se mantiene aunque cambiemos el tamaño de la ventana del navegador e independientemente de qué navegador estemos usando ( yo lo he probado en Firefox 2 e Internet Explorer 6 ).
El autor de este [artículo] es Kevin Yank, un desarrollador que tiene las ideas muy claras y que publica habitualmente en uno de los mejores sitios, en mi humilde opinión, que existen actualmente sobre programación y diseño en web, [SitePoint]. Vamos con ello ....
Introducción
Ya sea para mejor o peor, la moda del diseño Web ha evolucionado para favorecer un diseño similar en estilo a un periódico. Elementos de diseño comunes son :
- Una cabecera y un pie que se expanden cada uno de ellos horizontalmente en la página.
- Un contenido limitado por el ancho de la página.
- El desplazamiento vertical es aceptado.
- Hay contenido secundario y navegación en columnas verticales próximas al contenido principal.
El último elemento es el que da problemas. La triste realidad es que la especificación CSS actual [4] (CSS2) no fue diseñada para tener el contenido dividido en múltiples columnas. Como resultado de ello, los diseñadores de la Web han tenido que abusar de tablas HTML [5] para conseguir diseños de página complejos, y ahora ellos tienen que abusar del posicionado CSS para conseguir los mismos fines.
Esta es una posición a tomar controvertida, lo admitiré. Justo ahora, todos los signos apuntan a que CSS es la forma ideal de realizar el diseñado de páginas para la Web. Desafortunadamente, la especificación CSS2 ( terminada en 1.998 ) ignora muchas de las complejidades del diseño Web actual, entre ellas predomina la fuerte moda del diseño muliticolumna.
Ahora, hacemos sitio para las columnas izquierda y derecha añadiendo márgienes al área de contenido. Este el código CSS específico :
#content {
margin-left: 100px;
margin-right: 100px;
}
Finalmente, añadimos las columnas izquierda y derecha como bloques posicionados de forma absoluta:
#left, #right {
position: absolute;
top: 100px; /* alto de la cabecera */
width: 100px;
}
#left {
left: 0;
}
#right {
right: 0;
}
¿No está lejos del efecto deseado, verdad? Sólo hay dos problemas con este resultado :
- Las columnas izquierda y derecha van a su aire en la parte de la altura. CSS no nos provee ninguna forma de hacer coincidir las alturas de las columnas sin establecer una altura fija para las tres columnas -- ¡Esto no es la mejor opción!
- Ya que las columnas izquierda y derecha posicionadas de forma absoluta flotan sobre el resto de la página, la posición del pie se determina solamente por la altura del area de contenido. Esto causa problemas cuando la columna de contenidos es más corta que las otras columnas.
Si estamos trabajando con colores sólidos de fondo en todas las columnas, esto no puede ser un problema para tí. Al final , sin embaro, es el mayor dolor de cabeza al que se enfrentan los novatos del diseño CSS.
Este problema es un resultado directo de la falta de soporte multi-columan en CSS2. Como diseñadores, no tendríamos que recurrir al posicionado absoluto para crear un diseño multi-columna, pero CSS no tiene nada mejor que ofrecer.
Por ahora, la mejor solución es usar JavaScript [6] para igualar las alturas de las columnas despues de que el navegador ejecute el diseño inicial.
¡JavaScript al Rescate!
Asumiremos que tienes una página con tres columnas. La columna central usa el posicionado natural ( p.e. static ) e incluye márgenes que dejan sitio para las columnas izquierda y derecha, para lo cual usamos posicionado absoluto.
Los atributos id de las etiquetas <div> de las columnas son left, content y right.
En vez de tratar con las diferencias entre navegadores, se lo dejaremos a los profesionales y usaremos el excelente X script de Cross-Browser.com [8]. Simplemente descárgate x.js de ese sitio y cárgalo en la etiqueta <head> de tu página como sigue :
<script src="x.js" type="text/javascript"> </script>
Ahora bien, ya que el pie puede bien ser cubierto por las columnas izquierda y derecha cuando el navegador las despliega, desearemos mantener el pie invisible hasta que hayamos ajustado las alturas de estas columnas.
Asegúrate de que la etiqueta <div> del pie tenga como atributo id="footer" y añade esta regla de estilo dentro de la etiqueta <head> de tu documento :
<style type="text/css">
#footer {
visibility: hidden;
}
</style>
Ahora, cuando el navegador haya terminado de cargar la página ( y en cualquier momento en que la ventana del navegador cambie de tamaño ) , tendremos la necesidad de encontrar cual de las columnas es la más larga y redimensionar todas a esa altura. Entonces podremos mostrar el pie.
Ya que este proceso puede ocurrir repetidamente mientras el usuario redimensiona la ventana del navegador, necesitamos embeber el contenido de cada columna dentro de una <div> adicional . La estructura del documento viene a ser :
<div id="left"> <div id="leftcontent"> </div> </div> <div id="content"> <div id="contentcontent"> </div> </div> <div id="right"> <div id="rightcontent"> </div> </div>
Ese es el <div> "más interno" que comprobaremos por su altura natural en cada columan antes de establecer la altura de la <div> "más externa".
Aquí está la función JavaScript que ajusta el diseño usando las funciones xHeight y xShow de la librería X.
<script type="text/javascript">
function adjustLayout() {
// Obtenemos las alturas naturales
var cHeight = xHeight("contentcontent");
var lHeight = xHeight("leftcontent");
var rHeight = xHeight("rightcontent");
// Encontramos la maxima altura
var maxHeight =
Math.max(cHeight, Math.max(lHeight, rHeight));
// Asignamos la maxima altura a todas las columnas
xHeight("content", maxHeight);
xHeight("left", maxHeight);
xHeight("right", maxHeight);
// Mostramos el pie
xShow("footer");
}
Lo que falta es ejecutar esta función cuando la página se haya cargado o redimensionado. Esto se realiza con xAddEventListener:
window.onload = function()
{
xAddEventListener(window, "resize",
adjustLayout, false);
adjustLayout();
}
</script>
¡Y eso es todo !
Nota : El ejemplo se encontrará próximamente en la sección de descargas.
El Futuro
Pero, ¿Qué hay del futuro? El proyecto de trabajo de CSS3 incluye un módulo de diseño multi-columna, pero está diseñado para hacer flotar el texto entre columnas del mismo ancho, no como en los diseños de estilo periódico con columnas de anchos variables.
La mejor apuesta por diseños puros multi-columna en CSS que veo en el horizonte son las propiedades display-model y display-role en el modelo de caja de CSS3. En un giro particularmente irónico, estas propiedades te permitirían hacer que los bloques de columna se comporten como celdas de tablas para el propósito del diseño. Las técnicas de diselo harían el círculo completo mientras aun preservan la división contenido/estilo del diseño CSS.
