İyinet'e Hoşgeldiniz!

Türkiye'nin En Eski Webmaster Forum'una Hemen Kayıt Olun!

Kayıt Ol!

Farklı boyutta ki resimleri alttan hizalayarak sıralama

Ozcan

0
İyinet Üyesi
Katılım
12 Mayıs 2007
Mesajlar
3,749
Reaction score
59
Konum
Antalya
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

1
İyinet Üyesi
Katılım
25 Şubat 2005
Mesajlar
3,824
Reaction score
19
Konum
hawaii. ama sanal tur.
benim yaptığımı unutacak kadar kötü yapmışım demek :p

.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

0
İyinet Üyesi
Katılım
12 Mayıs 2007
Mesajlar
3,749
Reaction score
59
Konum
Antalya
:) 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.
 

Türkiye’nin ilk webmaster forum sitesi iyinet.com'da forum üyeleri tarafından yapılan tüm paylaşımlardan; Türk Ceza Kanunu’nun 20. Maddesinin, 5651 Sayılı Kanununun 4. maddesinin 2. fıkrasına göre, paylaşım yapan üyeler sorumludur.

Backlink ve Tanıtım Yazısı için iletişime geçmek için Skype Adresimiz: .cid.1580508955483fe5

Üst