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?
|
|
Çok eski bir web tarayıcısı kullanıyorsunuz. Bu veya diğer siteleri görüntülemekte sorunlar yaşayabilirsiniz..
Tarayıcınızı güncellemeli veya alternatif bir tarayıcı kullanmalısınız.
Tarayıcınızı güncellemeli veya alternatif bir tarayıcı kullanmalısınız.
css absolute positioning
- Konbuyu başlatan Angelo
- Başlangıç tarihi
-
- Etiketler
- absolute css 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ı:Mesela bu ornekte alt icin pozisyon vermedin sayfanin herhangi bir yerine <p class="alt"> diye girdigimde nereye koyacak? Olay clear:both da mi?
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>