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.Por Javier Chaure
Publicado em: 19/12/06
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.
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=""/><br /><span>Descrição da imagem</span></a></li>
<li><a href="#"><img src="img/2.jpg" border="0" alt=""/><br /><span>Descrição da imagem</span></a></li>
<li><a href="#"><img src="img/3.jpg" border="0" alt=""/><br /><span>Descrição da imagem</span></a></li>
<li><a href="#"><img src="img/4.jpg" border="0" alt=""/><br /><span> Descrição da imagem mais longa que o habitual</span></a></li>
<li><a href="#"><img src="img/5.jpg" border="0" alt=""/><br /><span> Descrição da imagem </span></a></li>
<li><a href="#"><img src="img/6.jpg" border="0" alt=""/><br /><span> Descrição da imagem </span></a></li>
<li><a href="#"><img src="img/7.jpg" border="0" alt=""/><br /><span> Descrição da imagem </span></a></li>
<li><a href="#"><img src="img/8.jpg" border="0" alt=""/><br /><span> Descrição da imagem </span></a></li>
<li><a href="#"><img src="img/9.jpg" border="0" alt=""/><br /><span> Descrição da imagem </span></a></li>
<li><a href="#"><img src="img/10.jpg" border="0" alt=""/><br /><span> Descrição da imagem </span></a></li>
<li><a href="#"><img src="img/11.jpg" border="0" alt=""/><br /><span> Descrição da imagem </span></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 <span>, 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.
Comentários do artigo
