Css Kaydırma

Css kaydırma işlemi ve kaydırma işlemini sonlandırma işlemlerini anlatılacaktır. Css kaydırma işlemleri tablosuz web site tasarımı için çok önemlidir. Css kaydırma işlemi için float özelliği kullanılmakta ve sonlandırma işlemi için ise clear özelliği kullanılmaktadır. Css kaydırma ve sonlandırma işlemleri için :

  • Float
  • Clear

özellikleri kullanılır.

Float Özelliği

Css float özelliği ile div'lerin veya herhangi html ögelerinin sayfa içinde yerleşimlerini sağlamak için kullanılır. Css float özelliği iki farklı değer almaktadır. Bunlar sağa yerleştirme ve sola yerleştirme'dir.

Css Float Özelliği Kullanımı

<style type="text/css">

.kutu1{

   width:50px;
   height:50px;
   background-color:red;

   float:right;

}

.kutu2{

   width:50px;
   height:50px;
   background-color:blue;

   float:left;

}

</style>              

Kodu Çalıştır

Clear Özelliği

Css clear özelliği float ile yapılan kaydırma işlemini sonlandırmak için kullanılır. Yani yeni eleman geldiğinde aşağıya listelenmesi için kullanılmaktadır.

Clear özelliği 4 farklı değer almaktadır. Bu değerler:

  • none : Değişiklik yapma
  • right : Sağa kaydırma işine son vermek için kullanılır.
  • left:: Sola kaydırma işine son vermek için kullanılır.
  • both: Her iki yönde de kaydırma işine son vermek için kullanılır.

Clear Özelliği Kullanımı:

<style type="text/css">

.kutu1{

   width:50px;
   height:50px;
   background-color:red;

   float:right;

}

.kutu2{

   width:50px;
   height:50px;
   background-color:blue;

   float:left;

}

.kutu3{

   clear:both;
   width:100%;
   height:50px;
   background-color:purple;

   float:left;

}


</style>                     

Kodu Çalıştır

Önceki Ders: Css Kenar İçi Boşluk Sonraki Ders: Css Görüntü