Css'de Relative ve Absolute ne işe yarar?

Css'de bir takım cisimlerin hizalanması için belli başlı kavramlar vardır. Relative ve Absolute ile bu hizalandırmalar en uygun şekilde yapılabilmektedir. Css öğrenmek isteyen bir kişi genelde iki farklı div yapısını yan yana hizalamayı öğrenmek isteyecektir.

Diyelim sitenizde yazılarınızın bulunduğu bir ana çerçeve var bu çerçevenin hemen sağına bir yan menü eklemek istiyorsunuz. float:right; kodu hiç bir işe yaramayacaktır çünkü yan menüyü sağa çekecektir tabii ki ancak ana çerçeveniz ile eşitlemeyecektir. float:right; ile yerleştirdiğiniz menü havada kalacak ve sayfanızda büyük bir görüntü kirliliği oluşturacaktır.

"Peki nasıl bir yan menüye sahip olabilirim?" Diyorsanız işte tam bu devrede relative ve absolute css kodları devreye giriyor.

 Yapmanız gereken css ayarı aşşağıda ki şekildedir:

.anacerceve{
position:relative;
}
.menu{
position:absolute;right:0
}

Bu css'ye doğru orantılı olarak olması gereken html kodu şöyle olmalıdır:

<div class="anacerceve">
<div class="menu"></div>
</div>

Oluşturduğumuz yan menü sınıfı ana çerçevenin içinde olmalıdır. Ayrıca width: 0px; koduyla ana çerçevenin ya da yan menünün kaplayacağı alanı ayarlayabiliriz.

.main {
width:700px;
}

.anacerceve{
position:relative;
width:500px;
}
.menu{
position:absolute;right:0
width:200px;
}


Bu css'ye doğru orantılı olarak olması gereken html kodu şöyle olmalıdır:

<div class="main">
<div class="anacerceve">
<div class="menu"></div>
</div>
</div>

Böylelikle toplam 700px genişliğinde bir ana şablon 500px genişliğinde içerik ve 200px genişliğinde sol yan menü oluşturduk. Eğer oluşturduğumuz 700px boyutundaki sayfayı ortalamak istiyorsanız .main sınıfının içine  margin: 0 auto; kodunu yerleştirmeniz yeterli olacaktır.

Share on Tumblr

Kategoriler: