Iç Içe Div Ler

maklube · 10.05.2007

Arkadaslar herkese merhaba

benim soyle bir problemim var nasıl cozebilirriz..

3 adet <div> var ve bu div ler ic ice veri tabanindan cektigim veriye gore yan yana yazdirmam lazim

1. div ana temel div
2. div alt alta yazdirilacak
3.div ise 2.divin icine yan yana yazdirmamiz gerekiyor

yani 2 dive yan yana 4 kayit yazdiracagim ve daha sonra alt alta 4 der kayitla devam edecek...

aslinda bunu tablolarla yapabiliyoruz ama amac bunu CSS kullanarak yapmak

tablo ile yapmak icin asagidaki kod ise yariyor

<?

$kitaplar = mysql_query("SELECT * FROM tablo_ismi ");

echo"<table border=\"0\" align=\"center\" width=100% cellpadding=\"1\" cellspacing=\"1\" bordercolor=\"e9e9e9\" class=konuic>
<tr>";

while($kayit = mysql_fetch_array($kitaplar))
{
?>

<td width="100%" valign="top" >
<table width=300 height=150 border=0 cellpadding="1" cellspacing="2">
<tr>
<td width="49%" height="146" valign="top"> </td>
</tr>
</table>

<?
$count++;
if ($count == 4) {
echo "</tr>
</tr>";
$count = 0;
}
}
echo "</tr></table>";
}

?>

bunu CSS ile nasil yapariz? simdiden herkese tesekkurler.

metsatöll · 10.05.2007

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/CSS">
.disLayer {
  width:170px;
  height:140px;
  background: #d92100;
  float:left;}

.icLayer {
   width:150px;
   height:120px;
   margin: 10px;
   background:#ccc}
</style>

<body>
<div class="disLayer">
   <div class="icLayer">
	ic layer
   </div>
</div>

</body>
</HTML>

Dediklerini dogru anladiysam eger, bu sekilde divleri döngüye alabilirsin.

divemaster · 10.05.2007

Merhaba maklube

Ben de yeni başladım div kullanmaya ancak aynı sorun benim de ASP de başıma geldiği için biraz denemeler sonucu bunun nasıl yapılacağını kendime göre çıkardım.

Yalnız PHP bilmediğim için kodlarının içinde gösteremeyeceğim. Yazdıklarımı kendine uyarlaman durumunda sonuç alırsın. En azından mantığını çözersin bu şekilde.

Önce kayıtlarımızın yanyana çıkması için div'mize bir id tanımlıyoruz:

Kod:

#kayitYatay {
	float:left;
	width:100px;
	border:1px solid #000;
}

Burada CSS kodlarının içinde ayrıca bir clear:both; özelliği içeren id tanımlıyoruz:

Alıntı:

#tabloTemizle { clear: both; }

Tekrar edilecek kayıt: ( kaydı CSS e göre float:left; ile yan yana yazdırıyoruz )

Kod:

<div id="kayitYatay"> GÖRÜNECEK KAYDIMIZ </div>

Belli bir sütuna ulaştığında clear:both; ile kesilip alta geçiriyoruz: ( senin </tr> ile yazdırdığın echo değeri )

Kod:

<div id="tabloTemizle"></div>

umarım yararlı olmuştur

maklube · 18.05.2007

teşekkürler arkadaşlar

özellikle divmaster arkadaşın verdiği kodlar işe yaradı

metsatöll · 18.05.2007

@divmaster'in verdigi kodlarda hep id kullanilmis.

Eger bunlari bir döngüye alacaksan, yani sayfada ayni katmani birden fazla kullanacaksan tekrar eden id'leri class'a cevir.

10.05.2007	#1 (permalink)
maklube Üyelik Tarihi: 16.11.2006 Yer: İSTANBUL Yaş: 27 Mesaj: 23	Iç Içe Div Ler Arkadaslar herkese merhaba benim soyle bir problemim var nasıl cozebilirriz.. 3 adet <div> var ve bu div ler ic ice veri tabanindan cektigim veriye gore yan yana yazdirmam lazim 1. div ana temel div 2. div alt alta yazdirilacak 3.div ise 2.divin icine yan yana yazdirmamiz gerekiyor yani 2 dive yan yana 4 kayit yazdiracagim ve daha sonra alt alta 4 der kayitla devam edecek... aslinda bunu tablolarla yapabiliyoruz ama amac bunu CSS kullanarak yapmak tablo ile yapmak icin asagidaki kod ise yariyor <? $kitaplar = mysql_query("SELECT * FROM tablo_ismi "); echo"<table border=\"0\" align=\"center\" width=100% cellpadding=\"1\" cellspacing=\"1\" bordercolor=\"e9e9e9\" class=konuic> <tr>"; while($kayit = mysql_fetch_array($kitaplar)) { ?> <td width="100%" valign="top" > <table width=300 height=150 border=0 cellpadding="1" cellspacing="2"> <tr> <td width="49%" height="146" valign="top"> </td> </tr> </table> <? $count++; if ($count == 4) { echo "</tr> </tr>"; $count = 0; } } echo "</tr></table>"; } ?> bunu CSS ile nasil yapariz? simdiden herkese tesekkurler.

18.05.2007	#4 (permalink)
maklube Üyelik Tarihi: 16.11.2006 Yer: İSTANBUL Yaş: 27 Mesaj: 23	Re: Iç Içe Div Ler teşekkürler arkadaşlar özellikle divmaster arkadaşın verdiği kodlar işe yaradı

18.05.2007	#5 (permalink)
metsatöll Üyelik Tarihi: 11.07.2001 Yer: Tallinn Yaş: 28 Mesaj: 515 Görsel: 9	Re: Iç Içe Div Ler @divmaster'in verdigi kodlarda hep id kullanilmis. Eger bunlari bir döngüye alacaksan, yani sayfada ayni katmani birden fazla kullanacaksan tekrar eden id'leri class'a cevir.