Antes de la implementación y difusión de las hojas de estilo (CSS) la solución para estructurar el contenido de una página pasaba casi exclusivamente por las tablas. Actualmente, con el uso extendido de archivos de estilo y su aceptación por parte de la mayoría de los navegadores modernos no tiene sentido seguir utilizando el antiguo método.
¿La razón? El empleo de tablas anidadas (tablas dentro de tablas) y tablas apiladas (tablas sobre tablas) suele generar un código bastante confuso, muy difícil de leer, mantener y que tiende a convertirse en un caos para todos salvo el propio diseñador (aunque con el tiempo también se convierte en un caos para él). Además, el empleo de hojas de estilo permite separar de un modo bastante eficaz el contenido del formato, con lo cual se simplifica la tarea de programadores y diseñadores.
Quienes quieran saber más sobre las ventajas del uso de hojas de estilo pueden consultar algunos artículos muy buenos como “Why Use CSS?” o en español el tutorial de WebEstilo.
Organizar la página general con CSS
Lo primero que vamos a hacer es definir los atributos generales que tendrá toda la página. Para ello modificamos las propiedades de la etiqueta BODY desde nuestro archivo de estilo.
body {
margin: 0;
padding: 0;
background: #e7e7e7;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
Traduzcamos esto un poco: En las dos primeras líneas eliminamos todos los márgenes (internos y externos). Luego, definimos el color de fondo que será gris claro. La línea que sigue es un truco para la página se muestre centrada en las versiones anteriores de Internet Explorer, por lo que no debemos olvidar “corregir” esto luego colocando la tradicional alineación del texto a la izquierda. Finalmente, establecemos como tipografía general Arial (Windows), Helvetica (Macintosh) o la que tenga el sistema operativo por defecto sin serif.
Hecho esto, vamos a crear un “envoltorio” en el cual colocaremos todo el contenido de la página, es decir, encerramos toda la página en una sección que justamente llamaremos “pagina”. Lo hacemos de este modo:
<body>
<div id="pagina">
<!-- Acá va el contenido de la página -->
</div>
</body>
En la hoja de estilo vamos a definir los atributos que tendrá la página. Por ejemplo, vamos a hacer que tenga un tamaño fijo de 760 píxeles para que se vea adecuadamente en un pantalla configurada con una resolución de 800×600. La hoja de estilos quedaría:
#pagina {
width: 760px;
margin: 0 auto;
padding: 0;
background: #fff;
border: 1px solid #999;
text-align: left;
}
En la primera línea definimos el ancho, luego indicamos que los márgenes superior e inferior sean cero, mientras que a la derecha e izquierda son automáticos, es decir, simétricos. De esta manera el contenido queda centrado. Las versiones anteriores de Internet Explorer tienen problemas para mostrar esto, por lo cual habíamos indicado anteriormente en BODY que el texto se muestre centrado.
Sigamos: Con PADDING:0 quitamos los márgenes internos, la siguiente línea establece el blanco como color de fondo, luego colocamos un borde gris de un píxel y al final corregimos la alineación del texto volviendo a establecerla a su valor por defecto que es a la izquierda.
Organizar contenido y crear secciones con CSS
Ya tenemos establecidos los atributos generales de toda la página. Es hora de crear las secciones. Vamos a emplear una estructura bien clásica compuesta por un encabezado, menú a la izquierda, contenido a la derecha y pie de página al final. Lo vemos en la siguiente figura:
¿Cómo definimos las secciones en el código HTML? Empleando nuevamente la etiqueta DIV. Nuestra página quedaría:
<body>
<div id="pagina">
<div id="encabezado">
<!-- Contenido encabezado -->
</div>
<div id="menu">
<!-- Contenido menú -->
</div>
<div id="contenido">
<!-- Contenido de la página -->
</div>
<div id="pie">
<!-- Pie de página -->
</div>
</div>
</body>
Ahora vamos a meternos en la hoja de estilos para definir las propiedades de cada uno de estos elementos.
Definiendo el encabezado
Nuestro encabezado tendrá fondo azul, letras blancas y un alto de 80 píxeles. También vamos a eliminar todos los márgenes y mostrar el texto centrado. Traducido al lenguaje de la hoja de estilo quedaría:
#encabezado {
height: 80px;
margin: 0; padding: 0;
background-color: #06c;
color: #fff; text-align: center;
}
El menú
El menú estará en la izquierda de la pantalla, utilizaremos un azul más claro como fondo y un borde azul oscuro en la derecha y la parte inferior. El ancho del menú será de 180 píxeles, el texto se alineará a la izquierda y vamos a color un pequeño margen interno para que las letras no queden pegadas al borde.
#menu {
float: left;
width: 179px;
height: 160px;
margin: 0;
padding: 5px;
background-color: #39f;
border-right: 1px solid #06c;
border-bottom: 1px solid #06c;
text-align: left;
}
El contenido
Veamos primero el código y luego lo comentamos:
#contenido {
margin: 0 0 0 190px;
padding: 10px;
color: #000;
text-align: left;
}
La primera línea muestra una forma resumida de escribir todos los márgenes. El orden es arriba, derecha, abajo e izquierda. Como vemos, todos los valores están en cero excepto el último ya que debemos dejar el espacio a la izquierda para el menú, más 10 píxeles adicionales de separación: total, 190 píxeles. Luego, indicamos un margen interno de 10 píxeles, establecemos el color de texto en negro y la alineación a la izquierda.
El pie de página
El pie de página irá al final del documento y colocaremos allí la información de copyright. Sus atributos serán: color de fondo azul claro (el mismo del menú), borde superior azul oscuro, margen interno de 10 píxeles, color de texto blanco y alineación centrada.
El código es el que sigue:
#pie {
clear: both;
background-color: #39f;
padding: 10px;
border-top: 1px solid #06c;
text-align: center;
color: #fff;
}
Lo nuevo que introdujimos aquí es al atributo CLEAR para asegurarnos que no haya nada a los costados del pie de página, ya que habíamos indicado que el menú flotaba a la izquierda. De no colocar CLEAR: BOTH; puede que el pie de página se superponga al menú en caso de que el contenido sea muy breve.
Final
¡Listo! Ya hemos estructurado la página en secciones empleando el tag DIV en el código HTML y definiendo sus atributos en la hoja de estilo.
Con solamente modificar las propiedades del archivo CSS podemos cambiar todos los colores e incluso trasladar el menú a la derecha sin demasiado esfuerzo.
Una aclaración final: No todos los navegadores interpretan el 100% de los atributos de la hoja de estilos, y muchos pueden hacerlo de forma diferente. En general, un navegador de los últimos 2 o 3 años no debería tener problemas para mostrar la página correctamente. Pero si nuestros destinatarios emplean, por ejemplo, Netscape 4 habrá problemas en la visualización.
Sin embargo contamos con una ventaja: Si eliminamos la referencia a la hoja de estilos el contenido de nuestra página seguirá siendo accesible aunque sin formato gráfico.
Aquí está la página de ejemplo que creamos.
Como siempre, comentarios, sugerencias y correcciones son bienvenidos.
Suerte y hasta la próxima.