( ((phabyo)) ) 0 Denunciar post Postado Maio 16, 2007 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 0Pensei 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 Denunciar post Postado Maio 16, 2007 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
( ((phabyo)) ) 0 Denunciar post Postado Maio 16, 2007 Legal, eu achei este topico aqui << e me deu um clareada nas ideias tbm. Quer dizer que pode fazer class de class? Valeuuu. Compartilhar este post Link para o post Compartilhar em outros sites
.:: Pegasus ::. 0 Denunciar post Postado Maio 16, 2007 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 Denunciar post Postado Maio 16, 2007 Pegasus eu coloquei divs no lugar de <img> apenas para vizualizar o efeito. Compartilhar este post Link para o post Compartilhar em outros sites
