Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

( ((phabyo)) )

Pagina de fotos

Por , em Desenvolvimento frontend

Recommended Posts

( ((phabyo)) )    0

( ((phabyo)) )
Postado

Pessoal,começarei a fazer uma pagina que só terá os thumbs (miniaturas das fotos) das fotos e não tenho noção de como começar a fazer pra ele entender que existem 3 colunas de fotos tipo assim: (o zero '0' representa cada foto)

0 0 00 0 00 0 00 0 0

Pensei em dar pra cada um uma class:ex:

<div class="destaque_fotos"> <!-- destaque fotos --> <h1>Titulo Fotos</h1> <p class="fotos_00">Clique nas fotos e veja maior.</p> <p class="fotos_01">imagem 01</p> <p class="fotos_02">imagem 02</p> <p class="fotos_03">imagem 03</p> . . .</div>

Mais não ficaria muito trabalhoso? alguém tem alguma alternativa ou maneira?E outra coisa, pode class de class ? como nesse exemplo?Valeuuu.

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

No lugar de imagens eu coloquei divs para ver o efeito:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"><head><title>linhas e colunas</title><meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /><style type="text/css">.principal{	width: 790px;	border: 1px solid;	padding-top: 10px;	text-align: center;}.divs{	display: inline;	width: 250px;	height: 50px;	margin-left: 10px;	margin-bottom: 10px;	background-color: #000000;	float: left;}</style></head><body><div class="principal">	<div class="divs"></div>	<div class="divs"></div>	<div class="divs"></div>	<div class="divs"></div>	<div class="divs"></div>	<div class="divs"></div>	<div class="divs"></div>	<div class="divs"></div>	<div class="divs"></div>	<br clear="all" /></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

.:: Pegasus ::.    0

.:: Pegasus ::.
Postado

Vamos supor que o Tamanho de cada Thumbnail seja de 75px.

Você pode usar as listas não ordenadas que eu acho muito melhor que divs.

Defina a largura do elemento ul. de forma que caiba somente 3 miniaturas.

Coloque o elemento li com float left. assim quando não der o espaço para uma quarta miniatura automaticamente ele quebra para linha de baixo.

Bom só dei a idéia de como poderia ser feito, claro que envolve mais algumas coisas além disso mas é nessa base.

Vou tentar demonstrar um pouco a minha ideia.

 

CSS

#lista {	width:250px;	background:#FF00FF;}#lista ul {	list-style:none;}#lista ul li {	float:left;}
HTML

<ul id="lista">	 <li><a href="#"><img src="imagens/foto1.jpg" alt="" /></a></li>	 <li><a href="#"><img src="imagens/foto1.jpg" alt="" /></a></li>	 <li><a href="#"><img src="imagens/foto1.jpg" alt="" /></a></li>	 <li><a href="#"><img src="imagens/foto1.jpg" alt="" /></a></li></ul>
A minha idéia seria essa.

 

EDIT:

Esqueci de citar uma matéria que faz mais ou menos o que você está precisando.

Galeria de Imagens por Maujor - http://www.imasters.com.br/artigo/5129/css...magens_com_css/

Galeria em ação - http://conteudo.imasters.com.br/5129/final.html

Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Pegasus eu coloquei divs no lugar de <img> apenas para vizualizar o efeito.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito