Alinhamento de Imagens Dinamica (Capas de Galeria)

[Rodrigo N 0]

Olá Pessoal???,

 

Tenho um site que gera dinamicamente 4 imagens na página inicial dinamicamente (São 4 imagens de capa de galeria de fotos). O código está no final.

 

O problema é que eu gostaria que a tanto a 1º imagem como a 4º imagem ficassem (coladas) com suas margens a esquerda e direita zeradas , ficando alinhadas certinhas ao layout.

 

Da forma que eu fiz abaixo a primeira imagem fica correta, porém a última que é a 4º obviamente terá espaçamento também.

 

Tem alguma técnica que eu possa fazer isso só com css? ou terei que testar isso no meu PHP, atribuindo espaçamento diferente quando a imagem for a 4º

 

 

Espero que tenham entendido. Obrigado por ajudar

 

 

 

 

ul#fotos{

list-style-type: none;

float:left;

margin: 40px 0px 0px 0px;

display: block;

}

 

ul#fotos li{

width: 217px;

height: 190px;

display: inline;

float:left;

padding-right: 40px;

 

 

}

[Lucas Perdidão 1]

A resposta mais óbvia seria usar o seletor last-child:

 

ul#fotos li:last-child{

width: 217px;

height: 190px;

display: inline;

float:left;

padding-right:0;

}

 

Porém, como alguns navegadores ainda não aceitam o :last-child como seletor, o que você pode fazer é usar o selectivizr.

Ele permite o uso dos seletores e é bem simples de implementar.

[Tatiane Dias 2]

Eu acho a ideia do Lucas Perdidão boa, a minha sugestão é até parecida com a dele.

Para não ter problemas com navegadores com o last-child eu colocaria uma classe na quarta imagem por exemplo class="last" e no css colocaria o padding-right dela 0.

 

ul#fotos li.last {

padding-right:0;

}

[Lucas Perdidão 1]

Eu geralmente faço isso Tatiane. :)

Aí, se as imagens forem geradas por php, tem que fazer um contador no foreach, tipo assim:

 

<?php
[b]$_max = 0;[/b]
foreach($_images as $_image):
?>
[b]<?php $_max ++; ?>[/b]
<li class="imagem [b]<?php if($_max == 4){ echo "last" } ?>[/b]><a href=" ... " title=" ... "><img src=" ... " /></a></li>
<?php endforeach ?>

 

Dessa forma, só é válido para o exemplo que o Rodrigo questionou. Para ficar dinâmico, teria que fazer um count() nos itens do array e usar a quantidade para verificar qual é o último elemento.

[Dian Carlos 29]

bom.. faz da seguinte maneira.. eu faço assim e dá certo, é uma forma bem simples que você poe na hora de puxar os dados..

 

em cima do while onde você lista os campos do banco de dados poe:

 

//Seta o valor para a váriavel 'contador' igual a zero
$contador = 0;

 

ai você monta o while puxando os campos do banco de dados..

 

antes de dar o echo para mostras as miniaturas poe esse código aqui

 

//Se o resultado for igual a 1 da um echo dentro da div da miniatura com a margem direita nula
if($contador == 1) {$margemdireita = ' style="margin-right: 0px"';} else {$margemdireita = '';}

 

No final do echo, antes de fechar o while, poe isso

 

//Soma o valor atual da variavel contador com + 1
$contador = $contador + 1;

 

ai dentro da div da miniatura você dá um echo com essa variavel '$margemdireita'

 

 

Eis um exemplo simples

 

$sql = 'SELECT * FROM `fotos` ORDER BY `id` DESC LIMIT 0,4';
$query = mysql_query($sql);

//define o valor da variável para 0
$contador = 1;

while($galeria = mysql_fetch_assoc($query)) {
$id = $galeria['id'];
$foto = $galeria['foto'];

//se o resultado for igual a 1 a margem esquerda fica igual a zero
if($contador == 1) {$margem = ' style="margin-left: 0px;"';} else {$margem = '';}

//se o resultado for igual a 4 a margem direita fica igual a zero
if($contador == 4) {$margem = ' style="margin-right: 0px;"';} else {$margem .= '';}
echo '

//dentra da tag poe a variável que será montada para dar espaço ao style
<div class="miniatura"'.$margem.'>
<img src="imagens/galerias/'.$foto.'" />
</div>';

//soma a variavel + 1 para o próximo resultado
$contador = $contador + 1;
}
'

 

Tenta ae..