Bu yazımızda Css’te Overflow özelliği nedir? onu öğ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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> div { width: 150px; height:150px; border: 1px solid black; } </style> <div> Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor. </div> |
Gördüğünüz gibi içerisindeki yazı sığmadığı için div etiketinin dışına taşıyor.
Burada aslında overflow değeri visible. Yani default olarak zaten overflow:visible; olarak 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> div { width: 150px; height:150px; border: 1px solid black; overflow:hidden; } </style> <div> Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor. </div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> div { width: 150px; height:150px; border: 1px solid black; overflow:scroll; } </style> <div> Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor. </div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> div { width: 150px; height:150px; border: 1px solid black; overflow:auto; } </style> <div> Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor. </div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> div { width: 150px; height:150px; border: 1px solid black; overflow-x:scroll; overflow-y:hidden; } </style> <div> Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor. </div> |
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
