Construir uma galeria de fotos com CSS usando listas

Outro exemplo de uma construção CSS de uma galeria de fotos, desta vez utilizando listas.

Uma galeria de fotos afinal das contas não passa de uma lista de elementos (em nosso caso imagens) que mostraremos como melhor nos convenha. Desde o ponto de vista da ordenação lógica da informação em nossas páginas resulta razoável usar uma lista para estruturar nossos elementos, portanto ao longo desse tutorial veremos o potencial das listas para construir eficientemente casos como este de nossa galeria.

Podemos ver o resultado final deste exemplo, para termos uma idéia exata do que pretendemos conseguir.

Referência:Este exemplo continua outro no qual explica como fazer uma galeria de fotos utilizando camadas como contêiner.

Normalmente estamos acostumados a ver as listas organizadas verticalmente, porém CSS nos permite jogar com os elementos de uma lista para mostra-os de diferentes maneiras. Em nosso caso, provavelmente se organizássemos a lista verticalmente a aparência de nossa galeria ficaria estranha comparada com uma organização horizontal, tal como vimos no exemplo da galeria fotográfica com camadas. Portanto, organizaremos nossa lista horizontalmente, aplicando um display: inline e flutuando os elementos à esquerda para que fluam uns seguidos de outros.

Partimos do seguinte código HTML:

<body>:
<div id="principal">
 <h3>GALERIA CSS - Listas</h3>
 <ul>
 <li><a href="#"><img src="img/1.jpg" border="0" alt=""/> Descrição da imagem</a></li>
 <li><a href="#"><img src="img/2.jpg" border="0" alt=""/> Descrição da imagem</a></li>
 <li><a href="#"><img src="img/3.jpg" border="0" alt=""/> Descrição da imagem</a></li>
 <li><a href="#"><img src="img/4.jpg" border="0" alt=""/> Descrição da imagem mais longa que o habitual</a></li>
 <li><a href="#"><img src="img/5.jpg" border="0" alt=""/> Descrição da imagem </a></li>
 <li><a href="#"><img src="img/6.jpg" border="0" alt=""/> Descrição da imagem </a></li>
 <li><a href="#"><img src="img/7.jpg" border="0" alt=""/> Descrição da imagem </a></li>
 <li><a href="#"><img src="img/8.jpg" border="0" alt=""/> Descrição da imagem </a></li>
 <li><a href="#"><img src="img/9.jpg" border="0" alt=""/> Descrição da imagem </a></li>
 <li><a href="#"><img src="img/10.jpg" border="0" alt=""/> Descrição da imagem </a></li>
 <li><a href="#"><img src="img/11.jpg" border="0" alt=""/> Descrição da imagem </a></li>

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

Como se pode apreciar, inserimos dentro de cada <li> (list item) nossa imagem e um comentário acrescentado com um , tal como fizemos no tutorial da galeria fotográfica com camadas.

Nossa redefinição de estilos para as listas ficaria da seguinte maneira:

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

Note que as típicas vinhetas que aparecem associadas às listas desordenadas desaparecem quando aplicamos o display:inline, da mesma forma que se tivéssemos usando um list-style:none. Pode-se ver o resultado de aplicar estes estilos aqui . O comportamento de nossos elementos da lista (os list ítems <li>) é parecido com o das camadas agora.

Podemos modificar as propriedades que quisermos para conseguir que a aparência de cada um dos elementos da lista se ajuste ao nosso objetivo. Baseando-nos nos estilos que aplicamos no exemplo da galeria fotográfica com camadas, mudamos a cor de fundo, a largura de cada <li>, lhes damos margin e padding para apresenta-los corretamente e damos estilo às bordas para conseguir aparência de profundidade.

Deste modo a definição de estilos para nossa lista de fotos fica assim:

#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;
}

E como podemos ver no resultado final aqui, fica perfeitamente construída, adaptável a distintas resoluções e com um código limpo e fácil de entender.