Formatando uma galeria de fotos utilizando CSS.
Resultado final:
[iframe http://www.linhadecomando.com/css_galeria 520 150]
Arquivo CSS
div.imagem
{
margin: 2px;
border: 1px solid #000000;
height: auto;
width: auto;
float: left; /* alinhamento a esquerda */
text-align: center; /* texto da legenda alinhado no centro */
font-family: Arial;
font-size: 12px;
}
/* formatação das imagens */
div.imagem img
{
display: inline; /* exibição das imagens alinhadas */
margin: 3px;
border: 1px solid #ffffff;
}
/* uma borda será exibida quando passar o mouse sobre a imagem */
div.imagem a:hover img {border: 1px solid #000000}
/* formataçao do texto que servirá como legenda para as imagens */
div.legenda
{
text-align: center;
font-weight: normal;
width: 130px; /* define o tamanho da área em que será exibida a legenda -
se o valor for menor que a quantidade de caracteres,
ocorre uma quebra de linha */
margin: 2px;
}
Arquivo HTML
CSS - Galeria de Fotos
