Template Div-Thumbnails

KaKarotto · Janeiro 28, 2008

Olá o/

Vou postar aqui uma forma de criar uma sessão para imagens em miniatura para o seu site, considerando a exibição no IE e no FF.

Css


*{padding:0; margin:0;}

        div.imgGallery{
         margin:50px;
         float:left;
         width:240px; height:auto;

        }

        div.imgGallery div{

         float:left;
         padding:5px;
         display:inline;

        }

        div.imgGallery div a{
        display:block;
        text-decoration:none;
        }

        div.imgGallery div a img{
         display:block;
         width:50px; height:50px;
         border:none;
        }
[/codebox]

Este é o mínimo Css preciso para montar um div com diversas imagens em miniatura levando em conta essa estrutura html:

Html

[codebox]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>:::::::Thumbnails CSS::::::::</title>

<base href="http://files.opensuse.org/opensuse/en/thumb/3/32/Seamonkey_logo.gif/" />

</head>
<body>

<div class="imgGallery">

<div><a href=""><img src="50px-Seamonkey_logo.gif" alt="" /></a></div>
<div><a href=""><img src="50px-Seamonkey_logo.gif" alt="" /></a></div>
<div><a href=""><img src="50px-Seamonkey_logo.gif" alt="" /></a></div>
<div><a href=""><img src="50px-Seamonkey_logo.gif" alt="" /></a></div>
<div><a href=""><img src="50px-Seamonkey_logo.gif" alt="" /></a></div>
<div><a href=""><img src="50px-Seamonkey_logo.gif" alt="" /></a></div>
<div><a href=""><img src="50px-Seamonkey_logo.gif" alt="" /></a></div>
<div><a href=""><img src="50px-Seamonkey_logo.gif" alt="" /></a></div>
<div><a href=""><img src="50px-Seamonkey_logo.gif" alt="" /></a></div>
<div><a href=""><img src="50px-Seamonkey_logo.gif" alt="" /></a></div>
<div><a href=""><img src="50px-Seamonkey_logo.gif" alt="" /></a></div>
<div><a href=""><img src="50px-Seamonkey_logo.gif" alt="" /></a></div>
<div><a href=""><img src="50px-Seamonkey_logo.gif" alt="" /></a></div>
<div><a href=""><img src="50px-Seamonkey_logo.gif" alt="" /></a></div>
<div><a href=""><img src="50px-Seamonkey_logo.gif" alt="" /></a></div>
<div><a href=""><img src="50px-Seamonkey_logo.gif" alt="" /></a></div>

</div>

</body>
</html>

O div que conterá as imagens miniatura está em posição relativa e flutuante a esquerda, o que é aconselhável, pois não vai assumir o lugar de nenhum outro objeto html e "empurrará" qualquer outro que estiver abaixo, se encaixando conforme o layout que já montou.

Variantes

As mudanças que certamente você fará.

[div.imgGallery div]: margin.

O margin é encarregado de deixar as imagens distantes umas das outras.

[div.imgGallery div a img]: width, height.

Responsável pela largura e altura das imagens.

Alterações

Ao mudar o espaçamento das imagens e/ou o tamanho delas será necessário mudar o tamanho da largura do div principal "imgGallery". No caso do html acima, eu quis mostrar 16 imagens (isso será definido pela linguagem de servidor ou Javascript). Porém é o Css que determinará o design e, no caso, o design usado foi o de 4 colunas e 4 linhas.

Montando o Design...

Sabendo a quantidade de imagens que sua página html irá mostrar, basta fazer alguns cálculos. Para montar um design de 4 colunas e 4 linhas por exemplo, o calculo precisa ser aplicado à largura do div principal "imgGallery.

As imagens vão se alojar dentro do div uma ao lado da outra e caso as imagens preencham a largura total do div principal as próximas são carregadas na linha abaixo.

Portanto é necessário achar um valor do div principal que faça caber apenas 4 imagens em sua largura.

Os cálculos...

As imagens que eu tenho no Html vão ter dimensões 50x50 pixels, então para achar a largura do div principal:

50 x 4 = 200 // 50 pixels de largura da imagem vezes 4 imagens

200 + 40 =240 // 200 mais os espaços entre as imagens

QUe é o que eu defini lá em cima no Css nessa parte:

div.imgGallery{
           margin:50px;
           float:left;
           width:240px; height:auto; // Aquiiiiiiiiii !!!
          }

Por que 40? O espaçamento é de 5px, então seria 5px * 5 = 25px certo?

Errado. Cada imagem está a 5px de distancia nos seus quatro lados, para as duas imagens centrais o espaçamento é de 10px pois além de estarem 5px distante de outra imagem a outra imagem por sua vez também está distando 5px e somando-se dá 10px.

Pronto, com a largura do div principal definida para 240px as imagens irão ficar numa tabela formando 4 linhas e 4 colunas.

Você esqueceu de calcular a altura seu tonto.

Não é preciso, a altura está definida como auto, então o div principal irá aumentar conforme o número de imagens, empurrando quaisquer elementos que possam estar abaixo.

Atenção

Se for usar bordas nas imagens é necessário adicionar elas no cálculo!!!

Se usarmos uma borda de 1px nas imagens, então a conta final deverá ser acrescida de 8 no nosso exemplo, porque são 4 colunas e cada imagem tem dois lados laterais que influenciaria na largura do div principal, se cada uma tem 2 lados:

2 lados x 4 imagens x 1px de largura da linha da borda=8px

Portanto no exemplo desse post, a largura do div "imgGallery" iria de 240px para 248px.

Já vi muita gente usando programação para definir o design ou ainda usando tabelas. Não é necessário, apenas o Css se encarrega disso.

Esse texto foi inspirado na dificuldade que tive há alguns anos em executar isso quando me iniciava no Css. As perguntas que usei aqui foram as que eu mesmo fiz durante o processo de aprendizado e caso alguém queira postar mais perguntas fique à vontade.

Espero que tenha sido útil para vocês.

Aquele abraço.

hipnos na area · Março 1, 2008

KaKarotto acredito que ao invés de DIVs você devira ter usado listas não ordenadas

que tal atualizar??

falow abraço

KaKarotto · Março 1, 2008

Ahhh bem observado Guilherme. Mas a minha intenção com o post era mostrar os cálculos do posicionamento. Observe que nesse caso é sem dúvida uma lista, mas eu quis enfatizar a técnica de posicionamento e como a fazer direito podendo ser utilizada em qualquer outra situação que não gerasse listas, deixei a semântica para os entendidos do assunto apenas.

Para os mais entendidos em Css e puristas, o método para converter esse sistema em listas não ordenadas é simples, basta substituir o div principal por um ul e os divs que englobam as imagens linkadas por um li.

No Css é a mesma coisa, onde div.imgGallery ficaria:

ul.imgGallery

e todos os derivados de div.imgGallery div ficariam:

ul.imgGallery li.

Se ensinei direito e a técnica que usei for bem feita, a vizualização ficará exatamente igual à anterior. É o que eu espero.

Obrigado pela observação Guilherme!

Akeleabraço

Entrar

Template Div-Thumbnails

Pergunta

KaKarotto

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

hipnos na area

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades