Jump to content
Fórum Script Brasil
  • 0
Sign in to follow this  
KaKarotto

Template Div-Thumbnails

Question

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.

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  



  • Forum Statistics

    • Total Topics
      148486
    • Total Posts
      644141
×
×
  • Create New...