Css Overflow Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te overflow özelliğini öğreneceğiz.Overflow özelliği ile bir etiketin içeriği taşıyor ise bunu gösterebilir, gizleyebilir veya etikete scroll eklenmesini sağlayabiliriz.Bu özellik dört değer alır :

      ► visible

      ► hidden

      ► scroll

      ► auto

Şimdi bu değerleri örnek bir uygulama üzerinde inceleyelim.Bir <div> etiketi oluşturalım.Bunun yükseklik ve genişlik değerine 150px verelim.İçerisine ise sığmayacak kadar bir yazı ekleyelim.

css-dersleri-overflow-kullanimi-1

Gördüğünüz gibi içerisindeki yazı sığmadığı için <div> etiketinin dışına taşıyor.Burda aslında overflow değeri visible.Yani default olarak zaten overflow : visible; geliyor.Bu yüzden taşanları gösteriyor.

Eğer taşan kısımların görünmesini istemiyorsak overflow : hidden; özelliğini kullanmalıyız.

css-dersleri-overflow-kullanimi-2

Gördüğünüz gibi artık taşan kısımları göremiyoruz.

Eğer taşan kısımlar görünmesin ama scroll oluşsun ve bu scroll ile taşan kısımları görmek istiyorsak overflow : scroll; özelliğini kullanmalıyız.

css-dersleri-overflow-kullanimi-3

Gördüğünüz gibi scroll değeri verdiğimiz zaman x ve y ekseninde scroll’ lar oluştu.Ama bize sadece y ekseninde scroll gerekiyordu.Bu gibi durumlarda yani sadece gerekli eksende scroll oluşmasını istiyorsak overflow : auto; özelliğini kullanmalıyız.

css-dersleri-overflow-kullanimi-4

Gördüğünüz gibi sadece y ekseninde scroll oluştu.

Overflow özelliğine verdiğimiz değerler x ve y eksenleri için de uygulanır.Eğer sadece x ekseninde uygulanmasını istiyorsak overflow-x, sadece y ekseninde uygulanmasını istiyorsak overflow-yözelliklerinide kullanabiliriz.Bunlarında alacağı değerler overflow ile aynıdır.Yani şu dört değeri alabilirler :

      ► visible

      ► hidden

      ► scroll

      ► auto

Örneğin sadece x ekseninde scroll oluşturup, y eksenindekini gizleyelim.

css-dersleri-overflow-kullanimi-5

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 13 – Display Kullanımı

Sonraki : Css Dersleri 15 – Position Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +