Oficina da Net

Assine nosso RSS - Assine o RSS e receba as novidades do site em seu leitor.

Oficina da Net » Programação » CSS

Galeria de Fotos com CSS

Publicado em: 07/02/2008 | CSS | Visualizações: 4.365 | 5 Comentário(s)

Versão para

Olá pessoal, estou de volta, espero que gostem desse artigo.

É uma galeria simples, fácil de ser construída, sem complexidade, mas que fica muito bonita dentro do site.
Para a construção dessa galeria de fotos, usaremos o conceito de camada, que vem sendo muito utilizado na construção web ultimamente.

Chega de conversa e vamos colocar a mão na massa, abra o Bloco de Notas e digite os códigos abaixo:

#principal { 

   margin:0 auto; 

}

A camada acima será utilizada para situar a galeria na página.

.camadafoto { 

   float:left; 

   width:210px; 

   height:180px; 

   margin: 10px; 

   padding:5px; 

   background-color:#f5f7f9; 

   border-right: #a5a7aa solid 1px; 

   border-bottom: #a5a7aa solid 1px; 

   text-align:center; 

}

Esta camada é utilizada para dar estilo às miniaturas das fotos. Como por exemplo, faze-las flutuar (float: left) para se alinharem horizontalmente se ajustando na largura da janela e dando margens (margin: 10px) para separar umas das outras.

Salve esse arquivo como “estilo.css”.

Agora crie um novo arquivo e digite o seguinte código:

<html>

<head>

<title>Galeira de Fotos com CSS</title>

<link href="estilo.css" rel="stylesheet" type="text/css" />

</head>



<body>

<div id="principal"> 

   <h3>GALERIA DE FOTOS COM CSS</h3> 

   <div class="camadafoto"><a href="#"><img src="img/1.jpg" border="0" alt=""/></a><br /><span>Descrição da imagem</span></div> 

   <div class="camadafoto"><a href="#"><img src="img/2.jpg" border="0" alt=""/></a><br /><span>Descrição da imagem</span></div> 

   <div class="camadafoto"><a href="#"><img src="img/3.bmp" border="0" alt=""/></a><br /><span>Descrição da imagem</span></div> 

   <div class="camadafoto"><a href="#"><img src="img/4.bmp" border="0" alt=""/></a><br /><span>Descrição da imagem de forma longa</span></div> 

</div> 

</body>

</html>

Esse é o código da nossa página, salve-o como “index.html”.
Lembre-se que o caminho das imagens desse script são meramente ilustrativos, você deverá colocar o caminho das imagens de acordo com a localização deles no seu PC.

Clique aqui e veja como ficou a galeria de fotos.

Até a próxima...

compartilhe

Dica: Confira todo nosso conteúdo de CSS no site.

Links patrocinados

Últimos artigos do editor

O que é um Keylogger?
Keylogger (que significa reg.

Curso de Delphi - Aula 3:.
Nessa aula vocês verão as Pr.

O que é svchost.exe?
O svchost.exe é um serviço q.

Curso de Corel Draw X3: A.
Às vezes alguns trabalhos de.

Identidade Visual: A cria.
Nesse artigo da série veremo.

Curso de Delphi - Aula 2:.
No Delphi temos 2 níveis de .

> clique aqui para comentar

Opinião do leitor:

5 Comentário(s)

Petermann comentou:

Sou iniciante. Precisava de um album para minhas fotos. Foi excelente ter encontrado. Muito obrigado.

Publicado em: 09/07/2008 - 03:11

Marlon comentou:

POde crer cara, deu certo! Vlw mesmo!

Publicado em: 05/05/2008 - 15:47

Roberto comentou:

nao consegui meu amigo

Publicado em: 22/04/2008 - 17:37

Junior comentou:

Gostei muito da matéria, muito útil. Só não conseguir fazer com que as imagens ficassem com a mesma dimensão da camada. As fotos estão muito grandes, o que devo fazer nesse caso?

Publicado em: 22/04/2008 - 16:53

Roberto comentou:

Cara achei interessante, o esquema da foto, mas nao consegui fazer funionar se mudo o local das fotos, uma qeu vou enviar para o site em questao.. <img src="file:///D:/casa/home%20page%20formiga/0503/100_0006.jpg" border="0" width="100" height="75"/></a><br /><span>Descrição da imagem</span></div> mas se eu modificar e deixar so 0503/100_0006.jpg ele nao aparece an visualizaçao. msn rclaudio7@hotmail.com

Publicado em: 16/03/2008 - 09:30

Acesso restrito

Destaques

Instalando WORDPRESS
Neste tutorial vamos aprender instalar o WORDPRESS em um servidor local. O mesmo serve para um servidor web.

Peixe Grande 2008
O Oficina da Net está este ano participando do Projeto Peixe Grande 2008 na categoria de Blog. Ajude-nos vote!

iPhone 3G no Brasil
O smartphone da Apple chegou ao Brasil com a tecnologia de terceira geração de telefonia.

Links patrocinados

Autor

Jonathan Lamim Antunes

Site do colunista