CSS'de absolute positioning ile sayfayi bolgelere ayiriyorum. Sag sol ve alt olmak uzere. Sol menu ve statik icerik. Sag ise dinamik yerlesiyor, yani her sayfa icin farkli uzunluk olabilir. Dolayisiyla sag taraf bir sayfada cok uzarsa, alt tarafin alanina mudahale etmeye basliyabilir, bunu ayarlamanin bir yolu yok mu, sanirim sag uzadikca altta asagi uzamaya devam etmez, absolute position olduguna gore, yani denemedik ama mantiken oyle. Bu durumda ne kullanilabilir?
css absolute positioning
Birincisi sağ tarafa belirli bir yükseklik verip overflow:scroll; dersen bu yüksekliği geçerse kaydırma çubuğu çıkar.Veya sadece statik olan sağ tarafı absolute yaparsın, bu durumda sağ kısım uzadıkça altta ona bağlı olarak kayar.
veya daha kolayı float kullanabilirsin, örnek vermek gerekirse:
veya daha kolayı float kullanabilirsin, örnek vermek gerekirse:
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<style type="text/css">
body{
margin:0;
padding:0;
}
#sol{
width:200px;
background-color:#f00;
display:block;
float:left;
}
#sag{
float:left;
width:600px;
background-color:#0f0;
display:block;
}
#alt{
clear:both;
background-color:#00f;
display:block;
}
</style>
</head>
<body>
<div id="sol">sol</div>
<div id="sag">
Sağ Sağ Sağ Sağ Sağ Sağ Sağ Sağ <br />
Sağ Sağ Sağ Sağ Sağ Sağ Sağ Sağ <br />
Sağ Sağ Sağ Sağ Sağ Sağ Sağ Sağ <br />
Sağ Sağ Sağ Sağ Sağ Sağ Sağ Sağ <br />
Sağ Sağ Sağ Sağ Sağ Sağ Sağ Sağ <br />
Sağ Sağ Sağ Sağ Sağ Sağ Sağ Sağ <br />
Sağ Sağ Sağ Sağ Sağ Sağ Sağ Sağ <br />
Sağ Sağ Sağ Sağ Sağ Sağ Sağ Sağ <br />
Sağ Sağ Sağ Sağ Sağ Sağ Sağ Sağ <br />
</div>
<div id="alt">Alt</div>
</body>
</html>
Angelo' Alıntı:
alt için pozisyon vermedik, çünkü diğer divler float ile yapıldığı için, clear:both denince tıpkı yeni bir satırdan başlıyormuş gibi hemen üstteki divin altına yerleşir.
Normalde div elemanı herhangi bir genişlik versen de yan yana durmaz, yani ikinci div birincinin altına yerleşir. Ancak float kullandığın zaman verdiğin değere göre sola veya sağa yan yana yaslanır.
Ayrıca burada <p class="alt"> yazarsan hiç bir şey olmaz çünkü alt diye bir class yok. Biz id olarak tanımladık. Yani senin yapacağın
<div id="alt">
<p>yazı yazı yazı</p>
</div>
gibi kullanacaksın.Tabii istersen id olarak değil class olarak da tanımlarsın, ben sadece mantığını anlaman için örnek olsun diye yapmıştım.
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-9">
<title>Untitled Document</title>
<style type="text/css">
<!--
#ust {
background-color: #003366;
margin: auto;
height: 90px;
width: 760px;
display:block;
}
#orta {
background-color: #99CC00;
margin: auto;
width: 760px;
display:block;
}
#alt {
background-color: #990000;
margin: auto;
height: 25px;
width: 760px;
display:block;
}
#orta #sol {
background-color: #0099FF;
float: left;
width: 600px;
display:block;
}
#orta #sag {
background-color: #FF0099;
float: right;
width: 155px;
display:block;
}
-->
</style>
</head>
<body>
<div id="ust">
UST UST UST UST
</div>
<div id="orta">
<div id="sol">
SOL SOL SOL SOL
</div>
<div id="sag">
SAG SAG SAG SAG
</div>
</div>
<div id="alt">
ALT ALT ALT ALT
</div>
</body>
</html>