CSS ile tablo satır ve sütunlarının boyunu ayarlamak

Selam arkadaşlar,

Çalıştığım şirketin web sitesini HTML5 ve CSS (CSS3’ü hedef alarak) güncelliyorum son bir kaç gündür. HTML5’e geçiş yaptığınızda zaten birçok stil sorunları yaşıyorsunuz ki, bu çok normal bir durum. HTML5 biliyorsunuz hala “draft” yani geliştirilme aşamasında ve yeni eklenen bir takım HTML tag’larının yanı sıra, bir önceki sürümlerde kullanılan özelliklerin bir kısmı da değiştirilmiş, bazıları da tamamen kaldırılmış durumda. HTML5 kullanacaksanız mutlaka aşağıda referanslarını verdiğim linklerden, kullanacağınız HTML elemanlarının özelliklerine göz atın. HTML5 projelerinizi geliştirirken de mutlaka temel referanslarınız olarak kullanın bu sayfaları.

HTML5 referansı
http://dev.w3.org/html5/markup/

HTML4 ve HTML5 arasındaki farklılıklar
http://www.w3.org/TR/html5-diff/

Projeyi geliştirken bir mesele üzerinde çok vakit harcadım. Malum web sitesinin cross-browser desteği olması gerekiyor yani günümüzde kullanılan popüler tarayıcıların tamamına yakınında sorunsuz çalışması lazım. Bu noktada, site navigasyonu üzerinde sıkıntı yaşadım. Yaşadığım sorun şu, navigasyonda kullandığım tabloya ait sütunların boyutlarını ayarlayamıyordum. Bir şekilde sütun boyutunu, bir element arttırıyordu.

Hemen bir not düşeyim burada, HTML tasarımlarında tablo kullanımı tasarım açısından pek tercih edilmez ancak kimi durumlarda kullanmak zorunda kalabilirsiniz (Ben de navigasyonda özel bir durumdan dolayı tablo kullanmak durumda kaldım). Şahsen ben de tablo kullanmak yerine DIV kullanmayı tercih ediyorum ki, DIV elemanları tasarım açısından ve cross-browser desteğini sağlamak açısından çok önemli. Ancak tablo kullanımı da o kadar büyük bir sorun değil…

Sorunun nedenini araştırdığımda, soruna neden olan şeyin, sayfalarda kullanılan “font” lar ve font büyüklükleri olduğunu buldum! Siz de benim gibi kafayı yiyip vakit kaybetmeyin diye de bu yazıyı yazıyorum zaten:)

CSS ile belirttiğiniz font büyüklükleri -inline style tanımı da olabilir- font elemanının etkilediği tüm “kutu” larda belirli bir genişlemeye neden oluyor. Bu nedenle kullandığınız tablolarda font büyüklükleri ve çizgi-yüksekliği (line-height) özelliğine dikkat etmelisiniz.

Böyle bir sorunla karşılaştığınızda yapmanız gereken şey, ilgili tablo için CSS tarafında -ya da inline style kullanarak- “line-height” özelliğini sıfır (ya da makul bir değer) yapmanız. Yani,

line-height: 0

yaptığınızda sorununuz çözülecektir.

, , , , ,

No comments yet.

Bir Cevap Yazın

Font Resize