HTML – CSS ile DIV Kullanımı

Eski tablolu tasarım günlerinden sonra sıkça kullanılmaya başlanan ve son derece esnek bir tasarım elemanı olan DIV etiketi, günümüzde en çok başvurulan HTML etiketlerinden biridir ve tasarımın temel bileşenlerindendir.

Div etiketi ile içine eklenen yazı veya resim kadar yer kaplayabilen kutulardır. Ancak web sayfası tasarımlarında kullanılan div’lerin boyutlarını bizim belirlememiz daha uygun olacaktır. Website tasarımlarında div etiketlerinin genişliklerini belirtirken, yüksekliğinin belirtilmesine genellikle gerek yoktur. Çünkü içerisine eklenen metin veya resim kadar yüksekliğini ayarlayacaktır.

Div çerçevesiz ve renksiz bir etiket olduğu için sayfamıza eklendiğinde görünmeyecektir. Web sayfası tasarlarken ilk aşamada div’lere border (kenarlık) çizmek işimizi kolaylaştırmaktadır. Bu sebeple web sayfası taslağı oluşturduğumuz tüm örneklerde div’lere border (kenarlık) veya background (arka plan rengi) verilecektir.

Yazdığımız div etiketine id=”kutu” tanımlaması yapıldı ve arka plan rengi olarak kırmızı ayarlandı.

width:50% ile div’in genişliği tarayıcının yarısı kadar olması ve height:100% ile yüksekliğinin tüm tarayıcıyı kaplaması sağlandı.

Sayfamıza ikinci div’i ekleyeceğimiz için id’leri sol ve sag olarak değiştirildi. İki div’in de genişlikleri %50, yükseklikleri %100 olarak ayarlandı. Ancak div’lerin yan yana gelmesi için float özellikleri değiştirildi.

  • Sol Div -> float:left
  • Sag Div -> float:right

veya

  • Sol Div -> float:left
  • Sag Div -> float:left

yapılarak iki div’in yan yana gelmesi sağlandı.

Kullandığımız div’lere piksel cinsinden değer de verilerek boyutları ayarlanabilir.

Üçüncü div’i sol ve sağ div’in alt kısmına eklemek istiyoruz. Ancak float özelliği kullanıldığı için clear ile ara div kullanmamız gerekmektedir. Üçüncü div’den hemen önce sayfada görünmesini istemediğimiz bir div ekleyip class=”sil” tanımlanır. Float özelliği için left ve right kullandığımız için clear:both kullandık. Yalnızca left kullanmış olsaydık clear:left yapmamız da yeterli olacaktı.

 

 

 

About Seçil ŞEKERCİ HÜSEM

2010 yılından bu yana Bilişim Teknolojileri Öğretmeni olarak meslek liselerinde görev yapmaktayım.

View all posts by Seçil ŞEKERCİ HÜSEM →