Konumlandırma (position), Kaydırma (float) İşlemleri | HTML/CSS Dersleri

Bu yazımda konumlandırma (position) static, relative, absolute, fixed ve kaydırma (float) left – right, clear:both  kullanarak HTML/CSS öğreteceğim.

Aşağıdaki kod üzerinden gidip konumlandırma yapmaya çalışacağız.

<div style="width:300px; height:180px; background: #CC3300; border:5px solid #000000; color:#F1F1F1; font:bold 20px tahoma; text-align:center; padding: 120px 0 0 0">1. Kutu</div>

Bu kodu div etiketi ve style parametresiyle çalıştığım dersten örnek aldım. Margin etiketini kaldırıp konumlandırmasını sola ve üste dayalı yaptım.

# position parametresi sayfada bulunan nesneleri (kutu vs.) konumlandırmada kullanılır.

position:static : Durağan Konumlandırma
position:relative : Göreceli Konumlandırma
position:absolute : Mutlak Konumlandırma
position:fixed : Sabit Konumlandırma

# position:relative, göreceli konumlandırma demektir. Bu etiketi kullanırsak kendinden önce gelen kutuya nesneye göre konumlandırma yapar. Static arasındaki fark bu. Static sol üstten konumlandırma yapar. position:relative ise kendinden önce gelen eleman neyse ona göre konumlandırma yapar. Margin ile boşluk verilebilir. Margin dışında aşağıdaki kod ile boşluk verilebilir. top:50px gibi….

<div style="width:300px; height:180px; background: #3c0; border:5px solid #000000; color:#F1F1F1; font:bold 20px tahoma; text-align:center; padding: 120px 0 0 0; position:relative; top:50px">2. Kutu</div>      

Üst ve sola aynı anda boşluk verelim:

<div style="width:300px; height:180px; background: #3c0; border:5px solid #000000; color:#F1F1F1; font:bold 20px tahoma; text-align:center; padding: 120px 0 0 0; position:relative; top:50px; left:40px">2. Kutu</div>

# position:absolute: Mutlak Konumlandırma demektir. Kendinden önce gelen kutuları nesneleri dikkate almaz. Sayfanın üst ve sayfanın solunu esas alır. Diğerlerini baz almaz.

<div style="width: 300px; height: 180px; background: #3c0; border: 5px solid #000000; color: #F1F1F1; font: bold 20px tahoma; text-align: center; padding: 130px 0 0 0; position: absolute; left: 492px; top: 643px;">3. Kutu</div>

position: absolute yazıp Dreamweaver programında tasarım kısmına gelip 3. kutuyu sağa sola çekerseniz kendi kendine left ve top değeri verdiğini göreceksiniz. Hoşunuza gitmiş bir konumlandırma olabilir ama dezavantajları var. Mesela position: absolute ile oluşturduğumuz kutuyu internet tarayıcısından çalıştırırsak her tarayıcı farklı konumlandırılacaktır. Firefox sağda, Chrome solda gibi… Bu olumsuz bir durum yaratmaktadır. Amacımız düzgün sayfa oluşturmak olduğundan bu bizim sayfa tasarımımızı hoş göstermez. Çok sık kullanmamaya dikkat edelim.

# position:fixed : sabit konumlandırma demektir. Kendinden önce geleni dikkate almaz. Sol ve üste göre konumlandırma sağlar. Sabit kalır. Örneğin; bu parametreyi kullandığımız bir html sayfasını internet tarayıcısından açıp kaydırırsak kutu, nesne vs. bizimle aşağı yukarı hareket eder.

# Float, sayfada bulunan nesneleri (kutu vs.)  kaydırmak için kullanılır.

float:left sola kaydırma
float:right sağa kaydırma
clear:both kaydırmaları temizleme

Yeni bir html sayfa açalım. Aşağıdaki iki kodu kullanalım.

<div style="width: 300px; height: 180px; background: #333; border: 5px solid #000000; color: #F1F1F1; font: bold 20px tahoma; text-align: center; padding: 130px 0 0 0;">1. Kutu</div>           
<div style="width: 300px; height: 180px; background: #30c; border: 5px solid #000000; color: #F1F1F1; font: bold 20px tahoma; text-align: center; padding: 130px 0 0 0;">2. Kutu</div>

# float:left, sola kaydırma amaçlı kullanılır. İki kutuyu yan yana getirmek istiyorsak ikisine de float:left kodunu vermeliyiz.

<div style="width: 300px; height: 180px; background: #333; border: 5px solid #000000; color: #F1F1F1; font: bold 20px tahoma; text-align: center; padding: 130px 0 0 0; float:left">1. Kutu</div>
<div style="width: 300px; height: 180px; background: #30c; border: 5px solid #000000; color: #F1F1F1; font: bold 20px tahoma; text-align: center; padding: 130px 0 0 0; float:left">2. Kutu</div>

Aşağıda resimde gördüğünüz gibi iki kutumuz yan yana gelip sola yaslandı.

float:left yerine float:right kullanırsak kutular yan yana gelir ama sağa kaydırma işlemi yaparız.

Genelde kodlarımızı soldan kullandığımız için sıklıkla float:left kullanırız.

<div style="width: 300px; height: 180px; background: #30c; border: 5px solid #000000; color: #F1F1F1; font: bold 20px tahoma; text-align: center; padding: 130px 0 0 0; float:left; margin:0 0 0 20px">2. Kutu</div>

2.kutuya margin 0 0 0 20px yaparsak sol tarafa 20px vererek iki kutu arasına boşluk verebiliriz. Neden sol tarafa? Çünkü amacımız 1.kutudan onu ayırmak. İhtiyacımıza göre margin düzenlenebilir.

# clear:both, kaydırmaları temizle demektir. Diğer kutu ve nesnelerden bağımsız kaydırma olmamasını sağlamaktadır.

3.kutumuz 1 ve 2.kutunun altında olsun isterseniz aşağıdaki kod işinizi görecektir.

<div style="width: 300px; height: 180px; background: #3c0; border: 5px solid #000000; color: #F1F1F1; font: bold 20px tahoma; text-align: center; padding: 130px 0 0 0; clear:both">3. Kutu</div>

3 kutuyu da istediğimiz şekilde yaptık. Peki, şimdi bu 3 kutumuzu da ortalamak istersek ne yapacağız?
3 kutu yani 3 div etiketi kullandık. Bunların hepsini kapsayacak yeni div açıp sonunda da div ile kapatacağız.

<div style="width:640px; height:590px; margin: auto">
<div style="width: 300px; height: 180px; background: #333; border: 5px solid #000000; color: #F1F1F1; font: bold 20px tahoma; text-align: center; padding: 130px 0 0 0; float:left">1. Kutu</div>
<div style="width: 300px; height: 180px; background: #30c; border: 5px solid #000000; color: #F1F1F1; font: bold 20px tahoma; text-align: center; padding: 130px 0 0 0; float:left; margin:0 0 0 20px">2. Kutu</div>
<div style="width: 300px; height: 180px; background: #3c0; border: 5px solid #000000; color: #F1F1F1; font: bold 20px tahoma; text-align: center; padding: 130px 0 0 0; clear:both">3. Kutu</div>
</div>

Yukarıdaki yazım videolu ders anlatımından çıkardığım ve anlaşılabilir kıldığım notlarımdır. Web Odası tarafından hazırlanan Konumlandırma (position), Kaydırma (float) İşlemleri eğitim videosu aşağıda yer almaktadır. Hem bu yazımda yer alan video ders notları hem de Web Odası tarafından hazırlanan video ile bilgilerinizi daha da pekiştirebilirsiniz. İyi seyirler dilerim…