Listar imagem uma ao lado da outra.

[flashdeveloper123 0]

Pessoal. Sei que é coisa de principiante amador. Mas não estou conseguindo fazer uma alteraçao em um site que mostra imagem em destaque. Aparece a imagem grande e depois 4 pequenas. Eu quero que apareça 8 (Ou 12). Até aí tudo bem, apenas mudo isso:

 

WHERE i.ativo='1' AND i.destaque='1' ORDER BY RAND() LIMIT 4")

 

No lugar do 4 coloco qualquer número e será a quantia de imagens (8 ou 12). O problema é que aparece somente uma em baixo da outra... E eu preciso que apareçam 8 sendo 2 colunas com 4 (ou 3 colunas com 4). Quero colocar apenas a imagem (sem que apareça o texto). Fiz um JPG pra vcs entenderem do que estou falando:

 

www.legute.com.br/ajuda/ajuda.html

 

O código está logo abaixo. Se puder ajudar agradeço muito. Desculpe o incomodo.

 

<?php
$sql = mysql_query("SELECT i.id, i.foto_exibicao, i.foto_grande, i.foto_titulo, i.foto_descricao, i.valor, t.tipo_nome, c.cidade,
b.bairro
FROM imoveis i
LEFT JOIN imoveis_tipo t ON (t.id = i.id_tipo_imovel)
LEFT JOIN cidades c ON (c.id = i.id_cidade)
LEFT JOIN bairros b ON (b.id = i.bairro)
WHERE i.ativo='1' AND i.destaque='1' ORDER BY RAND() LIMIT 4") or print(mysql_error());
if( mysql_num_rows( $sql ) > 0 ){

/* monta os dados buscados acima */
$i = 0;
$dados = array();
while( $linha = mysql_fetch_array( $sql ) ) {
if( !empty( $linha['foto_exibicao'] ) ) {
$dados[$i]['id'] = $linha['id'];
$dados[$i]['foto_exibicao'] = $linha['foto_exibicao'];
$dados[$i]['foto_grande'] = $linha['foto_grande'];
$dados[$i]['foto_titulo'] = $linha['foto_titulo'];
$dados[$i]['foto_descricao']= $linha['foto_descricao'];
$i++;
}
}

?>

<link href="css/slide.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

<h1 style="border:0;">Destaque</h1>
<!-- lista miniaturas slide -->
<div id="featured" >
<ul class="ui-tabs-nav">
<?php foreach( $dados as $i => $linha ){ ?>
<li class="ui-tabs-nav-item<?php echo ($i == 1 ? ' ui-tabs-selected' : ''); ?>" id="nav-fragment-<?php echo $i;?>"><a href="#fragment-<?php echo $i;?>"><img src="img_imoveis/<?php echo $linha['foto_exibicao']; ?>" alt="<?php echo $linha['foto_titulo']; ?>" width="80" height="50" /><span><?php echo $linha['foto_titulo']; ?></span></a></li>
<?php 
$i++; 
} 
?>
</ul>

<!-- Lista conteúdo slide -->
<?php foreach( $dados as $i => $li ){ ?>
<div id="fragment-<?php echo $i;?>" class="ui-tabs-panel">
<a href="detalhes_imovel.php?Cod=<?php echo $li['id']; ?>" >
<img src="img_imoveis/<?php echo $li['foto_grande']; ?>" alt="<?php echo $li['foto_titulo']; ?>" width="400" height="250" /></a>
<div class="info" >
<h2><a href="detalhes_imovel.php?Cod=<?php echo $li['id']; ?>" ><?php echo $li['foto_titulo']; ?></a></h2>
<p><a href="detalhes_imovel.php?Cod=<?php echo $li['id']; ?>" ><?php echo $li['foto_descricao']; ?></a></p>
</div>
</div>
<?php $i++; } ?>

</div>
<?php } ?>

[Dusigner 0]

Poste o LINK!

 

parece ser fácil, com um float: left; no css você consegue fazer isso!

[Dian Carlos 29]

Na imagem miniatura adicione uma classe qualquer, por exemplo, "miniatura".

 

<img class="miniatura" src="img_imoveis/<?php echo $linha['foto_exibicao']; ?>" alt="<?php echo $linha['foto_titulo']; ?>" width="80" height="50" />

 

Após isso adicione o seguinte código na sua folha de estilo.

 

.miniatura {
float: left; /*Vai deixar uma foto ao lado da outra*/
margin: 0px 10px 10px 0px; /*Espaçamento entre uma imagem e outra*/
}