Css Div - Css Dersleri

Div, html sayfasında bir bölüm oluşturmak istediğimizde kullanılır.


** <div> etiketi block etikettir yani bir genişlik değeri (width) vermediğimiz sürece satırı olduğu gibi kaplar ve yükseklik olarakta içerisinde bulunan öğelerin sahip olduğu yükseklik kadar bir yüksekliğe sahip olurlar.


Örneğin; bir site tasarımını bölmelere ayıralım.


** En dışarıda bir container isminde div oluşturduk.

Kod:Panoya kopyala

<div id="container">
  <div id="header">

  </div>

  <div id="content">

  </div>    
</div>

** Bu container div' ini oluşturmaktaki maksat tüm içerikleri aynı anda ortak bir şekilde yönetmek.

Kod:Panoya kopyala

#container {
     width: 600px;
     height: 300px;
     background-color: blue;
}

#header {
    width: 400px;
    height: 100px;
    background-color: red;
}

#content {
    width: 500px;
    height: 150px;
    background-color: green;
}

** Div 'lere verdiğimiz genişlik değerleri px cinsinden olmak zorunda değildir. Yüzde olarak da değer verebiliriz. Örneğin tarayıcı genişliği o anda kaç ise <div>' in genişliğinin sayfanın %70'i kadar olmasını isteyebiliriz.

Kod:Panoya kopyala

div {
    width:70%;
}

** Eğer bir <div> için bir yükseklik değeri verirsek ve içinde bulunan elemanların yüksekliği div in yüksekliğini aşarsa bu durumda oluşacak overflow yani taşma için bazı seçeneklerimiz vardır.


overflow : auto | hidden | scroll | visible


** auto : eğer ki içeriklerin yüksekliği sabit değerli div in yüksekliğinden fazlaysa scrollbar çubukları yani dikey ve yatay kaydırma çubukları görünür hale gelecektir aksi halde görünmez.


** hidden : bu durumda taşma olan kısım görünmez hale getirilir.


** scrool : auto' nun aksine her zaman kaydırma çubukları görünür eğer taşma yoksa bile pasif bir şekilde kaydırma çubuklarını görebiliriz.


** visible : taşmalar görünür olur.