helldanger1
GForum VIP
- Entrou
- Ago 1, 2007
- Mensagens
- 29,631
- Gostos Recebidos
- 1
Outro exemplo de uma construção CSS de uma galeria de fotos, desta vez utilizando listas.
Por Javier Chaure
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
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.
Por Javier Chaure
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
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.