Şimdi Ara

PHP 'de div kullanma sorunu.

Daha Fazla
Bu Konudaki Kullanıcılar: Daha Az
1 Misafir - 1 Masaüstü
5 sn
4
Cevap
0
Favori
449
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
0 oy
Öne Çıkar
Sayfa: 1
Giriş
Mesaj
  • Merhaba arkadaşlar,

    MySQL veritabanından aldığım resim yollarını listeliyorum, ancak her resim altına bir kaç veri daha çekeceğim bir kutu oluşturmak istiyorum. CSS 'de özelliklerini verip koda entegre ettikten sonra resimler 5 sütun halindeyken tek sütun haline geliyor.

    Kod:
    $oku = mysql_query('SELECT * FROM ilanlar'); 
    while($yaz=mysql_fetch_array($oku)){

    echo "<a href='#'><img id='konu' src=\"resimler/$yaz[resim_adi]\" height='125' width='125'></a><div id='konu_alt'></div>";

    }


    Önerilerinizi bekliyorum.



  • bastırdığın tüm divlerin id'si aynı olduğundan bunlara ayrı ayrı bir düzenleme yapamazsınız. kolay bir yöntem olarak tablo oluşturabilirsiniz. while dan önce table ile satırı tr ile açar echo ile bastırılan her resmi yan yana td ile dizebilirsiniz. resimlerin altına yazıyı yazmak için içeriği veritabanından çekecekseniz tr yi kapatır 2. bir tr açar yazıları da resmin altına gelecek şekilde td ile dizebilirsiniz.

    yani

    $oku = mysql_query('SELECT * FROM ilanlar');
    echo "<table><tr>";
    while($yaz=mysql_fetch_array($oku)){

    echo "<td><a href='#'><img id='konu' src=\"resimler/$yaz[resim_adi]\" height='125' width='125'></a></td>";

    }
    $yazioku = mysql_query('SELECT * FROM yazilar');
    echo "</tr><tr>";
    while($yaziyaz=mysql_fetch_array($yazioku)){

    echo "<td> " . $yaziyaz[icerik] . " </td>";

    }
    echo "</tr></tabel>";




  • Tablo kullanmayın mümkünse. SEO açısından sıkıntılı. CSS i görmeden birşey söylemek zor.

    Resimi ve altındaki bilgileri bir divin içinde toplarsanız daha sağlıklı olur. Css te "a" elemanının display özelliği inline dır. Genişlik ve yükseklik verebilmek için display:block eklemek gerekir.Aşağıda örnek bir css de ekledim.

    Örnek:

    <div class='resimKutu'<a href='#'><img src="resim1.jpg" height='125' width='125'></a><div id='konu_alt'>Buraya istediğiniz eklemeleri yapabilirsiniz.</div></div>
    <div class='resimKutu'<a href='#'><img src="resim2.jpg" height='125' width='125'></a><div id='konu_alt'>Buraya istediğiniz eklemeleri yapabilirsiniz.</div></div>
    <div class='resimKutu'<a href='#'><img src="resim3.jpg" height='125' width='125'></a><div id='konu_alt'>Buraya istediğiniz eklemeleri yapabilirsiniz.</div></div>

    Örnek Css:
    .resimKutu{
    width:125px;
    float:left;
    margin-right:10px;
    }

    .resimKutu a{
    display:block;
    width:125px;
    height:125px;
    }




  • Yorumlarınız için teşekkür ediyorum, çok işime yaradı.
  • 
Sayfa: 1
- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.