CSS Düzeni – Overflow (Taşma)

Web tasarım kursumuzun CSS derslerine taşma ve yaslama özellikleriyle devam ediyoruz. Herkese başarılar dilerim.

Overflow (Taşma) Özelliği

CSS overflow özelliğini, içerik belirli bir alana sığmadığında ne olacağını belirlemek için kullanırız: Taşan kısım gösterilsin mi, gizlensin mi, yoksa tarayıcı bir kaydırma çubuğu mu eklesin?

Örneğin bunun gibi bir div’iniz var ve yalnızca bu div içerisinde gösterilmesini istediğiniz bir metniniz var.
İşte bu gibi durumlarda web tasarımlarımızda overflow özelliği kullanılır.
Bu dersimizde taşmanın nasıl kontrol edilebileceğini göreceğiz ve öğrenmeye çalışacağız.
Çok basit bir kullanımı vardır. Dikkatle izleyin.

Overflow özelliğinin alabileceği değerlere bakalım:

visible – Varsayılan değerdir; taşma kırpılmaz ve içerik <div> öğesinin dışına taşar
hidden – Taşmayı kırpar, metni yalnızca div’in görünen kısmında gösterir ve geri kalanını gizler
scroll – Taşmayı kırpar ancak hidden değerinin aksine yazının geri kalanını görebilmek için div’e kaydırma çubukları eklenir
auto – Kaydırma çubuklarını yalnızca içerik sığmadığında ve yalnızca gereken yöne ekler

visible

Varsayılan olarak metin kırpılmaz ve kutuya sığmayan içerik div’in dışına taşar.

div {
    width: 200px;
    height: 50px;
    background-color: #eee;
    overflow: visible;
}

hidden

Kırpma yapılır ve div dışında kalan her türlü içerik gizlenir.

div {
    overflow: hidden;
}

scroll

Div’e scroll değeri verirseniz taşan kısım kırpılır ve div içerisinde gezebilmeniz için sağa ve alta birer kaydırma çubuğu eklenir. Alttaki kaydırma çubuğuna çoğu zaman ihtiyaç yoktur ama tarayıcı onu yine de ekler.

Düzenin daha iyi kontrol edilmesini istiyorsanız, taşma özelliğini kullanabilirsiniz. Taşma özelliği, içerik öğenin kutusundan taşması durumunda ne olacağını belirtir.
Düzenin daha iyi kontrol edilmesini istiyorsanız, taşma özelliğini kullanabilirsiniz. Taşma özelliği, içerik öğenin kutusundan taşması durumunda ne olacağını belirtir.

div {
    overflow: scroll;
}

auto

Değeri auto olarak ayarlarsanız taşan kısım kırpılır ve kaydırma çubuğu yalnızca gerektiğinde eklenir; genellikle bu yalnızca sağ taraftaki dikey kaydırma çubuğudur.

div {
    overflow: auto;
}

Float ve Clear

float özelliği bir öğenin sağa ya da sola yaslanarak “yüzüp yüzmeyeceğini” belirtir. Yüzmekten kastımızın ne olduğunu örneklerle anlayacaksınız.

Float Left

Float Right

Float Özelliği

En basit tanımıyla float özelliği resim, metin, buton gibi öğeleri sağa veya sola yaslamak ve çevresindeki metnin onun etrafından akmasını sağlamak amacıyla kullanılır.

Aşağıdaki örnekte bir resmin sayfanın sağına yaslanması gösterilmektedir:

img {
    float: right;
    margin: 0 0 10px 10px;
}

Clear Özelliği

clear özelliği, yüzen (float verilmiş) öğelerin ardından gelen öğelerin davranışını kontrol etmek amacıyla kullanılır.

Bir öğenin hangi tarafında yüzen öğelerin bulunmasına izin verilmeyeceğini belirler; öğe, o taraftaki yüzen öğelerin altına iner.

div {
    clear: left;
}

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