div içine div koyunca

oky · 26.12.2006

ya şöyle bir sorunum var;

bir tane ana div düşünün genişliği 900 olsun. bunun içine genişliği 700 ve 200 olan iki tane daha div yerleştirin. sonra 700 olanın içine altlı ve üstlü olmak üzere iki tane daha ve altakinin içine sağlı ve sollu olmak üzere iki tane daha. bir ana div içine bu kadar div yerleştirince ana div özelliğini yitiriyor.

yani ana div'in hepsini kaplaması gerekmiyor mu?

mesela ana div'e 5 px border özelliği atadım diyelim, tepede 10 px'lik bir şerit oluyor. sanki ana div yüksekliği 0 px miş gibi. bunun sebebi ne olabilir, ana div'e neden bu kadar div'i kaplattıramıyorum?

metsatöll · 26.12.2006

@oky
CSS kodlarini gönderebilirmisin?

oky · 26.12.2006

Kod:

#anablok
{
	margin: 60px auto 0;
	padding: 0;
	width: 900px;
}
#solblok
{
	float: left;
	margin: 0;
	padding: 0;
	width: 700px;
}
#sagblok
{
	float: right;
	margin: 0;
	padding: 0;
	width: 200px;
}
#ustblok
{
	margin: 0;
	padding: 0;
	width: 700px;
}
#altblok
{
	margin: 0;
	padding: 0;
	width: 700px;
}
#solkonu
{
	float: left;
	margin: 0;
	padding: 0;
	width: 200px;
}
#sagblog
{
	float: right;
	margin: 0;
	padding: 0;
	width: 500px;
}

anablok > solblok ve sagblok

solblok > ustblok ve altblok

altblok > solkonu ve sagblog

tabi sagblog'un içinde de bazı class'lar var

cgencer · 26.12.2006

div, içine konan objelerin boyunu alır. haliyle içi boş olan div (ve içindeki div'ler de boşsa) boyutsuz olur.
ayrıca iç div'lerde float kullanıyorsan, onu normal div yapısından koparmış oluyorsun, haliyle üst div boyunu hesaplarken o float'lu elemanlar kaale alınmıyor olabilir. yatay sıralanan div'leri < div style="clear:both;" > gibi bir komutla tekrar hesaba katılmasını da sağlayabilirsin. bu konuda biraz daha detaylı bir makale yazmıştım. ama tabii bunlar varsayımlar, CSS'ini görmeden ben de daha fazla bilgi veremem.

cgencer · 26.12.2006

CSS'ini görünce direk clearfix metodu diyebilirim. yazdığım yazıya bir göz at, ama kısaca...

yan yana dizdiğin div'lerin float özelliğini aralarına koyacağın bir
< div style="clear:both;" > < /div>
satırıyla kapatıp sonraki div blokunu gerçek anlamda alt satırdan başlamasını VE dış div'in tüm bu div'leri kapsamasını sağlayabilirsin.

metsatöll · 26.12.2006

@cgencer aciklamis, sorun float kullanimindan kaynakliyor. Daha önce @lautremont bu problemin browserdan kaynaklandigini söylemisti. Clearfix kullanimi ile sorun halledilebilir.

CSS kodlarina clearfix diye bir class ekledim, bu classida float kullanimini bitirdigin yere yazinca problem kalmadi.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>deneme sayfam</title>
<style>
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
/* IE-Mac'ten gizle */
* HTML .clearfix {height: 1%;}
/* IE-Mac icin gizlemeyi bitir */

#anablok
{
	margin: 60px auto 0;
	padding: 0;
	width: 902px;
	border: 1px solid #000;
  }
}
#solblok
{
	float: left;
	margin: 0;
	padding: 0;
	width: 700px;
}
#sagblok
{
	float: right;
	margin: 0;
	padding: 0;
	width: 200px;
}
#ustblok
{
	margin: 0;
	padding: 0;
	width: 700px;
}
#altblok
{
	margin: 0;
	padding: 0;
	width: 700px;
}
#solkonu
{
	float: left;
	margin: 0;
	padding: 0;
	width: 200px;
}
#sagblog
{
	float: right;
	margin: 0;
	padding: 0;
	width: 500px;
}
</style>

</head>
<body>

<div id="anablok">
  <div id="solblok">
     <div id="ustblok">Ust blok</div>
     <div id="altblok">
       <div id="solkonu">Alt Blok > sol konu</div>
       <div id="sagblog">Alt Blok > sag blog</div>
     </div>
  </div>
  <div id="sagblok">sag blok</div>
  <div class="clearfix"></div>
</div>

metsatöll · 26.12.2006

@cgencer,
yazinda link verdigini farkedememisim. Bu yüzden benim mesajim senin mesajinin kopyasi olmus

oky · 26.12.2006

insanların çıkar gözetmeksizin birbirlerine yardım etmeleri ne harika bir şey

cgencer, clearfix metodunu sayende tam olarak anladım, makaleni de okuyacağım, çok teşekkürler..
metsatöll, vaktini harcayıp kodlara uyarladığın için çok teşekkür ederim, çok sağol..

ikinize de tekrar teşekkürler, sorun halloldu

26.12.2006	#1 (permalink)
oky Üyelik Tarihi: 30.12.2000 Yer: İstanbul Yaş: 23 Mesaj: 2,775 Görsel: 12	div içine div koyunca ya şöyle bir sorunum var; bir tane ana div düşünün genişliği 900 olsun. bunun içine genişliği 700 ve 200 olan iki tane daha div yerleştirin. sonra 700 olanın içine altlı ve üstlü olmak üzere iki tane daha ve altakinin içine sağlı ve sollu olmak üzere iki tane daha. bir ana div içine bu kadar div yerleştirince ana div özelliğini yitiriyor. yani ana div'in hepsini kaplaması gerekmiyor mu? mesela ana div'e 5 px border özelliği atadım diyelim, tepede 10 px'lik bir şerit oluyor. sanki ana div yüksekliği 0 px miş gibi. bunun sebebi ne olabilir, ana div'e neden bu kadar div'i kaplattıramıyorum? __________________ . blogger \| deviant \| lastfm \| twitter \| myspace

26.12.2006	#2 (permalink)
metsatöll Üyelik Tarihi: 11.07.2001 Yer: Tallinn Yaş: 28 Mesaj: 519 Görsel: 9	Re: div içine div koyunca @oky CSS kodlarini gönderebilirmisin? __________________ Gabfire - Talkntravel

26.12.2006	#4 (permalink)
cgencer Üyelik Tarihi: 02.08.2001 Yer: istanbul Yaş: 38 Mesaj: 1,542	Re: div içine div koyunca div, içine konan objelerin boyunu alır. haliyle içi boş olan div (ve içindeki div'ler de boşsa) boyutsuz olur. ayrıca iç div'lerde float kullanıyorsan, onu normal div yapısından koparmış oluyorsun, haliyle üst div boyunu hesaplarken o float'lu elemanlar kaale alınmıyor olabilir. yatay sıralanan div'leri < div style="clear:both;" > gibi bir komutla tekrar hesaba katılmasını da sağlayabilirsin. bu konuda biraz daha detaylı bir makale yazmıştım. ama tabii bunlar varsayımlar, CSS'ini görmeden ben de daha fazla bilgi veremem. __________________ obsesif v2 + daha iyi net + uçuca + facebook + linkedin

26.12.2006	#5 (permalink)
cgencer Üyelik Tarihi: 02.08.2001 Yer: istanbul Yaş: 38 Mesaj: 1,542	Re: div içine div koyunca CSS'ini görünce direk clearfix metodu diyebilirim. yazdığım yazıya bir göz at, ama kısaca... yan yana dizdiğin div'lerin float özelliğini aralarına koyacağın bir < div style="clear:both;" > < /div> satırıyla kapatıp sonraki div blokunu gerçek anlamda alt satırdan başlamasını VE dış div'in tüm bu div'leri kapsamasını sağlayabilirsin. __________________ obsesif v2 + daha iyi net + uçuca + facebook + linkedin

26.12.2006	#7 (permalink)
metsatöll Üyelik Tarihi: 11.07.2001 Yer: Tallinn Yaş: 28 Mesaj: 519 Görsel: 9	Re: div içine div koyunca @cgencer, yazinda link verdigini farkedememisim. Bu yüzden benim mesajim senin mesajinin kopyasi olmus __________________ Gabfire - Talkntravel

26.12.2006	#8 (permalink)
oky Üyelik Tarihi: 30.12.2000 Yer: İstanbul Yaş: 23 Mesaj: 2,775 Görsel: 12	Re: div içine div koyunca insanların çıkar gözetmeksizin birbirlerine yardım etmeleri ne harika bir şey cgencer, clearfix metodunu sayende tam olarak anladım, makaleni de okuyacağım, çok teşekkürler.. metsatöll, vaktini harcayıp kodlara uyarladığın için çok teşekkür ederim, çok sağol.. ikinize de tekrar teşekkürler, sorun halloldu __________________ . blogger \| deviant \| lastfm \| twitter \| myspace

Sponsorlu Bağlantılar
Zoque.Forum Reklam