CSS’de eşit boyutlu kolonlar

Kategori: Tasarım24.03.08(9)

CSS ve XHTML tasarım hayatımızın içine öylesine girdi ki, HTML’de tablo kavramını yavaş yavaş unutuyor olduk. Yine de o zamanlardan kalma bazı özellikleri de özlemiyor değiliz. Onlardan biri de, her web tasarımcısının muhakkak aşina olduğu, çok kolonlu tasarımlarda kolonların boyutlarını eşit tutamama durumu. Ne yazık ki CSS şu anki haliyle yan yana yerleştirilmiş div’lerin boyutlarının içeriğe göre otomatik olarak uzamasına izin vermiyor. En azından bildiğimiz şekliyle ;)


Tasarımımızda yan yana üç kutumuz olduğunu düşünelim. height elementi ile kolonların uzunluğunu önceden belirlemezsek, bu üç kutunun boyutları içeriğe göre değişecektir;

Örnek için tıklayın.

Fakat tasarımımızın gereksinimlerine göre, üç kolonun boyutunun en uzun kolonunkine göre otomatik olarak uzatılması gerekebilir. Kelimelerin bittiği yerde, işler yine resimlere düşüyor;

Örnek için tıklayını<p>z.

Faux Columns

Faux Columns‘ methodu, bu konuda en çok kullanılan methodların başında geliyor. Aslında konsept çok basit: Tüm div’leri kaplayan bir ana kutu oluşturuyor ve bu kutuya üç kolonu kaplayan, 1 piksel yüksekliğinde bir arkaplan resmi atıyoruz. Diğer üç kolonu içeren bu kutunun boyutu içeriğe göre otomatik olarak uzayacağından dolayı, arkaplan sorunumuz da çözülmüş olacak. Örnek için tıklayınız.

Lütfen unutmayın: ana kutunun içerisinde bulunan 3 kutuya float:left; efekti uygulandığından, kapsayıcı div’imiz ilk adımda otomatik olarak uzamayacaktır. Bunun için kapsayıcı kutuya da float:left; efektini atayabilir, veya hemen altında yeni bir div oluşturarak kendisine clear:both özelliğini ekleyebilirsiniz.

Diğer Metodlar

Bu en çok kullanılan ve en kolay yöntem olsa da, aynı sonuca ulaşmanın farklı yolları da yok değil. Örneğin kolon genişliklerinin elastik olmasını ve tarayıcı boyutuna göre otomatik olarak değişmesini istiyorsanız, belirli genişlikteki arkaplan resimleri size ne yazık ki yardımcı olamayacaktır. Bu durumda internette dolaşan birçok JS kodunun yardımını alabileceğiniz gibi, Ed Eliot tarafından yazılmış olan bu güzel makaleye de göz atabilirsiniz.

Etiketler: , ,

YORUMLAR

TOPLAM 9 YORUM.

Yorumlarınız değerlidir. Bu yazıyla ilgili düşüncelerinizi belirtebilir, yardım talebinde bulunabilirsiniz.

Muhammet Sevim, (#) - 28.3.2008

Adres için teşekkürler, Kaan. JS ile çözüm olanaklarına örnek alabiliriz bunu…

Betsson CasinoEuro, (#) - 13.4.2008

Tesekkurler. Ise yarayacaktir mutlaka. Hemen arsivime ekledim.

CSS’de kolon yüksekliklerini eşitlemek » opereysin.com - Seviyeli, kaliteli…, (#) - 30.4.2008

[...] yeni bir div oluşturarak kendisine clear: both değeri eklememiz gerekiyor. (msevim’in CSS’de eşit boyutlu kolonlar‘daki [...]

filiz, (#) - 29.7.2008

Merhaba. zoque.forum sitesinde bg imajını sabit tutma hakkında bir yazınızı gördüm. Ben ne denediysem bg resmini sabitleyemedim. Verilen kodları kendi html basic -code inspactor sayfasına yazdım olmadı. Lütfen yardımcı olur musunuz?

justin tv, (#) - 11.4.2009

güzel bilgiler…

derya baykal, (#) - 11.4.2009

devamını bekliyoruz hocam.

InterRamcho, (#) - 15.7.2009

Eline sağlık ustam ;)

Yorumunuzu ekleyin

E-posta adresiniz hiçbir zaman yayınlanmayacaktır. Temel HTML metin şekillendirilmesi izinlidir. Sadece bu konuyla ilgili yorum yapmayı unutmayınız. Teşekkürler :)