Overflow hidden ve scroll kullanımı ve resim boyutlandırma

Web sayfalarındaki görsel uygulamalarda, yazı kutularında “overflow:hidden;” ya da gerektiğinde “overflow:scroll;” kullanmak çok işe yarayan bir şeydir. Bir sayfa yazının içinde bir ek bilgi çok yer kaplamasın diye “overflow:scroll” özelliğinden faydalanır. Resimleri özet yazı içinde küçültme durumlarında bazen “overflow:hidden” ile deforme görüntü sorunlarını çözmek mümkün.

Overflow;hidden olmasaydı
Mesela bloglarda ana sayfada, arşiv sayfalarında yazılar özet halde gösterilmek istendiğinde resimlerin de küçültülmesi gerekiyor. Bir CSS ayarı ile yazılardaki resimlerin tekil sayfalarda (esas yazı sayfalarında) normal boyutunda, ana sayfada ise özet yazılar içinde küçültülmüş hali ayarlanabilir. Fakat sadece resimler üzerindeki en boy ölçülendirilmesi çoğu resimlerde deforme bir görüntü arz eder.

Diyelim ki resimli özet yazıların anasayfadaki kendi bölgesinde genel ayarında div class ismi “ozetli” olsun.
O isimle Style kısmına şu şekilde CSS ayarı yapılır:
.ozetli img{width:90px; height:80px;}

Ne yaptık? Sadece resme özgü en ve boy tayin ettik. Böylece resimler tekil sayfalarda gerçek boyutlarında görünürken ana sayfada özet yazıların içinde küçük görünür.
Ana sayfada yan menülerdeki resimler bu ölçeklendirmeden etkilenmesin diye sadece özet yazılar kısmına uygulanır.

Peki bu usul ne kadar sağlıklı? Görelim. Sağda gördüğünüz kürklü kadın resmine bakın. Esas yazı sayfasında bu şekilde görünüyor. Özetli yazılarda ise 90X80 boyutunda olması isteniyor.

Yapalım bakalım: Solda görüldüğü gibi 90X80 boyutlarında olunca son derece deforme görünüyor. Bütün resimler 90X80 ölçüsünde otomatik olarak ayarlanacağından dolayı resimlerin orijinal en – boy boyuttlarına göre kimileri normale yakın görünür kimileri abuk sapık görünür.

Çözüm: Resme sadece “en” yani genişlik ölçüsü atayacağız. Şöyle:
.ozetli img{width:90px;} Böyle yapınca resim aşağıdaki gibi görünecek.
Ama bu hiç iyi olmadı: En ve boy doğru orantıda küçüldü. Oysa uzun olması istenmiyor, yüksekliğinin 80px ölçüsünde olması isteniyor. Evet, çözüm bu kadar değil zaten.

İşte bu noktada “overflow:hidden” devreye girerse ve çözümü sağlanır. “Yükseklik” özet yazının kaplayacağı yer kadar ayarlanır, ama resme değil! Özet yazı bölgesine ayar yapılır.
.ozetli{height:80px; overflow:hidden;}

Daha iyi bir görsel örnekte çerçeve içinde gösterelim. Ayarlara kenarlıklar (border) katalım, arka plan rengi (background) katalım ki kutu içinde görünsün mesele daha iyi anlaşılsın. Kutu içine de soldaki düzgün küçültülmüş resmi ve latince uzun bir yazı koyalım. çerçeve içine dört kenara 5px boşluklar (padding) koyalım yazılar kenar çizgilerine değmesin. Böylece CSS ayarı:

.ozetli{background:#fffef2; border:1px solid #cacaca; font-size:1.1em; height:80px; padding:5px; overflow:hidden; width:450px;}
Bu arada resim yazının solunda görünsün ve sağında 5px araboşluğu olsun diye onu da şöyle ayarladık:
.ozetli img{float:left; margin-right:5px; width:90px;}

(Bir de bu CSS ayarlarının div anahtarları HTML sayfalarında ilgili elemanların başına ve sonuna konur, burada o konuya girmiyorum. Onu şu yazımda anlatmıştım: » div class … )

Vereceği görüntü ise şudur:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

Şimdi ne oldu bakın: Resmi kesmedik, uzun yazıyı kısaltmadık: özet yazı kutusunda 80px ölçüsünden fazlalık kısmı aşağı tarafta gizli kaldı. “hidden” gizli demektir. “overflow:hidden;” yapmış olduk. Latince yazı ise daha uzundu ama onun devamı da gizli kaldı.

Overflow ayarlarını yukarda “hidden” yani gizli özelliği ile gördünüz. Hidden yerine Scroll olursa ne olur?
Önce yukardaki kodu aynen yazayım, sadece bir kelime değişecek: hidden yerine scroll yazıyorum:
.ozetli{background:#fffef2; border:1px solid #cacaca; font-size:1.1em; height:80px; padding:5px; overflow:scroll; width:450px;}

.. Ve aşağıda bakın nasıl bir farklılık sağlıyor.

İşte görüntüsü: Bunda yanda kaydırma çubuğu var, onunla resmin de yazının da tamamını görebiliyorsunuz. Bu “overflow;scroll;” özelliğidir. Yan çubuğu kaydırarak yazının tümünü okuyabilirsiniz.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

Ne kadar pratik şeyler değil mi? Bunu blog yazılarınızın içinde bile kullanabilirsiniz.
Nasıl yapacağınızı yazıyorum dikkat edin:
Diyelim ki bir yazınızın içinde ek bir bilgi sunacaksınız, o ek bilgi ise çok uzun. Fazla yer kaplamasını istemiyorsunuz, esas yazınızı bulandırması canınızı sıkıyor. Böyle durumlarda “overflow:scroll” özelliği ile o ek bilgiyi yukardaki gibi çerçeve içine almalısınız.

Ek bilginin en başına şu gelecek:
<div style="border: 1px solid #cacaca; margin: 10px; padding: 5px; background: #fffef2 none repeat scroll 0% 0%; overflow: scroll; font-size: 1.1em; height: 80px; width: 450px;">
Ve en sonuna ise şu:
</div>
(Dikkat: Bu kodlu ek bilgi yazısını blog yazarken görsel bölümde değil HTML bölümünde yazacaksınız.)

Latince yazıyı sizin ek bilgi gibi düşünün. Bakın nasıl oluyor, kodları burada kırmızı yapayın daha iyi görebilin:
<div style="border: 1px solid #cacaca; margin: 10px; padding: 5px; background: #fffef2 none repeat scroll 0% 0%; overflow: scroll; font-size: 1.1em; height: 80px; width: 450px;">Ek Bilgi: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</div>

Öğrendiniz. Ek bilgi kutusunun arka plan rengini, genişliğini, yüksekliğini, kenarlıklarının rengini, çizgi kalınlığını istediğiniz gibi değiştirebilirsiniz.
Son olarak bu nasıl görünüyor bakın:

Not:
Ek bilgi kutusu yazı bölümünü sağdan sola tamamen kaplasın isterseniz ayar kodunda width:450px; gibi bir rakam belirtmeyin, width:auto; diye yazın.

Kategori: HTML / CSS | Etiketler: Div style css, Web tasarım