helldanger1
GForum VIP
- Entrou
- Ago 1, 2007
- Mensagens
- 29,631
- Gostos Recebidos
- 1
Criamos uma galeria de fotos construída com CSS, de uma maneira muito simples, porém vistosa.
Por Javier Chaure
Hoje em dia é cada vez mais comum contar com uma galeria fotográfica em nossa página web. Ao longo deste tutorial veremos duas propostas para fazer uma galeria de fotos vistosa e trivial de usar para nossos visitantes, construída integramente com código padrão HTML e CSS.
Construir a galeria utilizando camadas
Nesta primeira versão de nossa galeria fotográfica vamos empregar camadas como contêiner onde inserir cada uma das nossas miniaturas, junto com a informação que quisermos associar (título, descrição, etc.).
Para termos uma idéia mais clara do trabalho que vamos realizar o melhor seria ver o exemplo em funcionamento.
Como vem sendo habitual trabalhar com camadas usaremos outra camada contêiner para nossa galeria fotográfica coma intenção de organizar de forma lógica nosso desenho e englobar nosso conteúdo em um bloco que podemos manipular com estilos. Podemos limitar a largura desta camada contêiner e situá-la ao nosso gosto. Neste exemplo, não restringiremos nenhuma propriedade salvo as margens para conseguir que nossa construção se adapte a qualquer resolução. Os estilos para esta camada contêiner principal são:
#principal {
margin:0 auto;
}
Por Javier Chaure
Hoje em dia é cada vez mais comum contar com uma galeria fotográfica em nossa página web. Ao longo deste tutorial veremos duas propostas para fazer uma galeria de fotos vistosa e trivial de usar para nossos visitantes, construída integramente com código padrão HTML e CSS.
Construir a galeria utilizando camadas
Nesta primeira versão de nossa galeria fotográfica vamos empregar camadas como contêiner onde inserir cada uma das nossas miniaturas, junto com a informação que quisermos associar (título, descrição, etc.).
Para termos uma idéia mais clara do trabalho que vamos realizar o melhor seria ver o exemplo em funcionamento.
Como vem sendo habitual trabalhar com camadas usaremos outra camada contêiner para nossa galeria fotográfica coma intenção de organizar de forma lógica nosso desenho e englobar nosso conteúdo em um bloco que podemos manipular com estilos. Podemos limitar a largura desta camada contêiner e situá-la ao nosso gosto. Neste exemplo, não restringiremos nenhuma propriedade salvo as margens para conseguir que nossa construção se adapte a qualquer resolução. Os estilos para esta camada contêiner principal são:
#principal {
margin:0 auto;
}