Web tasarım kursumuzun,CSS derslerinin,13.bölümünü işlemekteyiz.Herkese başarılar dilerim.
CSS Düzeni – Overflow(Taşma)
CSS overflow özeliliğini genellikle belirli bir alana sığdırmak isteyip te sığdıramadığımız veya sığmadığından dolayı tarayıcının bir kaydırma çubuğu oluşturup oluşturmamasını sağlamak amacı ile kullanırız.
İşte bu gibi durumlarda web tasarımlarımızda overflow özelliği kullanılır.
Bu dersimizde bu olayın nasıl engellenebileceğini göreceğiz ve öğrenmeye çalışacağız.
Çok basit bir kullanımı vardır. Dikkat ile izleyin.
Overflow özelliği hangi değerleri alabilir bakalım:
- Visible – Varsayılan metin üzerinde bir değişiklik yapmadan metni <div> etiketinin dışına atar
- Hidden – taşmayı kırpar ve sadece divin görünen kısınlarında metninizi gösterir,geri kalanı gizler
- Scroll – Taşmaya bir kırpma verir ancak bu sefer hidden elemanının aksine yazının geri kalanını görebilmek için div’e kaydırma çubuğu eklenir
- Auto – Kırpılma yapılır ancak bir önceki örnekteki gibi kaydırma çubuğu sadece sağ tarafa eklenir
Visible
Varsayılan olarak metin kırpılmaz ve tüm içerik div’in dışına taşar.
web-tasarim-dersleri-eforweb-yazilim
Hidden
Kırpılma yapılır ve div dışında kalan her türlü içerik gizlenir.
web-tasarim-dersleri-eforweb-yazilim
Scroll
Div’e Scroll değeri verirseniz overflow kırılır ve div içerisinde gezebilmeniz için sağda ve atta bir kaydırma çubuğu ekler.Alttaki kaydırma çubuğuna genellikle ihtiyaç yoktur ama o yinede 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.
web-tasarim-dersleri-eforweb-yazilim
Auto
Değeri auto olarak ayarlarsanız,kırpma yapar ve sadece sağ tarafa bir kaydırma çubuğu(Scrollbar) ekler.
web-tasarim-dersleri-eforweb-yazilim
Float ve Clear
Float özelliği bir öğenin yüzüp yüzmeyeceğini belirtir.Yüzmekten kastımızın ne olduğunu örnekler ile anlayacaksınız.
Float Özelliği
En basit tanım ile float özelliği resim,metin,buton gibi araçları sağa veya sola yaslamak amacı ile kullanılır.
Aşağıdaki örnekte bir resim’in sayfanın sağına yaslanması olayı gösterilmektedir:
web-tasarim-dersleri-eforweb-yazilim
Clear Özelliği
Berrak özellik kayan öğelerin sayfa içerisindeki davranışlarını kontrol etmek amacı ile kullanılır.
Bir öğenin hangi tarafında yüzen öğelerin kaymasını engelleyeceğini belirlemek amacı ile kullanılır.
web-tasarim-dersleri-eforweb-yazilim
Web tasarım kursumuzun,CSS derslerinin,13.bölümünü işlemiş bulunmaktayız. Herkese başarılar dilerim.
