Pratik projemizde tipik bir sütun düzeninden hareket ediyorum. Ancak bu projeyi canlı ve renkli bir şekilde sunmadan önce, size nasıl sütun düzenleri oluşturabileceğinizi somut bir şekilde göstermek istiyorum. Burada odak noktası, ikili ve üçlü sütunlu düzenler olacak çünkü bunlar hala çoğu web sitesinin temelini oluşturuyorlar.
Web tasarımında klasik olan kesinlikle ikili sütun olmalıdır. Bu düzenle genellikle sol tarafta gezinme menüsü sunulurken, sağ sütunda asıl içerik görüntülenir. Bloglarla ilişkili olarak bu davranış biraz değişmiş. Aslında, birçok blogda sağ tarafta gezinme veya reklam gösterilirken, sol tarafta asıl içerik sunulur.
Bu tür uygulamalar CSS'de oldukça kolay bir şekilde uygulanabilir. Aslında, ikili sütunlar en basit düzen şeklidir.
Aşağıdaki örnekte yüzdelik değerlerle çalışan bir ikili sütun göstereceğim.
İşte tam örnek:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
position: absolute;
left: 0;
margin: 0;
width: 20%;
background-color:#66CCCC;
}
#main {
margin: 0;
margin-left: 20%;
width: 80%;
background-color:#6666CC;
}
</style>
</head>
<body>
<div id="header">Mutlak konumlandırmalı düzen</div>
<div id="nav">Gezinme</div>
<div id="main">İçerik Alanı</div>
<div id="footer">Telif Bilgileri Burada Yer Alır.</div>
</body>
</html>Ve tarayıcıda bütünün görünümü şöyle olacak:
Ayrıca sol sütunu sağa doğru kolayca taşıyabilirsiniz. Bunun için aşağıdaki talimatları uygulayın:
• #nav kısmında left: 0 değeri right: 0 yapılmış.
• #main kısmında sadece margin-left kısmını margin-right yapın.
Değişiklikler kaydedildikten sonra istenilen sonuç görünecektir.
Ancak, mutlak konumlandırmaya dayalı gösterilen düzenin bir sorunu var: Sol sütundaki içerik daha büyük hale geldiğinde, alt ayak kısmının üzerine taşmaktadır.
Bu, mutlak konumlandırılmış öğeler için "boş alan ayrılmaz" ilkesindendir. Bu sorunu çözmek için sol sütunda olanlardan uzun olan içeriklerin baş alanına eklenerek geçilebilir.
Bu düzen şeklini yalnızca, ana içeriğin sol (veya sağ) sütundan kesinlikle daha yüksek olduğundan emin olduğunuzda kullanmalısınız.
Float ile İki Sütunlu Düzen
Önceki örnekte karşılaşılan sol ayak kısmını örtme sorunu, float özelliğinin kullanılmasıyla giderilebilir. Değiştirilmiş sözdizimi aşağıdaki gibidir:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 80%;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Mutlak konumlandırmalı düzen</div>
<div id="nav">Gezinme Alanı</div>
<div id="main">İçerik Alanı</div>
<div id="footer">Telif Bilgileri</div>
</body>
</html>Her iki sütun da float özelliği ile donatıldı. Böylelikle sütunlar artık yan yana yerleştirilmiştir.
Sol sütuna %20 genişlik verilir. Özellikle, float ile konumlandırılmış bir elemanın her zaman bir genişlik belirtilmesine dikkat edin.
Asıl içerik alanı %80 genişliğe sahiptir. Bu alan da float: left ile konumlandırılmıştır. Böylelikle bu alan sol sütunun yanında görüntülenir.
Ayrıca, ayak kısmının her zaman pencerenin alt kısmında - yani sütunların altında - görünmesi için aşağıdaki sözdizimi kullanılır:
#footer {
clear: both;
}
Bu varyant için kendi sınıfın tanımlanma seçeneğine zaten işaret etmiştim.
Float ile Üç Sütunlu Düzen
Üç sütunlu düzen, web tasarımında sıkça kullanılan bir seçenektir. Tipik bir bölümlendirme şu şekilde olabilir:
• Sol sütun gezinmeyi içerir.
• Orta sütunda asıl içerik yer alır.
• Sağ tarafta ek bilgiler veya reklamlar gösterilir.
Aşağıda, esnek bir üç sütunlu düzen oluşturulan örneği bulacaksınız. Sözdizimi - hemen fark edeceksiniz ki - önceki iki sütunlu düzenin sözdizimine oldukça benziyor. Ancak şimdi, toplamda sağ pencere sütununu temsil eden bir right div alanı eklenmiştir.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#main, #right {
margin: 0;
border: 0;
padding:0;
}
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 60%;
}
#right {
float: right;
width: 20%;
background-color:#6699FF;
}
#footer {
clear: both;
} </style>
</head>
<body>
<div id="header">Mutlak Konumlandırma ile Düzen</div>
<div id="nav">Navigasyon Alanı</div>
<div id="main">İçerik Alanı</div>
<div id="right">Sağ Sütun</div>
<div id="footer">Telif Hakkı Bilgileri Burada Yer Almaktadır.</div>
</body>
</html>
Yeni alana yüzde 20 genişlik atandı. Bu durumda görüntü şu şekildedir:
• Sol ve sağ sütunlar sırasıyla mevcut reklam alanının yüzde 20'sini kaplar.
• Orta sütunun genişliği ise yüzde 60'tır.
Gösterilen sözdizimi ile right alanı gerçekte sağ tarafta gösterilmektedir.
Sözdizimi bu konuda esnektir. main alanını şu şekilde değiştirebilirsiniz:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Burada float sağ olarak ayarlanmıştır. Böylece right alanı sola kayar.
Bu öğreticide, temel düzenleri float tabanında nasıl tanımlayabileceğinizi gördünüz. Bu bilgi şimdi bir web sitesinin temelini oluşturacak şekilde temel oluşturur. Gelecek öğreticilerde adım adım bir web sitesi oluşturulacak, temel iskeleden başlayarak.
