Intro

Hola, soy Coco y os voy a enseñar paso a paso cómo hacer un layout tableless (sin tablas), a base de XHTML y CSS. Son necesarios conocimientos básicos de XHTML y CSS, aunque no gran cosa.

El layout que veremos en este primer capítulo de CSS-Sésamo es uno muy típico en blogs:

Podéis echarle una ojeada aquí.

Código XHTML

El esqueleto del código XHTML de nuestra página es el siguiente:

<div id="container">

<div id="header">
<h1>Título</h1>
<h2>Subtítulo</h2>
</div>

<div id="sidebar">
<h3>Sección</h3>
<p>Bla bla bla...</p>
</div>

<div id="main">
<h3>Sección</h3>
<p>Aquí va el contenido principal</p>
</div>

<div id="footer">
<p>Texto del pie de página</p>
</div>

</div>

Como veis, tenemos cuatro capas. Ahora veremos el código CSS de cada una de ellas.

#container

Esta capa es un contenedor para el resto de la página. Establece la anchura de todo y es la que centra el contenido. El truco está en usar margin: 0px auto; para lograr el centrado. Esto no funciona en el Internet Explorer, así que tendremos que echar mano de un text-align: center; en el body. El CSS completo es este: 

body {
	text-align: center;
}

#container {
	width: 700px;
	margin: 0px auto;
	text-align: left;
}

#sidebar

Esta es la barra lateral tan famosa en los blogs. En otras páginas web podemos poner ahí menús, publi, o cualquier otra cosa. La clave en esta barra es usar float: left;, que básicamente la pone a la izquierda y hace que los demás elementos la "rodeen". Esto de los floats tiene mucha miga, si os interesa el tema podéis leer este tutorial. El código CSS es el siguiente:

#sidebar {
	width: 200px;
	padding: 10px;
	float: left;
}
El padding no es obligatorio, pero lo he puesto para luego poder explicar la siguiente capa. También es necesario especificar el ancho en píxeles. Ah, con este método la barra no se extenderá hasta abajo, sino que se corta en su final (esto se ve bien en el ejemplo). Si ponéis la barra de otro color y queréis que llegue hasta abajo, podéis usar la técnica de Faux Columns.

#main

Esta es la capa donde irá prácticamente todo el contenido (en un blog aquí irían los posts). Lo importante en esta capa es indicar con margin-left la distancia desde el borde del #container hasta esta capa (pasando por encima de la barra la teral). Nuestra barra lateral tiene 200 píxeles de ancho, 10 píxeles de padding por la izquierda y otros 10 por la derecha. Así que el margen izquierdo de esta capa sería 200+10+10+X, donde X es la cantidad que nosotros queramos dejar de separación entre la barra lateral y el contenido principal. Yo, Coco, he dejado 5 píxeles. Es muy fácil:

#main {
	margin-left: 225px;
}

#footer

La capa del footer (pie) viene bien para poner información de Copyright/Copyleft (recordad, chicos, las licencias Creative Commons son buenas para la salud) o cualquier otro tipo de información miscelánea. Aquí lo único que hay que tener en cuenta es el bug de algunos navegadores (como Mozilla) con respecto a los floats, que haría que la barra lateral pasara por encima de la capa del footer si fuese muy larga. Para evitarlo, simplemente ponemos un clear: both; (digamos que "anula" los floats) y listo:

#footer {
	clear: both;
}
¡Y ya tenemos nuestro propio layout tableless que sigue los estándares! Nos vemos en el próximo episodio :)