CSS Pozisyon Belirleme , Kaydırma (float) Ve Hizalama (align)

CSS Pozisyon Belirleme , Kaydırma (float) Ve  Hizalama (align)

CSS Pozisyon Belirleme (position)



CSS aynı zamanda HTML elementlerinin diğer elementlere göre konumunu belirlemenizi sağlar. Bir HTML elementini diğerinin altına veya üstüne alabilir ve bir HTML elementi fazla büyükse ne yapılacağına karar verebilirsiniz.

Tüm elementler üst (top), alt (bottom), sağ (right) ve sol (left) özelliklerine sahiptir. Ancak bu özellikler CSS'deki position özelliği belirtilmemişse işe yaramayacaktır. Ayrıca birbirinden farklı dört pozisyon belirleme yöntemi vardır. Bunlar:
 

  • static - Hiçbir özellik belirtilmediyse
  • fixed - Sabit, tarayıcıya göre hareket etmeyen element
  • relative - Normal olması gereken pozisyona göre konum belirlemek
  • absolute - Koordinat belirleyerek sayfada bir yere yerleştirmek

static: Olması Gerektiği Gibi Bırakmak

Eğer position CSS kodunu hiç kullanmadıysak HTML nesneleri olduğu gibi sıralanacaktır. Bu şekilde olursa HTML elementinin alt, üst, sağ ve sol özellikleri belirlenemez.
 

fixed: Sabitlemek

Bir HTML elementini tarayıcı ekranına sabitlemek. Kaydıracı (scroll) kullansanız bile o element orada yer alacaktır (hareket etmez).
 

   p.fixed
   {
      position: fixed;

      top: 30px;
      right: 5px;
   }
   


Yukarıdaki kod çalıştırılırsa "fixed" özelliğine sahip P elementinin sağdan 5 piksel üstten 30 piksel noktasında sabit bir şekilde kaldığını göreceğiz.

Bu tarz elementler bir diğerinin üzerine geçebilir ve diğerini kapatabilir.
 

relative: Normal Pozisyona Göre Konumlama

Bir HTML elementini sahip olduğu pozisyondan yukarı, aşağı, sağa ve sola doğru ayarlamamızı sağlar. Elementin kapladığı alan tarayıcı tarafından tutulmuştur, dolayısıyla bunda bir değişiklik olmaz. Ancak biz sağ, sol, alt ve üst tarafa doğru hareket ettirebiliriz.
 

   h2
   {
      position: relative;

      left: -20px;
   }
   


Yukarıdaki örnekte H2 elementi kullanıldığı yerden 20 piksel sola kayacak ve oradan başlayacaktır. Bu durumda diğer elementlerin alanına girebilecektir.
 

absolute: Herhangi Bir Konum Belirleme

Herhangi bir elemente göre veya element belirtilmediyse tüm HTML sayfasına göre yer alacağı konum piksel olarak ifade edilir. Örneğin H2 elementinin sayfanın başlangıç noktasının (0, 0) 100 piksel sağında ve 150 piksel altında (100, 150) olmasını istiyorsak:
 

   h2
   {
      position: absolute;

      left: 100px;
      top: 150px;
   }
   


Bu tarz belirlenen pozisyonlar RELATIVE'den farklı olarak alan kaplamazlar. Yani sayfamızdan soyutlanmışlardır. Bağımsız hareket eden ve sadece tek bir başlangıç noktasını dikkate alan elementler gibi düşünülebilir.

"Absolute" özellikli elementler diğer elementlerin üzerine geçebilir ve onları kapayabilir.
 

z-index: Elementin Önceliğini Belirlemek

Nasıl Photoshop tarzı programlarda katmanlarla çalışılıyor ve katmanların sırası belirlenebiliyorsa, CSS'de de z-index özelliği ile bunu belirleyip bir HTML elementinin diğerinin üzerinde veya altında görünmesini sağlayabiliriz.
 

   img
   {
      position: absolute;

      left: 0px;
      top: 0px;

      z-index: -1;
   }
   


Yukarıda -1 değeri ile belirttiğimiz resim diğer tüm elementlerin altında görünecektir. Çünkü diğer elementlerde bu değer belirtilmediyse 0 (sıfır) olarak algılanacaktır. Buna karşın bu element -1 olduğu için alt katman kabul edilecektir.

Negatif değerler en alt katmanı pozitif değerler üst katmanları ifade eder. Örneğin biri -2 biri -5 olan iki z-index özelliğine sahip elementten daha büyük olan -2 özelliğine sahip element daha üstte görünecektir.

 

CSS Kaydırma (float)



Katmanlarla çalışmak ve resim galerileri oluşturmak için HTML elementlerini sağa ve sola doğru kaydırmamız gerekebilir. İşte css kodu float bunu yapmamızı sağlıyor:
 

Elementler Nasıl Kaydırılır?

Elementler yatay yönde sağa ve sola doğru kaydırılabilir. Yani aşağı doğru kaydırma söz konusu değil.

Kaydırılan element, sağ veya soldaki elementin sağından veya solundan başlar. Yeni kaydırılan elementler, ilk önce kaydırılan elementten sonra gelir. Dolayısıyla önceden kaydırılmış elementlerde bir değişiklik olmaz.

Örneğin bir resim için float: right; özelliği belirttiysek yazılar sağ tarafta yer alacak bu resmin solunda yer alacaktır.
 

Elementleri Yan Yana Sıralamak

Resim galerilerini görmüşsünüzdür. Resim sayfalarına giden küçük görüntüler sayfada yan yana sıralanırlar. Bunlar birbirine eşit olmalı ki kaydırıldığında birbiriyle uyumlu olsunlar. Örneğin küçük görüntümüz:
 

   .thumb
   {
      float: left;

      width: 110px;
      height: 110px;

      margin: 5px;
   }
   

 

Yukarıdaki örnek kodda yer alan özelliğe sahip resimleri sıraladık. Görüldüğü gibi her biri diğerinin sağına kaydırıldı ve aralara 5x2 (sağ, sol) piksellik boşluk (margin) verildi. Sığmayan nesneler ise bir aşağı satıra kaydırıldı.
 

Kaydırmayı Sonlandırmak

clear: both; kodu artık kaydırmanın sonlandığını ve bundan sonra geçerli olmayacağını bildirmemize yarar.
 

   .text_line
   {
      clear: both;
   }
   

CSS Hizalama (align)

 

Kutu Özellikli Elementlerin Hizalanması

Daha önceki derslerimizde bazı HTML elementlerinin kutu bazılarının satır içi olduğundan söz etmiştik (bak. CSS Display).

Kutu özellikli nesnelerde hizayı ayarlamak için text-align kullanılabilir.

Fakat bu dersimizde farklı yollardan nasıl hizalama yapılır bundan bahsedeceğiz.
 

Margin Kullanarak Ortalamak

Kutu özellikli elementler sağ ve sol dış boşluk (margin) değerleri auto yapılarak ortalanabilir. Tarayıcı bu durumda sağ ve sol boşlukları kendi ayarlayacağı için yazı ortalanacaktır. Ancak bu durumda genişlik yani width hiçbir zaman 100% olmamalıdır. Aksi takdirde kenarlık tarayıcı tarafından ayarlanamaz. Örneğe bakalım:
 

   .center
   {
      margin-left:auto;
      margin-right:auto;

      width:70%;

      background-color:#b0e0e6;
   }
   


Yukarıdaki örnek çalıştırıldığında tarayıcı otomatik olarak 15% sola 15% sağa boşluk verir ve genişliğe göre bunu oranlar.
 

Position Kullanarak Sağa ve Sola Yaslamak

Normal akıştan farklı olacak bir position: absolute; kodu kullanarak belirttiğimiz genişlikte bir kutunun sağa veya sola yaslanmasını sağlayabiliriz. Örneğin 500 piksellik bir kutuyu sağa yaslamak isteseydik:
 

   .center
   {
      position: absolute;

      right; 0px;

      width: 500px;

      background-color:#b0e0e6;
   }
   


Sağdan 0 piksel boşluk bırakılacağını right: 0px; ile belirtmiş olduk.
 

Float Kullanarak Sağa ve Sola Yaslamak

Float HTML elementlerini sağa veya sola kaydırarak listelememizi sağlar. Kaydırma özelliğini hizalamak için kullanabiliriz:
 

   .right
   {
      float: right;

      width: 300px;

      background-color:#b0e0e6;
   }
   


Kod çalıştığında 300 piksellik bir kutu sağa yaslanmış olacaktır.


Kaydırmalı bir nesnenin hemen ardından class="text_line" kullanılmış bir element yer alıyorsa, bu element kaydırma olayının dışında tutulacak ve normal şekilde sayfaya yerleştirilecektir.

 

 

Henüz Yorum Yapılmamış, İlk Yorumu Siz Yapın

Yorum Yollayın