Css ile ilgili bir problemim

**hasan** · 24.06.2008 15:34

Merhaba arkadaşlar,

Bir site hazırlığı içerisindeyim. CSS ile temel yapısını oluşturuyorum. Fakat şöyle bir sorunum var.

div.kapsayici {width:960px;margin:0pt auto;}

div.tavan {width:100%;height:180px;}

div.orta {width:100%;}

div.taban {width:100%;height:53px;}

<div class="kapsayici">
<div class="tavan"></div>
<div class="orta"></div>
<div class="taban"></div>
</div>

kapsayiciya verdiğim background geçerli olmuyor. firebug ile baktığımda o div in üzerine geldiğimde gerçekten kapsamadığını farkettim. float:left yaparsam kapsamaya başlıyor. float uygularsamda sayfamı ortalayamıyorum. Bunun sebebi hikmeti ne olabilir?

**BYK** · 24.06.2008 16:50

overflow: hidden eklemeyi deneyebilirsin kapsayıcıya.

**erdinç** · 24.06.2008 21:13

Ben IE6'da kontrol ettim herhangi bir sorun göremedim. FF'ta orta div gözükmüyor. Sadece o sorun var. Onun nedeni de şu div için yükseklik değeri girmemiş olman ve divin içinin boş olması.

<div class="orta"></div>

Dolayısıyla div FF'ta hiç gözükmüyor. div'lerin içine herhangi bir içerik koyunca, örneğin birer karakter boşluk koyunca sorun olmadığını görebilirsin.

<div class="orta"> </div>

Veya "orta" isimli div'e yükseklik girerek yine sorun olmadığını görebilirsin: Burada verilen 400px yükseklik minimum 400 piksel anlamına geliyor. İçerik 400 pikseli aşınca zaten aşağı doğru esneyecek. Dolayısıyla 400px gibi ortalama bir değer yazmanın herhangi bir sakıncası yok.

.orta {width:100%;height:400px;}

CSS'de class değerini aynı stili farklı divlerde kullanacağımız zaman tercih ediyoruz. Burada ID değeri kullanmak daha iyi olur. Bir de kapsayıcının içindeki divlerin hiçbirinde genişlik yazmana gerek yok. Zaten boş bırakınca %100 anlamına geliyor. Benim önerim şu şekilde:

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>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/CSS">
<!--

#kapsayici {
	width:960px;
	background-color: #999999;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-bottom: 10px;
	padding-top: 10px;
}
#tavan {
	height:180px;
	background-color: #003399;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
#orta {
	height:400px;
	background-color: #0066FF;
	margin: 10px;
}
#taban {
	height:53px;
	background-color: #33CCFF;
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
}
-->
</style>
</head>

<body>
<div id="kapsayici">
	<div id="tavan"></div>
	<div id="orta"></div>
	<div id="taban"></div>
</div>
</body>
</HTML>

Burada kapsayıcı kolay gözüksün diye eklediğim bazı margin ve padding değerleri var. Onları kaldırabilirsin. Kapsayıcının içindeki padding değerleri ve diğer divlerdeki margin değerleri gereksiz. Dolayısıyla geriye şunlar kalıyor:

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>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/CSS">
<!--

#kapsayici {
	width:960px;
	background-color: #999999;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#tavan {
	height:180px;
	background-color: #003399;
}
#orta {
	height:400px;
	background-color: #0066FF;
}
#taban {
	height:53px;
	background-color: #33CCFF;
}
-->
</style>
</head>

<body>
<div id="kapsayici">
	<div id="tavan"></div>
	<div id="orta"></div>
	<div id="taban"></div>
</div>
</body>
</HTML>

Konu Başlığı: Css ile ilgili bir problemim

Konuyu Paylaş

Seçenekler

Css ile ilgili bir problemim

Re: Css ile ilgili bir problemim

Re: Css ile ilgili bir problemim

Bu konu başlığı için etiketler

Mesaj Seçenekleri