Önceki bir yazımda belirttiğim gibi css’te position özelliğini kullanarak bunu çözebiliriz.
Position niteliği, kutuların konumlandırmada nasıl davranacağını belirler. Mesela position:absolute dediğimizde kutu normal akıştan çıkar ve bizim belirleyeceğimiz değerlere göre konumlanır. Biraz karışık gibi görünüyor ama örnek verelim.
Normalde 3 kutumuz olsun.Bu kutular <p> ,<h1>,<h2>… gibi elemanlar olabilir.Bildiğiniz gibi html elemanları aksi belirtilmedikçe bir kutu üretirler.
Burdaki örneğimizde 3 kutu normal akışta devam ediyorlar. Peki 3. kutu , 2. kutunun genişlemesiyle beraber genel genişliğin dışına çıkarsa ne olur?
İşte bu olur 3. kutu aşağıya kayar.Aynı sidebar’ımızın aşağı kayması gibi. Peki ne yapacaz?
Yapacağımız işlem şu;
style.css dosyamızı açacaz. Orda #sidebar yazan tanımlamayı bulacaz. Bu tanımlamada width, background, float gibi nitelikler vardır. Bunlara dokunmadan yeni bir niteklik tanımlıcaz. Niteliğimiz position niteliği. Position ile 3. kutuyu normal akıştan çıkaracaz ve 2. kutunun sağına atabilecez.
Örnek kodumuz şöyle;
#sidebar
{ position:absolute;
left:500px;
}
Dediğim gibi sidebar içindeki diğer kodları ellemeden sadece yukarıdaki kodu ekliyoruz.Bu kod ile artık sitemizdeki sidebar şu şekilde görülecektir.
umarım anlatabilmişimdir. Yararlı olması dileğiyle, kolay gelsin
Alıntıdır: Kaynak: http://ercani.com/bilisim
