Div Kullanarak Sayfa Hazırlama
Önceki sayfamızda tablosuz tasarımın daha kullanışlı olduğundan ve div etiketinden bahsetmiştik.
Aşağıdaki gibi oluşturulan div etiketlerinin alt alta yerleşeceğini, bu elemanları yan yana getirebilmek için Css kullanmamız gerektiğinden bahsetmiştik.
<body>
<div id="anaKatman">
<div id="ustKatman">Başlık vb</div>
<div id="solKatman">Linklerimiz</div>
<div id="ortaKatman">İçerik 1</div>
<div id="sagKatman">İçerik 2</div>
<div id="altKatman">Alt Bilgi</div>
</div>
</body>
Yukarıdaki örnekte solKatman, ortaKatman ve sagKatman isimli kutuların yan yana yerleşmeleri istenmektedir. Bunun için bu üç kutuya
özelliği uygulayabiliriz.
Float özelliği
Float özellği block türündeki html etiketlerinin yan yana yerleşmelerini sağlar.
Left ve right değerleri ile kutunun ekrandaki yeri belirlenebilir.
Left değeri verilerek kutunun bulunduğu yerde sola yaslanması, right değeri verilerek de sağ tarafa yaslanması sağlanabilir.
Yukarıdaki örnekte oluşturulan kutulara, aşağıdaki stilleri uygulayarak doğru biçimde yerleşmelerini sağlayabiliriz:
#anaKatman
{
margin:0 auto;
}
#solKatman
{
float:left
}
#ortaKatman
{
float:left
}
#sagKatman
{
float:right;
}
.clear
{
clear:both;
}
Dikkat Edilmesi Gerekenler:
Bu örnekte sagKatman için de float:Left kullanabiliriz. Üç katman da sırayla sola yaslanarak yerleşirler.
Float: right yapılarak sagKatman'ın o bölümde en sağa yaslanması sağlanmıştır.
Yan yana yerleştirilen div elemanlarının toplam kapladığı yer, ana katmanın width değerinden daha fazla olursa yan yana sığmayacaklardır. Bu durumda en sondaki div alta kayar ve yerleşim bozulur.
Divlerin toplam kapladığı yer hesaplanırken, margin, padding ve border değerleri de hesaplanmalıdır. (bkz Css Kutu Modeli)
Yan yana yerleşim sona erdiğinde boş bir div açılarak Clear:Both uygulanmalıdır.
Clear özelliği
Float özelliği kullanılarak kutuların yerleşimi ayarlanıp, belli bir yerden sonra yerleşimin normale dönmesini istediğimizde Clear özelliği kullanılır.
Bunun için yukarıdaki örnekte olduğu gibi, yan yana yerleşimin bittiği yere boş bir div etiketi açılır ve Clear:both özelliği uygulanır. Bu sayede float özelliğinin etkisi sona erer ve arkasından gelen kutular normal şekilde alt alta yerleşirler.
Clear: both özelliğinin tam olarak nerede uygulanacağı sıkça karıştırılmaktadır. Şöyle bir kural yazabiliriz:
Float uygulanan son div kapanır kapanmaz boş bir div açılmalı ve clear:both uygulanmalıdır.
Aşağıdaki örnekte float uygulanan son div sagKatman'dır. Bu nedenle sagKatman biter bitmez clear uygulanmıştır.
Aşağıdaki örnekte clear özelliği uygulanmış boş kutuyu kaldırırsak, altKatman'ın diğerlerinin üstüne kaydığını görürüz.
<body>
<div id="anaKatman">
<div id="ustKatman">Başlık vb</div>
<div id="solKatman">Linklerimiz</div>
<div id="ortaKatman">İçerik 1</div>
<div id="sagKatman">İçerik 2</div>
<div class="clear"></div>
<div id="altKatman">Alt Bilgi</div>
</div>
</body>
Tablosuz Tasarım ile İlgili Diğer Sayfalar:
1. Tablosuz Tasarım ve Div Elemanı
2. Float Özelliği ile Divleri Yan Yana Yerleştirme
3. Inline-Block Özelliği ile Divleri Yan Yana Yerleştirme
float özelliği kullanarak divleri yan yana yerleştirme getirme, li etiketlerini yan yana yerleştirme, clear both ne işe yarar, float özelliği nedir
KONU İLE İLGİLİ ÖRNEKLER
Bu örnekte ard arda 9 div'e float: left uygulanarak yan yana yerleşmeleri sağlanmıştır.
Container isimli div toplam genişliği sınırlamakta ve yana sığmayan eleman alta geçerek devam etmektedir.
9. div'den sonra clear: both uygulanmıştır. Bu sayede yerleşim normale dönerek devam edecektir.
|
Float Özelliği ile Divleri Yan Yana Getirme
|
Kendin Dene
|
Kendin Dene butonuna tıklayarak örneğin kodlarına ulaşabilir ve değişiklikler yaparak sonucu görebilirsin.
18668 kez okundu.