Farklı boyutta ki resimleri alttan hizalayarak sıralama

Ozcan

Problem yaşadığım web sitesi www.msnsmile.com du. Resimleri üstten hizalaya biliyordum. Div in altına hizalamak için bir kaç php kodu işimi gördü ilk olarak resimlerin yüksekliğini aldırdım. getimagesize fonksiyonu ile ve resimlerin en fazla 140px yükseklikleri olduğunu hesap ederek en büyük resimde 10px boşluk kalması için üst taraftan resimleri eklediğim div in yüksekliğini 150 px olarak aldım. 150px lik yüksekliğimdende resimlerin yüksekliğini çıkararak üstten kaç px boşluk bırakırsam resimlerin alttan hizalanmasını sağlayacağımı buldum ve her resim için farklı padding değerleri kullanarak alttan hizaladım.

Kaynak : http://www.csstema.com/php/farkli-b...erek-div-in-altina-hizalama-php-destekli.html

PHP:

$size = getimagesize("smile/$row1[resim]");
$boy = $size[1];
$boy = 150-$boy;

kutu için kullandığım css kodu

Kod:

.kutu { bottom: 20px; float:left; margin: 10px 0 10px 15px; width: 165px; border:1px solid #000; background: #FFFFFF; text-align:center; }
.kutu img { border:0;}

while döngüsünde kullandığım php kodu

Kod:

echo '<div class="kutu" style="padding:'.$boy.'px 0px 10px 0px"><a href="smile/'.$resim.'"><img src="smile/'.$resim.'" border="0" alt="" /></a></div>';

resimlerin altıdanda 10px boşluk bırakıoruz.

http://www.msnsmile.com/Large-JvP-Pack-3-c42.html en belirgin olan kategori.

Siteyi forumdan bir arkadaşım yapmıştı

sanırım yagmayoq baya oluyor hatırlayamadım yeniden teşekkürler.

sempaty · 18 Eylül 2009

benim yaptığımı unutacak kadar kötü yapmışım demek

.kutu 'ya bir

Kod:

height: 150px; line-height: 140px;

.kutu img 'ye de

Kod:

vertical-align:bottom;

ekle.

sonra öğe satırlarında mesela

Kod:

<div class="kutu" style="padding:40px 0px 10px 0px"><a href="smile/msn_smile_816123_09_01.gif"><img src="smile/msn_smile_816123_09_01.gif" border="0"></a></div>
<div class="kutu" style="padding:49px 0px 10px 0px"><a href="smile/msn_smile_114823_09_01.gif"><img src="smile/msn_smile_114823_09_01.gif" border="0"></a></div>

şu gibi değiştir:

Kod:

<div class="kutu"> <a href="smile/msn_smile_816123_09_01.gif"><img src="smile/msn_smile_816123_09_01.gif" border="0"></a></div>
<div class="kutu"> <a href="smile/msn_smile_114823_09_01.gif"><img src="smile/msn_smile_114823_09_01.gif" border="0"></a></div>

burdaki değişiklik şu, <div class="kutu"> dan sonra gelecek. ve tabi sonradan eklediğin padding ler kaldırılacak

Ozcan · 18 Eylül 2009

yine sağ ol sempaty valla sitenin altında seboist diye link vermişim ya dedim herhalde yagmayok tur yapan. Ben o kodu kullanmak için baya uğraşmıştım. vertical-align:bottom;
u ama bir yerde sorun oluyordu şimdi neden sorun yaşadığımı hatırlayamadım.