Trucos prácticos y técnicas para maquetar en CSS

La iniciativa de actualizar los programas navegadores de The Web Standards Project (BUI), ha empujado a muchos diseñadores a avanzar hacia un diseño más respetuoso con los estándares, utilizando CSS en lugar de tablas para maquetar y ahorrar ancho de banda, y al mismo tiempo mejorando los valores semánticos, de accesibilidad y alcance del sitio.

“Las tablas han muerto...”

Varios diseñadores han seguido la dirección propuesta por Jeffrey Zeldman al proponer tutoriales que nos hayn ayudado a superar el desconcierto inicial de diseñar sin tablas. Los primeros intentos se han enfocado en crear dos o más columnas utilizando posicionamiento CSS en lugar de tablas, permitiendo una completa separación de la estructura y la presentación. Estas técnicas se han documentado y archivado en los sitios de Eric Costello, glish y de Rob Chandanais, Blue Robot.

Muchos otros se han unido, como Owen Briggs con Box lesson y Tantek Çelik, con su box model hack, explicado por Eric Costello, yel propio Tantek. Dotfile cita centenares de sitios diseñados con maquetación basada en CSS.

“...Larga vida a las tablas”

Aunque estos excelentes recursos se proponen crear una maquetación general utilizando sólo posicionamiento con CSS, surgen otras cuestiones a medida que nosotros, como diseñadores, nos encontramos con un problema fácil de resolver con tablas, pero no tan obvio con CSS. Una cuestión así se planteó en Webdesign-L, una lista de correo, con el asunto “Tables are dead ... long live tables.”

La cuestión

Supogamos que tienes una serie de miniaturas de imágenes que enlazan a versiones más grandes de estas mismas imágenes – un tipo de página muy común. Supongamos, además, aque cada imagen tiene una pequeña descripción que nos gustaría que apareciera centrada debajo de ella. Aparte, para conservar espacio en la ventana, queremos que las imágenes y sus pies se alineen en filas a través de la pantalla, de manera que se adapten al ancho de la pantalla (diseño líquido). Con este último requerimiento hemos salido del dominio de las tablas y hemos entrado en el de CSS.

Paso a paso

Vayamos paso a paso. El primer requisito es que las miniaturas tengan su pie centrado debajo. Esto es relativamente fácil: en el HTML colocamos la imagen, seguida de un retorno de carro (o salto de línea, BR), y después , colocamos el pie en un párrafo que está centrado (mediante CSS).

A continuación queremos alinear los pares de imagen/pie a través de la ventana del navegador. Utilizando tablas, cada uno de estos pares iría dentro de una celda TD separada. Usando CSS necesitamos colocarlos en DIVs separados. Para que se alineen horizontalmente a través de la ventana utilizamos CSS para hacer que cada uno de estos DIVs floten (FLOAT) a la izquierda.

El CSS en este punto es así:

div.float {
  float: left;
  }
  
div.float p {
   text-align: center;
   }
    

And the HTML:

<div class="float">
  <img src="image1.gif" width="100" height="100"
  alt="image 1" /><br />
  <p>caption 1</p>
</div>

<div class="float">
  <img src="image2.gif" width="100" height="100"
  alt="image 2" /><br />
  <p>caption 2</p>
</div>

<div class="float">

  <img src="image3.gif" width="100" height="100"
  alt="image 3" /><br />
  <p>caption 3</p>
</div>
    

Y así se muestra en el navegador:

Usuarios que han visto este tema también han visto...

- CSS para campos textarea de formulario
- Aplicar los estilos a diferentes dispositivos con CSS
- Qué son las capas
- Efecto de sombra con CSS
- Primeros pasos con CSS

- Versión imprimible de este documento
- Enviar por e-mail este documento