Resultado em colunas

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):

/applications/core/interface/imageproxy/imageproxy.php?img=http://img113.imageshack.us/img113/4946/exemplo1ac4.jpg&key=96f6358b130e4b3bab3929ce1af267bd8a110e7713bae022d24067b78b4c2013" alt="Imagem Postada" />

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:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img113.imageshack.us/img113/3896/exemplo2nn2.jpg&key=88fe9d0aa1f6de9274aeb8f48b9636f7bcf43b5328623b670c4982260b42f5b3" alt="Imagem Postada" />

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

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

.conteiner{	width:760px;

}

.banner{

	width:180px;

	float:left;

	padding:5px;

}

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>";