CSS – Kutu Modeli – Görünüm Efekti Özellikleri

Bu aralar CSS kitabına(e-kitap) ağırlık verdim. Kitaptaki eksik bölümleri tamamlıyorum. İnşallah en yakın zamanda bitecek. Bu konuda onlardan biri.
Kutu elementlerin görünümüne çeşitli etkiler yapan özellikleri göreceğiz bu makalede çoğu CSS2 ile birlikte gelen bu özellikler aşağıda sıralanmıştır.

• overflow – taşma
• clip – kırpma
• visibility – görünürlük

Overflow

Yapısı: overflow: <deger>
Aldığı Değerler: visible | hidden | scroll | auto | inherit
Başlnagıç değeri: visible
Uygulanabilen elementler: blok-level elementler ve replacement elementlere
Kalıtsallık: Yok

Türkçeye taşmak(overflow) olarak çevirdiğimiz bu özellik sınırlarını belirlediğimiz kutu elementinin içeriğinin sınırları aşması durumunda nasıl davranacağını bildiren bir özelliktir. Özelliğe atanan değerleri tek tek incelersek.

• inherit – kalıtsallık üst elementin değerini alabilir
• visible – kutu sınırları dışına taşan alanları göster
• hidden – kutu sınırları dışına taşan alanları gizle.
• scroll – kutu sınırlarını taşan kısmı kaydırma çubuğu ile ulaşmamızı sağlar.
• auto – kutu sınırlarını aşması durumunda scroll ile aynı etkiyi yapar.

overflow:visible Overflow’ın başlangıç değeri visible’dır. Bu değer taşma olan kısımların gösterilmesini sağlar.

1. div#solMenu {
2. position: absolute;
3. top: 0;
4. left: 0;
5. width: 200px;
6. height: 120px;
7. background: #BBB;
8. overflow: visible;
9. }

Kodun yeni nesil tarayıcılardaki görünümü

overflow özelliğinin değeri visible olduğu için içerik taşmasına rağmen taşan bölümler gösterilmiştir.

overflow:scroll Eğer içeriğin taşmasını engellemek istiyorsak ama yinede taşan kısımlara ulaşılması için kaydırma çubuğu çıkması için scroll özelliği ekleriz.

1. div#solMenu {
2. position: absolute;
3. top: 0;
4. left: 0;
5. width: 200px;
6. height: 120px;
7. background: #BBB;
8. overflow: scroll;
9. }

overflow:scrool olma durumu

overflow:hidden Eğer overflow:hidden değeri atarsak. Sınırladığımız kutunun dışına taşan kısımlar gösterilmeyecektir.

1. div#solMenu {
2. position: absolute;
3. top: 0;
4. left: 0;
5. width: 200px;
6. height: 120px;
7. background: #BBB;
8. overflow: hidden;
9. }

kodu bu şekilde değiştirdiğimizde görüntü aşağıdaki gibi olacaktır.

overflow:auto Son olarakta otomatik değeri vardır. Bu değeri atayınca kutu içeriğine göre otomatik işlem yapacaktır. Eğer taşma olmuyorsa kaydırma çubuğu çıkmayacaktır. Ama eğer içerik taşıyorsa kaydırma çubuğu çıkacaktır.

1. div#solMenu {
2. position: absolute;
3. top: 0;
4. left: 0;
5. width: 200px;
6. height: 120px;
7. background: #BBB;
8. overflow: hidden;
9. }

Dikkat ederseniz scroll’dan farklı olarak sadece dikey kaydırma çubuğu çıkmıştır. Yatayda bir taşma olmadığı için yatay kaydırma çubuğu çıkmamıştır.

Örneği görüntülemek için tıklayınız.

Safari’nin eski sürümlerinde sorun çıkarıyor Javascript ile bir çözüm var. http://blog.deconcept.com/2005/03/25/safari-and-links-to-elements-in-overflow-auto-content

Operadaki sorun için ise sadece min-height ve min-width özelliklerini kullanmak yeterli. http://nontroppo.org/test/Op7/overflowbug.html

Bunların dışında Internet Explorer’ün tescillediği ve CSS3 standartlarında yer alan iki adet özellik daha vardır. overflow-x ve overflow-y

overflow-x ve overflow-y: Internet Explorer5x ve üzeri sürümlerden itibaren desteklediği bu özellikler aslında overflow gibi çalışır. Buradaki x ve y’dende anlaşıldığı gibi overflow özelliğini yatay ve dikey olarak ikiye ayıran özelliklerdir. overflow-x özelliği yatayda taşma olması durumunda taşan kısımlara uygulanacak özellikleri(visible, scroll, hidden ve auto) atmamızı sağlar. overflow-y’de dikeyde aynı şeyi yapar. Firefox’unda 1.1 versiyonundan itibaren bu özellikleri desteklemesi kullanılabilirliğini arttırmıştır. Tabi biraz daha beklemekte yarar var.

Örnekler için tıklayınız. (brunildo.org’dan)

clip

Yapısı : clip: rect(<üst>,<sağ>,<alt>,<sol>)
Aldığı Değerler : rect(top, right, bottom, left) | auto | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: mutlak konumlandır uygulanmış elementler (CSS2′den itibaren blok-level elementler ve replacement elementlere )
Kalıtsallık: Yok