CSS Düzeni – Width ve Max-width (Genişlik ve Maksimum Genişlik)

Web tasarım kursumuzun CSS derslerine sayfa düzeniyle devam ediyoruz. Herkese başarılar dilerim.

Width, max-width ve margin: auto; Kullanımı

Daha önceki derslerimizde de işlediğimiz gibi blok seviyesindeki bir öğe her zaman mevcut genişliğin tamamını alır ve kendisini olabildiğince sağa ve sola yayar.

Öğenin tüm genişliği almaması için ona width özelliği verilir; kenar boşlukları da margin: auto; olarak ayarlanırsa öğe ortalanır.

Not: Bu durumda tarayıcı penceresi öğeden daha darsa tarayıcı sayfaya yatay bir kaydırma çubuğu ekler. Bunun yerine max-width kullanmak, küçük ekranlarda daha iyi sonuç verir.

İki örnek arasındaki farkı anlayabilmek için tarayıcı pencerenizi 500px’ten daha dar olacak kadar küçültün ve farkı görün.

İşte bunu yapan kodlar:

div.ex1 {
    width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}

div.ex2 {
    max-width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}

CSS Düzeni – Position (Konum) Özelliği

position özelliğini seçili öğenin konumlandırma yöntemini belirlemek amacıyla kullanırız.

Dört farklı konum değeri vardır:

• static
• relative
• fixed
• absolute

HTML öğeleri top, bottom, left ve right özellikleri kullanılarak konumlandırılır. Ancak önce position özelliği verilmemişse bu özellikler çalışmaz.

position: static;

HTML öğeleri varsayılan olarak static konumdadır.

Static konumdaki öğeler top, bottom, left ve right özelliklerinden etkilenmez.

Konumu static olan bir öğe özel bir şekilde konumlandırılmaz; sayfanın normal akışına göre yerini alır.

div.static {
    position: static;
    border: 3px solid #73AD21;
}

position: relative;

Bu özelliği almış bir öğe, normal konumuna göre yerleştirilir.

top, bottom, left ve right değerleri öğeyi normal konumundan kaydırır; diğer öğeler ise onun bıraktığı boşluğu doldurmaz.

Bu örneğin CSS kodları şu şekildedir:

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}

position: fixed;

Bu özelliği kullanarak yerinin her koşulda sabit kalmasını istediğimiz öğeleri tarayıcı penceresine göre sabitleyebiliriz.

Yani sayfa aşağıya kaydırılsa bile position: fixed; tanımlı bir öğe yerinden kıpırdamaz, hep aynı yerde kalır.

Bu özellik genellikle sabit menülerin yapımında kullanılır.

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

position: absolute;

position: absolute; tanımlı bir öğe, konumlandırılmış en yakın üst öğesine göre yerleştirilir. Konumlandırılmış bir üst öğesi yoksa sayfa gövdesine göre yerleşir ve sayfa kaydırıldığında onunla birlikte hareket eder.

Not: Konumlandırılmış öğe, position değeri static dışında olan her HTML öğesidir.

İşte daha rahat anlayabilmeniz için bir örnek:

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
}

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

Web tasarım kursumuzun CSS derslerinin bu bölümünü de işlemiş bulunuyoruz. Herkese başarılar dilerim.