Maquetar una galería de fotos con CSS usando listas

Otro ejemplo de una maquetación CSS de una galería de fotos, esta vez utilizando listas.

Una galería de fotos al fin y al cabo no es más que una lista de elementos (en nuestro caso imágenes) que mostraremos como más nos convenga. Desde el punto de vista de la ordenación lógica de la información en nuestras páginas resulta razonable usar una lista para estructurar nuestros elementos, así que a lo largo de este tutorial veremos el potencial de las listas para maquetar eficientemente casos como este de nuestra galería.

Normalmente estamos acostumbrados a ver las listas organizadas verticalmente, pero CSS nos permite jugar con los elementos de una lista para mostrarlos de distintas maneras. En nuestro caso, probablemente si organizáramos la lista verticalmente la apariencia de nuestra galería quedaría extraña comparada con una organización horizontal, tal y como vimos en el ejemplo de la galería fotográfica con capas. Por tanto, organizaremos nuestra lista horizontalmente, aplicando un display:inline y flotando los elementos a la izquierda para que fluyan unos a continuación a otros.

Partimos del siguiente código html:

<body>:
<div id="principal">
 <h3>GALERÍA CSS - Listas</h3>
 <ul>
 <li><a href="#"><img src="img/1.jpg" border="0" alt=""/> Descripción de la imagen</a></li>
 <li><a href="#"><img src="img/2.jpg" border="0" alt=""/> Descripción de la imagen</a></li>
 <li><a href="#"><img src="img/3.jpg" border="0" alt=""/> Descripción de la imagen</a></li>
 <li><a href="#"><img src="img/4.jpg" border="0" alt=""/> Descripción de la imagen más larga de lo habitual</a></li>
 <li><a href="#"><img src="img/5.jpg" border="0" alt=""/> Descripción de la imagen</a></li>
 <li><a href="#"><img src="img/6.jpg" border="0" alt=""/> Descripción de la imagen</a></li>
 <li><a href="#"><img src="img/7.jpg" border="0" alt=""/> Descripción de la imagen</a></li>
 <li><a href="#"><img src="img/8.jpg" border="0" alt=""/> Descripción de la imagen</a></li>
 <li><a href="#"><img src="img/9.jpg" border="0" alt=""/> Descripción de la imagen</a></li>
 <li><a href="#"><img src="img/10.jpg" border="0" alt=""/> Descripción de la imagen</a></li>
 <li><a href="#"><img src="img/11.jpg" border="0" alt=""/> Descripción de la imagen</a></li>

 </ul>
</div>
</body>

Como puede apreciarse, hemos insertado dentro de cada <li> (list item) nuestra imagen y un comentario añadido con un , tal y como hicimos en el tutorial de la galería fotográfica con capas.

Nuestra redefinición de estilos para las listas quedaría de la siguiente manera:

#principal li {
 display:inline;
 float:left;
}

Nótese que las típicas viñetas que aparecen asociadas a las listas desordenadas desaparecen cuando aplicamos el display:inline, de la misma forma que si hubiéramos unsado un list-style:none. El comportamiento de nuestros elementos de la lista (los list ítems <li>) es similar al de las capas ahora.

Podemos modificar las propiedades que queramos para lograr que la apariencia de cada uno de los elementos de la lista se ajuste a nuestro objetivo. Basándonos en los estilos que aplicamos en el ejemplo de la galería fotográfica con capas, cambiamos el color de fondo, el ancho de cada <li>, les damos margin y padding para presentarlos correctamente y damos estilo a los bordes para lograr apariencia de profundidad.

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

- Arreglar los bordes punteados en Internet Explorer con CSS
- Efectos en textos e imágenes con CSS
- Mozilla: navegador centrado en el usuario
- Estilos en formularios: Bordes llamativos para campos de formulario en CSS
- Qué son las capas

- Versión imprimible de este documento

- Enviar por e-mail este documento