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.
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ón de la imagen</span></a></li>
<li><a href="#"><img src="img/2.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/3.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/4.jpg" border="0" alt=""/><br /><span>Descripció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ón de la imagen</span></a></li>
<li><a href="#"><img src="img/6.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/7.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/8.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/9.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/10.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/11.jpg" border="0" alt=""/><br /><span>Descripció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.
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ón de la imagen</span></a></li>
<li><a href="#"><img src="img/2.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/3.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/4.jpg" border="0" alt=""/><br /><span>Descripció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ón de la imagen</span></a></li>
<li><a href="#"><img src="img/6.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/7.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/8.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/9.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/10.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>
<li><a href="#"><img src="img/11.jpg" border="0" alt=""/><br /><span>Descripció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.
Javier Chaure
Desarrollador Web