Ana Sayfa / Web Tasarım / Konumlandırma (position), Kaydırma (float) İşlemleri | HTML/CSS Dersleri

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

HTML - CSS - Konumlandırma position - Float Kaydırma

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.

Önemli: Position parametresini kullanmasak bile varsayılan olarak kutu, nesneler vs. position:static olarak konumlanmaktadır.

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

Önemli: position parametresi kullanmazsak margin parametresini de kaldırırsak kutu – nesne sol üstü esas alarak konumlandırmayı otomatik yapar. Alt alta 2 kutu oluşturursak 1. kutuda position:static yazarsak, 2. kutuya position:static yazmazsak ve margin verirsek 2.kutu kendini 1.kutuya göre konumlandırır. Neden? Çünkü 1.kutuda position:static belirledik.

# 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

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.

*Önemli: Yeni kutu oluşturursak ve float:left-right kullanmazsak kendini otomatik ayarlamaz. Ve çok kötü görüntüye sahip olur.

# 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>

clear both

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.

*Önemli: Yükseklik ve genişlik ayarlarını 3 kutuyu ve border-kenarlıkları hesaplayarak yazmayı unutmuyoruz! Margin ile de sayfaya ortalama işlemi yapıyoruz.

<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>

html - css- sayfa ortalama

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…

Mutlaka Okumalısın

HTML - HTML Giriş - Başlangıç Etiketleri

HTML’ye Giriş ve Başlangıç HTML Etiketleri | HTML Dersleri 1

HTML sayfamızdaki ilk etiket ya da başka bir deyişle tag < html >‘dir. Bu etiket …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir