Ders 9: CSS'de Kutucukları Yan Yana Konumlandırmak-Float ...

Bu dersimizde web sitelerinin kaynak kodlarını incelediğimizde harici css dosyalarında sıkça gördüğümüz bir operatörden bahsedeceğim.

Bir web sitesini tasarlarken divlerden yararlandığımızı daha önce belirtmiştik. Web sitesinden divlerle birlikte başka elementler de kullanıyoruz malum (spanlar, başlıklar, resimler, metinler, linkler, sectionlar, article’lar vb.)

Önceki derslerde siteyi nasıl ortalayacağımızı öğrenmiştik. Farzedelim ki sitemiz tüm ekranlarda ortada görünsün maksadıyla <div align=”center”> diyerek tüm siteyi ortalayan bir div açtık ve tüm sitemizi bunun içerisinde yerleştirmeyi planlıyoruz.

Kodları yazmaya başlayıp ekran görüntüsünü kontrol ettiğimizde göreceğiz ki; Öntanımlı olarak bir web sitemizdeki tüm divler yani tüm kutucuklarımız, ortalı şekilde bir birinin altına konumlanacaktır. Yani CSS dosyasında hiç float tanımlaması yapmadan yüksekliğini rengini margin değerini belirlediğimiz iki adet div oluşturursak görünüm temsili şekilde şöyle olacaktır:

Peki kutucuklarımızı hep alt alta değil de yan yana da getirmemiz gereken durumlar olmayacak mı? tabiki de olacak, örneğin sütunlu bir yapı kuracaksak, veya gridler oluşturacaksak mutlaka yan yana dizilime ihtiyaç duyacağız. İşte burada float komutu devreye giriyor;

bir dive css dosyasında atayacağımız float değeri ile bu alt alta konumlandırmayı sağdan dizilme ve soldan dizilme şekline döndürebiliriz. Şimdi bu elimizde iki adet dive css ‘de float:left; değeri verdiğimiz farzedelim . Görünüm şu şekilde olacaktır.

Peki ya float:right; verseydik. O zaman da görünüm şu şekilde olacaktır.

Arkadaşlar float özelliğini sadece divlerde değil, özellikle img yani resim elementlerinde bolca kullanacağız. Bu yüzden mantığını lütfen iyi kavrayınız. Bu arada unutmadan, float kullanarak, siz aslında bir sitetin klasik yerleşimine müdahale etmiş oluyorsunuz, bu yüzden float’lı elementlerden hemen sonra bu float kışını temizlemeniz gerekir. Yoksa float’lı divlerden veya resimlerden sonra gelen her türlü element, floata uygun şekilde yan yana dizilmeye devam eder ve sitenizde tipik “benim sitem neden kaydı yaaa” problemleri ortaya çıkar

Float’ı temizlemek ise oldukça kolaydır. Ben gözüm daha iyi seçtiği için inline temizlemeyi tercih ediyorum. Bunu <div style=”clear:both”></div> şeklinde yapıyorum. Sizler bu şekilde yapmayı tercih etmeyip CSS dosyasında temizle diye bir klass oluşturup .temizle {clear:both;} değerini verip, html dosyanızda ise <div class=”temizle”></div> şeklinde bir çağırım yapabilirsiniz. Aynı etkiyi yapacaktır. Bol float’lı ve bol clear:both’lu günler dilerim

BU DERS SİZİN İÇİN FAYDALI OLDUYSA LÜTFEN REKLAMLARA TIKLAYARAK DEVAMLILIĞINA KATKIDA BULUNUNUZ. TEŞEKKÜRLER