Css ile 3’lü Sütun | Metin Saraç
  • Trabzon / Eskişehir /
  • metin_@hotmail.com.tr

Css ile 3’lü Sütun

Css ile 3’lü Sütun

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.

 

Html  Kodlarımız.

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.

Html Kodlarımız.

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.

One thought on “Css ile 3’lü Sütun”

  1. Hüseyin Kürklü diyor ki:

    Hocam bu değerli dersiniz içinde teşekkür ederim. Sağolun

Bir Cevap Yazın

Benzer Yazılarkategori bazlı

karabuk haber