Merhabalar, Bugün sizlere css ile sütun yapısı hakkında bilgi vereceğim, Neredeyse web sitesi tasarlarken her lazım olan sütun yapısı için kısaca bir anlatım yapacağım bu makalemde Css ile 3lü Sütun yapısı hakkında bilgilerimi sizinle paylaşacağım.Şimdiden Kolaylıklar dilerim.

1.Yapımız (Geniş  Şablon)

css-ile-3sütun-yapısı

İlk yapımızda Birinci içerik Kısmı ikinci ve üçüncü Sütun yapımıza göre daha büyük olacaktır. Bu yapıyı ayarlamak için .css Genişlik pixellerimizle oynamamız gerekecektir. Yapıyı anlattıktan sonra sonunda demo adreside sizlere iletmiş olacağım.

Herhangi bir kayma,taşma vs sorunu yaşamamak için, genişlik ölçülerinizi belirledikten sonra vereceğimiz kodlarda width (genişlik) değerlerinin toplamının sizin değerinizin toplamına eşit olduğuna emin olun.

Kodlama

Css kodlarımız.

.Geniş_Şablon {
width:500px;
float:left;
}
.İkinci_Şablon {
width:200px;
float:right;
}
.Üçüncü_Şablon {
width:200px;
float:right;
}

 

Html  Kodlarımız.

<div class="Geniş_Şablon">1.İçerik</div>
<div class="İkinci_Şablon">2.İçerik</div>
<div class="Üçüncü_Şablon">3.İçerik</div>

Demo

2.Yapımız (Eşit Kolonlar)

css-ile-3lü-esit-kolonlar

Bu yapımızda ise kolonların boylarının %100 olduğunu varsayarsak tüm kolonların boyutunu birbirine eşit yapıyoruz. 3lü Kolonda tek kolon genişliği %33, 4lü Kkolonda %25 olduğunu düşenebiliriz. Diğer Kodlamadan farklı olacak olursa bir adet kapsayıcımızın olmasıdır. Kapsayıcının genişliğini %100 olarak belirttiğimiz taktirde, Diğer kolon boylarının %’lik değerlerini girebilirsiniz.

Kodlama

Css Kodlarımız.

#ToplamGenişlik {
float:left;
width:100%;
}
#kol1 {
float:left;
width:33%;
}
#kol2 {
float:left;
width:33%;
}
#kol3 {
float:left;
width:33%;
}

Html Kodlarımız.

<div id="ToplamGenişlik">
<div id="kol1">İçerik – 1</div>
<div id="kol2">İçerik – 2</div>
<div id="kol3">İçerik – 3</div>
</div>

Demo

2.Anlattığımız yapı ile birlikte 1.Yapımızı oluşturabiliriz mantık olarak düşünüldüğünde örneğin %100 olarak belirlediğimiz genişlikte 1.Kolonumuzu %60 diğer iki kolonu %20 olarak belirleyebiliriz. Kolonları artırabilir, aynı şekilde azaltabilirsiniz, değerleri kendinize göre düzenleyebilirsiniz. Kolay Gelsin.

Metin Saraç 1 57 16 Ağustos 2014
0 beğeni - 1 Yorum