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ı.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <style type="text/css"> #kutu { background:red; } </style> </head> <body> <div id="kutu">Div Kullanımı Örneği</div> </body> </html> |
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ı.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <style type="text/css"> #kutu { background:red; width:50%; height:100%; } </style> </head> <body> <div id="kutu">Div Kullanımı Örneği</div> </body> </html> |
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ı.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <html> <head> <style type="text/css"> #sol { float:left; width:50%; height:100%; background:red; } #sag { float:left; width:50%; height:100%; background:blue; } </style> </head> <body> <div id="sol">Sol</div> <div id="sag">Sağ</div> </body> </html> |
Kullandığımız div’lere piksel cinsinden değer de verilerek boyutları ayarlanabilir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <html> <head> <style type="text/css"> #sol { float:left; width:100px; height:150px; background:red; } #sag { float:left; width:100px; height:150px; background:blue; } </style> </head> <body> <div id="sol">Sol</div> <div id="sag">Sağ</div> </body> </html> |
Üçü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ı.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <html> <head> <style type="text/css"> #sol { float:left; width:100px; height:150px; background:red; } #sag { float:left; width:100px; height:150px; background:blue; } #alt { width:200px; height:50px; background:gray; } .sil { clear:both; } </style> </head> <body> <div id="sol">Sol</div> <div id="sag">Sağ</div> <div class="sil"></div> <div id="alt">Alt</div> </body> </html> |
8 Comments on “HTML – CSS ile DIV Kullanımı”