Bir öğenin içeriği, onu kapsayan gösteriminde bulunacak öğenin boyutu için fazla ise, bu durumda içerikte bir taşma meydana gelecektir. Bu gibi durumlarda içeriğinizi sayfanızda kontrol edebilmeniz için CSS size iki farklı yöntem sunmaktadır.
overflow
CSS overflow özelliği bir öğenin içeriği belirtilen alandaki sığmayacak kadar büyük olduğu zaman kaydırma çubukları eklemenizi sağlar. overflow özelliği yalnızca belirli bir yüksekliğe sahip blok elemanları için çalışır ve alabileceği dört farklı değer vardır;
- visible
- hidden
- scroll
- auto
Not: Apple’ın Mac OS X işletim sisteminde, kaydırma çubukları varsayılan olarak gizlidir ve yalnızca taşma durumunda kaydırma çubuklarını ekleseniz bile, kullanılırken gösterilir.
overflow : visible ;
overflow Özelliğine visible değerinin atanması varsayılanın içeriğin öğe kutusunun dışına taşmasına izin verildiğini ifade eder.
Örnek;
Aşağıdaki örnekte bir içerik taşması durumunu görebilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <style> div { background-color: darkseagreen; width: 200px; height: 50px; border: 1px dotted black; overflow: visible; } </style> </head> <body> <h2>CSS Overflow Nedir</h2> <div>Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir. Eğer bir Lorem Ipsum pasajı kullanacaksanız, metin aralarına utandırıcı sözcükler gizlenmediğinden emin olmanız gerekir.</div> </body> </html> |
overflow : hidden;
hidden Değeri taşma durumunda kırpılmaya izin verir. Sığmayan içerik kısmı görüntülenmez.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <style> div { background-color: darkseagreen; width: 200px; height: 50px; border: 1px dotted black; overflow: hidden; } </style> </head> <body> <h2>CSS Overflow Nedir</h2> <div>Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir. Eğer bir Lorem Ipsum pasajı kullanacaksanız, metin aralarına utandırıcı sözcükler gizlenmediğinden emin olmanız gerekir.</div> </body> </html> |
overflow : scroll;
scroll Değeri verildiğinde içerikte taşan kısım kırpılır ve kutunun içinde ilerlemek için bir kaydırma çubuğu eklenir. Bunun, yatay ve dikey olarak bir kaydırma çubuğu ekleyeceğini unutmayın (buna ihtiyacınız olmasa bile)
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <style> div { background-color: darkseagreen; width: 200px; height: 150px; border: 1px dotted black; overflow: scroll; } </style> </head> <body> <h2>CSS Overflow Nedir</h2> <div>Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir. Eğer bir Lorem Ipsum pasajı kullanacaksanız, metin aralarına utandırıcı sözcükler gizlenmediğinden emin olmanız gerekir.</div> </body> </html> |
overflow : auto;
auto Değeri sadece içeriğin taşması halinde kaydırma çubukları ekler.
Örnek;
Aşağıdaki örneği <div> öğesinin farklı yükseklikleri için test ediniz. Böylece kaydırma çubuklarının otomatik olarak oluşturulduğunu fark edeceksiniz..
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <style> div { background-color: darkseagreen; width: 200px; height: 200px; border: 1px dotted black; overflow: auto; } </style> </head> <body> <h2>CSS Overflow Nedir</h2> <div>Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir. Eğer bir Lorem Ipsum pasajı kullanacaksanız, metin aralarına utandırıcı sözcükler gizlenmediğinden emin olmanız gerekir.</div> </body> </html> |
overflow-x ve overflow-y Özellikleri
overflow-x ve overflow-y Özellikleri taşma durum kontrolünü yatay veya dikey olarak (veya her ikisinde de) değiştirip değiştirmeyeceğini belirtmenizi sağlar.
- overflow-x : içeriğin sol ve sağ kenarlarıyla olan taşma kontrolünü sağlar.
- overflow-y : içeriğin üst ve alt kenarlarıyla olan taşma kontrolünü sağlar.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <style> div { background-color: darkseagreen; width: 200px; height: 100px; border: 1px dotted black; overflow-x: hidden; overflow-y: scroll; } </style> </head> <body> <h2>CSS Overflow Nedir</h2> <div>Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir. Eğer bir Lorem Ipsum pasajı kullanacaksanız, metin aralarına utandırıcı sözcükler gizlenmediğinden emin olmanız gerekir.</div> </body> </html> |
Harika dersler. Hazırlayanların elleri dert görmesin.
[…] […]