Div Etiketleri ile Web Sayfası Hazırlama
Div etiketleri ile sayfa oluşturmaya geçmeden önce bazı şeyleri iyi anlamakta fayda var. Bunlardan biri display özelliği.
Html etiketlerini sayfada yerleşme şekline göre ikiye ayırabiliriz: inline ve block elemanlar
Inline elemanlar aynı satıra yerleşebilirler, yani etiket kapatıldıktan sonra diğer elemanlar aynı satırdan yerleşmeye devam ederler. Örneğin b, u, i, a, span, font vb...
Block elemanlar ise sayfada alt alta yerleşirler. Yani etiket bittiğinde sayfa mutlaka alt satırdan devam eder. Örneğin h1, p, div vb...
Display özelliği ile o etiketin inline veya block hale getirilmesi mümkündür.
display: inline;
display: block;
display: inline-block;
Block türündeki elemanları yanyana yerleştirebilmek için iki yöntem kullanabiliriz:
-
Float özelliğini kullanabiliriz.
-
Display: inline-block; css özelliği uygulayabiliriz.
Bu iki yöntem de ayrı ayrı anlatılacak olup, önce biraz div etiketinden bahsedelim.
Div Etiketi
Web sayfalarımızın yapısını tablo ile oluşturmak yerine div etiketleri ile oluşturduğumuzda hem daha az kod yazmış oluruz, hem de daha profesyonel tasarımlar gerçekleştirebiliriz.
Div etiketi blok bir elamandır yani arka arkaya yazdığımız div elemanları, alt alta yerleşeceklerdir. Div etiketleri ile oluşturulan bu kutuların yerleşimini CSS kullanarak istediğimiz gibi ayarlayabiliriz. Yani istediğimiz divleri yan yana yerleştirip genişlik, hizalama vb özelliklerini de ayarlayarak güzel ve kullanışlı sayfalar oluşturabiliriz.
Aşağıdaki örnekte anakatman id'si ile bir kutu oluşturulmuş ve bu kutu içerisinde 5 tane kutu daha oluşturulmuştur. Her kutuya da stil uygulamak amacıyla id verilmiştir. Css kısmında bu id'lerin içleri doldurularak kenarlık, arka plan, yerleşim gibi tüm özellikleri belirlenebilir.
<body>
<div id="anaKatman">
<div id="ustKatman"></div>
<div id="solKatman"></div>
<div id="ortaKatman"></div>
<div id="sagKatman"></div>
<div id="altKatman"></div>
</div>
</body>
Bu örnekte anaKatman içindeki tüm divler alt alta yerleşecektir. Ancak solKatman, ortaKatman ve sagKatman isimli kutuların yan yana yerleşmeleri istenmektedir.
Şimdi bunun için kullanabileceğimiz iki farklı yönteme göz atalım. İncelemek için aşağıdaki linklere tıklayınız.
1. Float Özelliği ile Divleri Yan Yana Yerleştirme
2. Inline-Block Özelliği ile Divleri Yan Yana Yerleştirme
Not: Her iki yöntem de sadece divler için değil, li etiketi ve benzeri blok elemanlar için de kullanılabilir.
css ile divleri yanyana yerleştirme, div örnekleri, html sayfa yapısını div ile hazırlama, tablosuz tasarım, li etiketlerini yan yana yerleştirme
KONU İLE İLGİLİ ÖRNEKLER
|
Inline-block özelliği ile divleri yan yana yerleştirme örneği
|
Kendin Dene
|
Kendin Dene butonuna tıklayarak örneğin kodlarına ulaşabilir ve değişiklikler yaparak sonucu görebilirsin.
|
Float özelliği kullanarak divleri yan yana yerleştirme örneği
|
Kendin Dene
|
Kendin Dene butonuna tıklayarak örneğin kodlarına ulaşabilir ve değişiklikler yaparak sonucu görebilirsin.
18357 kez okundu.