El Sitio pertenece a esa generación de páginas que nacieron cuando Internet empezó a ser asequible y las conexiones se popularizaron. No hay más que decir que el primero módem que tuve fue toda una maravilla de su época, 14, 4 Kbps nada menos, y aunque en su tiempo era suficiente, apenas admite comparación con los 3 Mbps de mi actual ADSL.

Al igual que las conexiones las tendencias y formas de construir las páginas han cambiado notablemente, y lo que por aquel entonces estaba considerado como una práctica aceptable hoy día se desaconseja enérgicamente.

En este caso está el maquetado de las páginas. En un principio, sólo era posible lograr según que composición mediante el uso de tablas. La típica estructura periodística de una cabecera, varias columnas y un pie, se conseguía mediante este código:

	<table border="1" align="center">
		<tr>
			<td colspan="3" align="center">Cabecera</td>
		</tr>
		<tr>
			<td>Columna izquierda</td>
			<td>Columna central</td>
			<td>Columna derecha</td>
		</tr>
		<tr>
			<td colspan="3">Pie de página</td>
		</tr>
	</table>

Esto hoy día está completamente desaconsejado. Las tablas sólo deben utilizarse para lo que fueron concebidas, es decir, para presentar información tabulada, y no como un mecanismo de composición de la página. Para ello se insiste en la presentación y distribución del contenido mediante capas, es decir, que el código anterior debe convertirse en esto:

	<div class="contenedor">
		<div class="cabecera">Cabecera</td>
			<div class="colizq">Columna izquierda</div>
			<div class="colcen">Columna central</div>
			<div class="colder">Columna derecha</div>
		<div class="piedepagina">Pie de página</div>
	</div>

La estructura de la página se pierde completamente, para recuperarla hay que echar mano de los estilos.

Por ello, a cada capa le he asignado un estilo que definiré en un archivo aparte, al hilo de otra recomendación que incide en separar escrupulosamente las cosas: en el archivo HTML no deben estar definidos los estilos, que se declararán en un archivo con extensión CSS, ni tampoco incluir funciones JavaScript, que deberán estar en su correspondiente archivo JS. Si examinas la cabecera del código de ésta página verás que se llaman a varios archivos JS y CSS. De esta forma, se consigue mayor pulcritud y modularidad en las páginas.

	<link rel="stylesheet" href="laco002.css" />

Naturalmente no siempre es posible hacerlo así, simplemente se trata de funciones y/o estilos que sólo se van a usar en esa página, o peor aún, el servidor sólo permite modificar plantillas HTML sin la posibilidad de subir al servidor archivos adicionales, como ocurre con algunos servicios gratuitos de bitácoras.

Por lo pronto decidamos que anchura tendrá el contenedor de nuestra página, esto se logra con la propiedad width:

	.contenedor {
		width: 300px;
	}

así lograremos una anchura fija de 300 pixeles, pero también puede ser interesante que el contenedor se ajuste al tamaño de la pantalla, para eso se puede expresar, en tanto por ciento, que proporción de la pantalla queremos cubrir:

	width: 90%;

También les pondremos un color de fondo para poder distinguir unas capas de otras:

	background-color: #FF0000;

Una vez definidas las propiedades del contenedor hagamos lo propio con las de la cabecera:

	.cabecera {
		width: 290px;
		margin: 2px 5px 3px 5px;
		background-color: lime;
	}

he decidido que la cabecera tendrá una anchura de 290 pixeles, y que, para centrarla, tendrá 5 pixeles a derecha e izquierda (ver Márgenes negativos) y que estará separada 2 pixeles del borde superior del contenedor y mantendrá una separación de 3 pixeles con las columnas. El color lo he definido esta vez mediante su palabra clave, en vez del código hexadecimal RGB.

Una vez que tenemos la cabecera empecemos con las columnas, para conseguir que una capa se comporte como una columna será necesario, por un lado definir su anchura, y por otro conseguir que el navegador la coloque justo a la derecha de la anterior, y no debajo, que sería su comportamiento habitual. Para ello existe la propiedad float, con ella hacemos que los elementos de una página floten con respecto a otro.

	.colizq {
		float:left;
		width: 31%;
		margin: 1%;
		background-color: white;
	}

	.colcen {
		float:left;
		width: 31%;
		margin: 1%;
		background-color: #000000;
	}

	.colder {
		float:left;
		width: 31%;
		margin: 1%;
		background-color: #0CF; /* equivale a #00CCFF */
	}

Las cuentas parecen no salir, si cada columna tiene una anchura igual al 31% del contenedor, y se le pone un 1% del margen, tenemos el 96% cubierto, ¿qué pasa con el 4% restante? Bien hay que tener en cuenta que, de la forma que he definido los márgenes, con ese margin: 1%; indico que todos los márgenes de la capa (superior, derecho, inferior, e izquierdo) se establezca a un 1% con respecto a las dimensiones totales del contenedor. Ese 1% estará tanto a la derecha como a la izquierda, de modo que en realidad se cubre el 99% del ancho del contenedor. Como realmente no sabemos que altura tendrá finalmente la página, no parece buena idea dejar al azar el margen superior e inferior, para ello se pueden definir todos los márgenes individualmente mediante el método abreviado:

	margin: 2px 1% 2px 1%;

Así, además queda más claro donde está ese 3% que aparentemente se nos había perdido. El 1% restante lo dejo a beneficio de inventario, aunque siempre se puede conseguir el ajuste fino poniendo todas unidades en pixeles.

Por último, nos queda el pie de página. Para asegurarnos que esta capa será efectivamente el pie de página, y no se comportará de forma extraña respecto a las columnas, hay que decirle al navegador que los siguientes elementos no flotarán respecto a los anteriores, crearemos un punto de corte con la propiedad clear, su definición no es exactamente esa, pero es el comportamiento que deseamos.

	.piedepagina {
		clear: both;
		margin: 2px 5px 3px 5px;
		background-color: blue;
	}

Este es el resultado final:

Con respecto a las columnas, pudiera parecer innecesario declarar float en la columna de la derecha, al fin y al cabo nada va a flotar con respecto a ella puesto que lo siguiente es el pie donde precisamente hemos introducido ese punto de corte. Pero no es tan fácil, si hablamos de Firefox u Opera, sencillamente esa columna no se quedará en su sitio, y si hablamos del Explorer la columna hará caso omiso de la anchura definida ajustándose al máximo ancho del texto contenido, así pues, todas las columnas deben llevar su correspondiente float.

Por cierto, el Explorer es muy quisquilloso con el contenido de las columnas, como algo exceda la anchura definida (una URL demasiado larga, por ejemplo) sencillamente obviará todas las indicaciones y se comportará como si a esa columna se le hubiera indicado la propiedad clear:both;.

Un último detalle aunque no quiero liar mucho la cosa. Las declaraciones de los estilos en una hoja CSS pueden ser, por decirlo de algún modo absolutas (con el sigo #) o relativas (mediante un punto). Si declaramos un estilo como absoluto será únicamente aplicable al elemento que tenga el id del estilo. Por ejemplo:

	#contenedor {
		width: 300px;
		background-color:.FF0000;
	}

	#cabecera {
		width: 290px;
		margin: 2px 5px 3px 5px;
		background-color: lime;
	}

	<div id="contenedor">
		<div id="cabecera">Cabecera</div>
	</div>

#contenedor y #cabecera sólo se aplicarán a los elementos con el id correspondiente. El hecho de hacerlo así sirve para poder nombrar a éstos elementos y hacer referencia a ellos desde una función JavaScript, por ejemplo, y para ello habrán de ser únicos en la página. De ahí lo de absoluto.

Sin embargo con:

	.item {
		font-family: sans-serif;
		font-size: 8pt;
	}

	<div class="item">Lista 1</div>
	<div class="item">Lista 2</div>
	<div class="item">Lista 3</div>

Todos los elementos con el estilo item tendrán el mismo formato pero no hay forma de referirse a cada uno de ellos individualmente.

Comentar este artículo (Ya hay 2 comentarios)

---

 

Este artículo ha sido leído 764 veces desde el 2/02/08