1182 takipçi
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 ;)
Genç yaşlarda programlama ile tanıştı ve Delphi ile başladığı programlama macerasına şuanda PHP, SQL, Javascript, AJAX, CSS, XHTML teknolojileri ile devam etmektedir. Elektrik - Elektronik bölümü mezunu olan "yakuter" 2006 yılından itibaren yakuter.com'un yazarlığını yapmaya başlamıştır.
sayim
15 Nisan 2008
Merhaba,
Peki üçüncü sütunun 200 değil de geri kalan aralığı kullanmasını istesek.
Mesela eğer kişinin ekranı 800 ise 100 değerini, 1024 ise 424 değerini almasını otomatik olarak sağlayabilir miyiz?
taha ipek
18 Mayıs 2008
zaten css te yapamadığım bi bunlar var 2 senedir nedense kafam basmadı şuna… =(
Mustafa
09 Temmuz 2008
3 sutunlu tasarımlarda veya dört olduğunu düşünelim sutünları ikili gruplar halinde tasarlamayı önerenlerde var.
@sayim : Eğer her browsera sığsın istersen değerleri yüzdeli verebilrisin
.sol {
width:50%;
float:left;
}
.sag1 {
width:25%;
float:right;
}
.sag2 {
width:25%;
float:right;
}
mehmet
21 Ekim 2009
peki hocam sidebarda bulunan kategorileri bulundugu yere nasıl resim ekliyebiliriz örnegin temamda suan bir resim vs sekil yok sadece ” kategoriler” yazıyor ben bunun altına nasıl bir gif ekleyebilirim css ile
ibrahim
27 Kasım 2010
Hocam sidebarda iki bileşen arasındaki mesafe çok fazla. Örn. arama kurusu ile kategoriler bileşeni arasındaki mesafe sidebar da yüksek görünüyor diyelim. bu mesafeyi daraltmak ve birbirine yaklaştırmak istiyorum. Nasıl yapabilirm acaba ?
Yakuter web tasarım, yazılım geliştirme, IPhone uygulamaları gibi konular da Üreticy'yi öneriyor.
ClipFinder HD, en ünlü 15 video paylaşım sitesi üzerinden video arayıp indiren ve format dönüştüren ...
G Data TotalCare bilgisayarınızda sağladığı tam kapsamlı güvenlik yanında optimizasyon araçlarıyla s...
G Data InternetSecurity anti-virüs, anti-casus, anti-spam anti-rootkit korumalarının yanında progra...
Performans problemi yaşamadan virüslerden korunmanızı sağlayan G Data AntiVirus, bilgisayarın aktif ...
Multiplayer oyun severlerin en çok ihtiyaç duydukları iletişim araçlarını içinde bulunduran ve onlin...
Yazılan yazılardan ilk siz haberdar olun, yeni yazılar e-postanıza gönderilsin.
yakuter
03 Kasım 2011
UfukArt
01 Kasım 2011
yakuter.com © 2006-2010 Erhan Yakut. Site tasarım Cenk Akyıldız - (Tema Bilgisi).
Site içerisindeki içerikler izinsiz kopyalanamaz, alıntı yapılamaz.