CSS ve HTML kullanarak kaydırma metni içeren bir kutu oluşturma
Bir HTML kaydırma kutusu, kutunun içeriği kutu boyutlarından daha büyük olduğunda, sağa ve aşağıya kaydırma çubukları ekleyen bir kutudur. Başka bir deyişle, yaklaşık 50 kelimeye sığabilecek bir kutunuz varsa ve 200 kelimelik bir metniniz varsa, bir HTML kaydırma kutusu, ek 150 kelimeyi görebilmeniz için kaydırma çubuklarını yukarı kaydırır. Standart HTML'de, sadece kutunun dışındaki fazladan metni iter.
HTML kaydırma yapmak oldukça kolaydır. Kaydırmak istediğiniz öğenin genişliğini ve yüksekliğini ayarlamanız ve ardından kaydırmanın nasıl olmasını istediğinizi ayarlamak için CSS taşması özelliğini kullanmanız gerekir.
Ekstra Metin ile Ne Yapmalı?
Düzeninizdeki alana sığacak kadar fazla metniniz olduğunda, birkaç seçeneğiniz vardır:
- Metni daha kısa ve uygun olacak şekilde yeniden yazın.
- Metnin sınırların ötesine akmasına izin verin ve düzenin desteklenmesini sağlayabileceğini umuyoruz.
- Taştığı metni kesin.
- Kaydırma çubuklarını (genellikle metin için dikey) ekleyin, böylece boşluk fazladan metni gösterecek şekilde kaydırılır.
En iyi seçenek genellikle son seçenektir: kaydırma metin kutusu oluşturun. Sonra fazladan metin hala okunabilir, ancak tasarımınız tehlikeye girmez.
Bunun için HTML ve CSS:
Taşma: otomatik; metni, metnin div sınırlarını taşmasını sağlamak için gerekliyse kaydırma çubukları eklemesini söyler. Fakat bunun çalışması için, div üzerinde ayarlanmış genişlik ve yükseklik stili özelliklerine de ihtiyaç duyarsınız, böylece taşma sınırı vardır.
Ayrıca taşmayı da değiştirerek metni kesebilirsiniz: auto; taşma: gizli; Taşma özelliğini dışarıda bırakırsanız, metin div sınırlarına yayılacaktır.
Sadece Metinden Daha Fazla Kaydırma Çubuğu Ekleyebilir
Daha küçük bir alanda görüntülemek istediğiniz büyük bir resminiz varsa, metinle aynı şekilde, etrafına kaydırma çubukları ekleyebilirsiniz.
Bu örnekte, 400x509 görüntü 300x300 paragrafın içinde.
Tablolar Kaydırma Çubuklarından Yararlanabilir
Uzun bilgi tablolarının çok hızlı okunması çok zor olabilir, ancak bunları sınırlı bir boyuttaki bir div içine koyarak ve taşma özelliğini ekleyerek, sayfanızda aşırı yer kaplamayan birçok veri içeren tablolar oluşturabilirsiniz. .
En kolay yol resim ve metinlerle aynıdır, sadece tablonun etrafında bir div ekleyin, bu divın genişliğini ve yüksekliğini ayarlayın ve taşma özelliğini ekleyin:
| İsim | Telefon | ||||
|---|---|---|---|---|---|
| Jennifer | 502-5366 .... Bunu yaptığınızda gerçekleşen bir şey, genellikle yatay kaydırma çubuğudur, çünkü tarayıcı, kaydırma çubuklarının kromunun tabloyla örtüştüğünü varsayar. Bunu, tablonun ve diğerlerinin genişliğini değiştirmekten düzeltmenin birçok yolu vardır. Ama benim favorim CSS 3 özelliği overflow-x ile yatay kaydırmayı kapatmaktır. Sadece overflow-x ekleyin: gizli; div ve yatay kaydırma çubuğunu kaldıracaktır. Bunu silmeniz gerektiğinden, bunu test ettiğinizden emin olun. Firefox, Taşma için TBODY Etiketlerini Kullanarak DesteklerFirefox tarayıcısının gerçekten güzel bir özelliği de, trombüs, thead veya tfoot gibi iç tablo etiketlerindeki taşma özelliğini kullanabilmenizdir. Bu, tablo içerikleri üzerinde kaydırma çubukları ayarlayabileceğiniz ve üstbilgi hücrelerinin üst üste sabitlenmiş kalacağı anlamına gelir. Bu sadece Firefox'ta çalışıyor, bu da çok kötü, ancak okuyucularınız sadece Firefox kullanıyorsa iyi bir özellik. Ne demek istediğimi görmek için Firefox'ta bu örneğe göz atın.
|