Bu yazımda temalara sütun özelliğinin nasıl kazandırılığına değineceğim. Farketmişsinizdir kimi temalar 2 sütunludur, kimileri ise benimki gibi 3 sütunlu. Bu makaleyi yazmamdaki amaç da kendi temanızın veya hazırlayacağınız css tabanlı sitenin kaç sütunlu olacağına yine sizin karar verebilmenizi sağlamak.

İki Sütun

Önce iki sütunlu bir şablon yapalım.

Resmi incelerseniz göreceksiniz ki “icerik” ve “yan” adlı iki tane seçicimiz var. icerik’in genişliğini 500 piksel ve yan’ın genişliğini de 200 piksel olarak düşünelim. Bu yapıyı oluşturacak css kodumuz şu şekilde olacaktır.

.icerik {
width:500px;
float:left;
}

.yan {
width:200px;
float:right;
}

ve bu yapıyı sayfamızda göstermek için html kodu olarak şunu kullanıyoruz

<div class="icerik"></div>
<div class="yan"></div>

Burada dikkat etmemiz gereken “float” özelliği. Nesneleri bu özellik sayesinde yan yana getirebiliriz. Yukarıdaki kodlarda icerik’i sola ve yan’ı sağa yasladım.

3 Sütun

2 sütunu anladıktan sonra 3 sütunlu bir yapıya geçelim.

Bu sefer resimde göreceğiniz gibi “icerik” , “yan1” ve “yan2” olarak 3 adet seçicimiz var. Kodumuzda yapacağımız değişiklik ise genişlikleriyle oynamak ve seçicileri belirlemekten ibaret. Şöyle ki;

.icerik {
width:500px;
float:left;
}

.yan1 {
width:200px;
float:right;
}

.yan2 {
width:200px;
float:right;
}

sayfamıza da şu html kodunu ekliyoruz

<div class="icerik"></div>
<div class="yan1"></div>
<div class="yan2"></div>

Sonuç

2 sütunda toplamda 700 piksellik bir yapımız vardı. Bunun yanına bir tane daha 200 piksellik bir sütun ekledik ve toplamda 900 piksellik bir yapıya sahip olduk.

Yukarıdaki kodları gösterdiğim gibi kopyala-yapıştır yaparsanız ekranda birşey görmezsiniz. Ben bize gereken yerlerini yazdım. Eğer tüm seçicilere yükseklik değeri (örn. height: 200px; ) verirseniz ve yine tüm seçicilerin kenar kalınlığını 1 piksel yaparsanız (örn. border: 1px solid Black; ) yapımızın iskeletini görebilirsiniz.

Her yazımda olduğu gibi bunda da amacım size mantığını göstermekle birlikte sadece bir alternatif sunmak. Bunu yapmanın elbette başka yolları da bulunabilir ;)

Benzer Yazılar

• Tasarımlarda SEO’lu Logolar Kodlamak
• Tasarımda Evrensellik ve Sayılar
• Css’in Temeli “Kutu Modeli”