Maquetar una galería de fotos con CSS usando listas

  • 26 de enero de 2006
  • Valoración:
  • 4 Comentarios
  • CSS
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.

Podemos ver el resultado final de este ejemplo, para hacernos una idea exacta de lo que pretendemos conseguir.

Referencia:este ejemplo continúa otro en el que se explica cómo hacer una galería de fotos utilizando capas contenedoras

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=""/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
      <li><a href="#"><img src="img/2.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
      <li><a href="#"><img src="img/3.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
      <li><a href="#"><img src="img/4.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen más larga de lo habitual</span></a></li>
      <li><a href="#"><img src="img/5.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
       <li><a href="#"><img src="img/6.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
      <li><a href="#"><img src="img/7.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
       <li><a href="#"><img src="img/8.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
       <li><a href="#"><img src="img/9.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
       <li><a href="#"><img src="img/10.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
       <li><a href="#"><img src="img/11.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></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 <span>, 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. Podeis ver el resultado de aplicar estos estilos aquí . 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.

De este modo la definición de estilos para nuestra lista de fotos queda así:

#principal li {
   display:inline;
   float:left;
   width:220px;
   background-color:#f5f7f9;
   padding:5px;
   margin:10px;
   text-align: center;
   border-right: #a5a7aa solid 1px;
   border-bottom: #a5a7aa solid 1px;
}


Y como podemos ver en el resultado final aquí, queda perfectamente maquetada, adaptable a distintas resoluciones y con un código limpio y fácil de entender.

Autor

Javier Chaure

Desarrollador Web

Comentarios

Sergio

26/1/2006
Excelente el tutorial igual que el de galeria por capas... Pero me quedo una duda, como puedo aplicar esto a una galeria generada dinamicamente con PHP y MySQL ? Se me ocurre que con PHP lo que tengo que hacer es repetir los li (list item)..
Gracias.

cucsialterno

21/4/2006
muy buen sistema lo de css carga rapido y es seguro x que se acomodan perfectamente con los pixels. lo que no me queda claro de agregarles mas cosas para que quede vistosa la pagina.

Richard

06/2/2007
Hola, pero este codigo no funciona muy bien en Mozilla firefox....

israelpg

09/8/2012
position: relative
En #principal no veo claro que sea necesario el position: relative

Con todo, el ejemplo es muy claro e instructivo. La galería queda muy bien, buenos estilos.

Compartir