Resultado em colunas

[Paulo André 0]

Olá pessoal! :D

 

Minha primeira resposta aqui no iMasters foi a uma dúvida quanto à exibição de resultado em colunas e de lá até agora já esbarrei em várias dúvidas neste sentido e como não encontrei nenhum tutorial neste a respeito, resolvi compartilhar o que também aprendi. Bom, o que vou demonstrar aqui é exatamente a solução para a exibição de resultados em colunas, apesar de simples e talvez muitos já terem este conhecimento, é bastante eficaz pra quem está começando e o mais importante do que a solução, é você aprender o seu funcionamento. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Basicamente, a resposta (também) está em utilizar tableless que é a forma que vou demonstrar. ^_^

 

O exemplo mais comum para isto é uma galeria de fotos, que vai ser o que vou demonstrar aqui. Primeiro você cria um container representado por <div> que iremos chamar de global na folha de estilos e definiremos um tamanho (width) fixo:

 

.global
{
	width: 500px;
}

E seu container:

<div class="global"></div>

Feito o bloco que "alocará" as imagens da nossa suposta galeria e definindo sua classe de estilo, agora faremos a classe dos blocos internos, que por usa vez terão as imagens, que será feito a iteração com o resultado do banco de dados. Chamaremos de imagens:

 

.imagens
{
	width: 250px;
	float: left;
}

E exemplificando uma iteração:

<?php

// Sua conexão com o banco de dados

$sql = mysql_query("SELECT * FROM galeria");

while( $rs = mysql_fetch_array($sql) )
{
	echo "<div class=\"imagens\">";

		echo "<img src=\"{$rs['path']}\" alt=\"\" />";

	echo "</div>";
}

?>

Reparem que fizemos a iteração com a <div> que contém a imagem dentro:

 

<div class="imagens"></div>

Este bloco deve ser colocado dentro da <div> global que fizemos lá em cima.

 

Pronto!

 

Explicando... a <div> global tem um tamanho fixo, ou seja, a capacidade máxima suportada dentro dele é de 500px e como os blocos internos são de 250px cada, e cada linha terá 2 blocos de 250px já que 500/250 = 2.

 

O float:left fará o alinhamento dos blocos sempre a esquerda do elemento anterior eliminando aquele "efeito" de que a uma <div> sempre tem sua largura de 100%.

 

Supondo que você fez algumas customizações no estilo dos blocos e que o resultado de sua galeria resulte em 5 fotos e você esteja exibindo as miniaturas (thumbnails):

 

 

Sendo duas colunas apenas, sendo um resultado ímpar logicamente que haverá este vazio que de certa forma deixa com um visual feio. Para isto não acontcer, basta você acrescentar o seguinte código após o bloco while:

 

$resto = mysql_num_rows($sql) % 2;

if( $resto > 0 )
{
	for( $i = 0; $i < $resto; $i++ )
	{
		echo "<div class=\"imagens\"></div>";
	}
}

Na variável $resto eu terei o módulo da quantidade encontrada na consulta por dois, ou seja, o resto da divisão dos resultados por 2, onde este dois pode ser substituido pela quantidade de colunas exibidas, pois para ser um número exato (linha completa), é preciso que este resto seja 0 (zero).

 

Com este resto eu simplesmente completo o que está faltando na linha com blocos vazios:

 

 

É isto, espero que seja útil para alguém. :)

 

[]'s http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[Anderson Mello 3]

Bacana, Paulo. Parabéns pelo artigo http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

[JackDenio 0]

Muito boa iniciativa velho, simples, objetivo e inovador seu artigo ;)

[Ghean 0]

Como adicionar uma paginação nesse script?

[Igor.Leroy 0]

Como adicionar uma paginação nesse script? [2]

 

Seria ótimo se bolassem uma paginação legal para esse script!

o/

[Rafael Bastos 0]

perfeito... irei tentar integrar na minha página.. Muito obrigado por esse artigo!

[Legist 0]

Parabéns, realmente é um ótimo tutorial...

 

Porem encontrei problemas com o IE6, a primeira imagem insiste em ficar sozinha na primeira linha jogando as demais pra próxima linha <_<

e as linhas seguintes o posicionamento fica correto...

 

alguma idéia de como resolver?

CSS:

CODE

.conteiner{

width:760px;

}

.banner{

width:180px;

float:left;

padding:5px;

}

PHP:

CODE

echo "<div class='conteiner'";

while($registro2 = mysql_fetch_row($grupo)){

echo " <div class='banner'>";

echo "<img src='http://localhost/".$registro2[3]."' alt='".$registro2[2]."'/>";

echo " </div>";

}

echo"</div>";