CSS Layout utilizando estándares web
CSS Workshop - Taller CSS 01
Introducción
En este primer taller de CSS vamos a aprender a realizar el maquetado de una página sin utilizar tablas. Lo que los ingleses llaman "Tableless Layout".
Para ello vamos a utilizar estilos (CSS) y XHTML.
Es necesario tener en cuenta que utilizaremos el (X)HTML para el contenido y el CSS para la presentación.
Esto quiere decir, que los datos estarán en la página (X)HTML y la forma de visualizarlos se definirá en la(s) hoja(s) de estilo(s). De este modo, el mantenimiento posterior de las páginas es mucho más sencillo y utilizando la misma hoja de estilo para todas las páginas de un sitio éstas mantendrán el mismo tipo de presentación sin esfuerzo.
El ejemplo de maquetado que veremos en este taller es el que utilizo en mi sitio:
- Cabecera (header)
- Tres columnas (dos más estrechas a modo de barras laterales)
- Pie (footer)
Podéis ver el resultado aquí y si no os gusta podéis dedicar vuestro tiempo a cosas más productivas :).
Código (X)HTML
El esqueleto del código (X)HTML de nuestra página es el siguiente:
<html>
<head>
</head>
<body>
<div id="container">
<div id="header">
Cabecera
</div>
<div id="leftbar">
Barra Izquierda
</div>
<div id="rightbar">
Barra Derecha
</div>
<div id="main">
Principal
</div>
<div id="footer">
Pie de Página
</div>
</div>
</body>
</html>
Código CSS
Si ponéis la barra de otro color y queréis que llegue hasta abajo, podéis usar la técnica de Faux Columns.
Como veis hemos definido varias capas (con div).
Ahora veremos el código CSS de cada una de ellas.
container
Esta capa es un contenedor para el resto de la página. Puede establecer la anchura de la misma y es la que se encarga de centrar el contenido.
El código CSS es el siguiente:
#container {
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
header
Esta es la capa donde irá la cabecera de tus páginas. Puedes utilizarla para ponerle un título y subtítulo a tu sitio.
El código CSS es el siguiente:
#header {
padding: 5px;
margin-bottom: 5px;
background-color: rgb(213, 219, 225);
}
Defino el padding de 5 píxeles para que se separe un poco de los bordes del navegador, y un margen inferior (margin-bottom) también de 5 píxeles para que se separe del resto de las capas. El background-color define el color del fondo de la capa, en este caso, por comodidad, utilizando tres valores rgb (rojo, verde y azul) entre 0 y 255.
main
Esta es la capa donde irán los contenidos de tus páginas.
El código CSS es el siguiente:
#main {
padding: 5px;
margin-left: 215px;
margin-right: 215px;
background-color: rgb(235, 235, 235);
}
Es importante indicar con margin-left la distancia desde el borde del container hasta esta capa (pasando por encima de la barra lateral). Nuestra barra lateral tiene 200 píxeles de ancho, 5 píxeles de padding por la izquierda y otros 5 por la derecha. Así que el margen izquierdo de la capa main sería 200 + 5 + 5 + X, donde X es la cantidad que nosotros queramos dejar de separación entre la barra lateral y el contenido principal. He dejado 5 píxeles, con el padding, por lo que el valor del margen izquierdo es 215 píxeles.
Lo mismo se aplica para definir el margen derecho (margin-right): por lo que se define como 215 píxeles (200px del ancho de la barra lateral de la derecha + 5px del padding por la izquierda y otros 5px del padding por la derecha de la barra lateral de la derecha + 5 px del padding de la capa main).
leftbar
Esta es la barra lateral tan utilizada en los blogs. La puedes utilizar para colocar menús, enlaces.
El código CSS es el siguiente:
#leftbar {
float: left;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-right: 5px;
padding: 5px;
background-color: rgb(255, 255, 255);
}
Queremos que esté a la izquierda, por lo que utilizamos:
float: left;
que sitúa la capa a la izquierda y obliga al resto de elementos a rodearla.
Si quieres saber más sobre floats te recomiendo la lectura de este tutorial en inglés para profundizar en el tema.
Se ha definido también la anchura que queremos que tenga la capa:
width: 200px;
Puedes preguntarte, y con cierta razón, que demonios son esas líneas que aparecen debajo de la definición de la anchura de la capa:
\width: 210px; w\idth: 200px;
No, no creas que me he vuelto loco, son hacks para que Internet Explorer 6 utilice bien esa anchura que le hemos definido. Esperemos que Internet Explorer 7 implemente bien el "modelo de cajas" y podamos olvidarnos de estos trucos.
Uso de hacks especificos para algunos navegadores
Si quieres ser estricto, puedes omitir los hacks para Internet Explorer. De hecho es uno de los peores navegadores del mercado en cuanto a cumplimiento de los estándares y seguridad, pero como viene "de serie" en las instalaciones de Microsoft Windows es uno de los más utilizados por los usuarios y tu diseño puede no verse bien para un elevado número de usuarios potenciales. Por fortuna, Mozilla Firefox y otros navegadores más respetuosos con los estándares cada vez tienen más cuota de mercado. Si trabajas para clientes externos, te garantizo que más del 99% de ellos preferirán que su sitio se vea bien en Internet Explorer, por su cuota de mercado, sobre todo si es una tienda o similar. Si es tu sitio personal, haz lo que quieras. De todos modos, te advierto que esto sólo es mi opinión y lo que dice mi experiencia. Puedes encontrar, o tener, la opinión contraria, y es tan respetable como la mía.
rightbar
Una segunda barra lateral que se sitúa a la derecha de la página. La puedes utilizar para colocar menús, enlaces.
El código CSS es el siguiente:
#rightbar {
float: right;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-left: 5px;
padding: 5px;
background-color: rgb(255, 255, 255);
}
Queremos que esté a la derecha, por lo que utilizamos:
float: right;
que sitúa la capa a la derecha y obliga al resto de elementos a rodearla.
Luego viene la definición de la anchura de la capa y los hacks para Internet Explorer que son iguales que para leftbar:
width: 200px; \width: 210px; w\idth: 200px;
footer
La capa footer o pie de página se suele utilizar para colocar información de Copyright/Copyleft o cualquier otro tipo de información variada (datos de contacto, etc.).
El código CSS es el siguiente:
#footer {
clear: both;
padding: 5px;
margin-top: 5px;
text-align: center;
font-style: italic;
border-top: 1px solid rgb(60%,50%,40%);
background-color: transparent;
color: rgb(70%, 60%, 50%);
}
Es importante colocar
clear: both;
ya que algunos navegadores, como Mozilla, tienen un bug con los floats que hace la barra lateral, si es muy larga, pueda llegar a pasar por encima de la capa footer. Así, digamos que anulamos los floats anteriores y todo se ve bien.
Epílogo
Menudo rollo os he soltado, pero bueno, al final ya tenemos nuestro maquetado sin tablas y que sigue los estándares.
Para cualquier sugerencia de mejora, errores, critica constructiva o destructiva, por favor utiliza el formulario de contacto de mi sitio.
Si te interesa el taller, está disponible para descarga como archivo pdf.
También puedes descargar los ficheros de ejemplo del taller y así evitarte tener que teclearlos.
Gracias por tu tiempo y tus sugerencias.
Nos vemos en la próxima entrega de CSS Workshop.
Fausto Alava-Moreno
Última modificación: 12 de Abril de 2006.
Ultima Modificación: