Konumlandırma
CSS DERSLERİ
 |
 |
Ders 9: Konumlandırma
Bu sayfada HTML nesnelerinin CSS ile sayfa içinde nasıl konumlandırılacağını göreceğiz.
Nesne Yüzdürme
İlk özelliğimiz: float. Bu özellik ile HTML nesnelerinin sayfada veya herhangi bir HTML elemanının içinde konumlandırmaya yarar. Bu işleme yüzdürme diyoruz. Örneğin bir resim nesnesinin metin içindeki konumunu düşünün, bu resim nesnesini hizalayarak bu nesneyi metin denizi içinde yüzdürmüş oluyoruz. Eğer float özelliğine right özelliği verirsek nesne sağda, left özelliği verirsek solda, none özelliğini verirsek yazıldığı yerde konumlandırılır.
Nesne Boyutları
Konumlandırılan HTML nesnesinin büyüklüğünün belirtilmesi de çok önemlidir. Nesnelerin boyutlarını belirlemek için width (en) ve height (boy) özellikleri kullanılır. Bu özelliklere şu şekillerde değerler verilir:
| auto | Nesnenin boyutlarını gözatıcı otomatik olarak belirler. |
| width: auto; height: auto | |
| birimsel değer | Nesnenin boyutlarının CSS birimleriyle ifade edilmesidir. |
| width: 20px; height: 1cm | |
| yüzde oran | Nesnenin boyutlarını, sayfaya olan yüzde oranıyla belirler. |
| width: 50%; height: 25% |
Not: width ve height özelliklerini Netscape desteklemiyor.
Nesne Konumlandırma
Bundan önceki iki sayfada nesneyi konumlandırmak için dışkenar veya içkenar boşluklarından yararlanıyorduk. Bu özellikler her ne kadar sınır çizgisine olan mesafeyi belirliyorlarsa da, sınır çizgisinin kullanılmadığı zamanlarda pekala konumlandırma aracı olarak da kullanılabilir. Veya sırf konumlandırmak için kullanılan top ve left özelliklerinden yararlanabiliriz. top özelliği nesnenin üstünde bırakılacak boşluğu, left özelliği ise nesnenin solunda bırakılacak boşluğu belirler. Bu özelliklere şu şekilde değerler verebiliriz:
| auto | Nesnenin bırakacağı boşluğu gözatıcı otomatik olarak belirler. |
| top: auto; left: auto | |
| birimsel değer | Nesnenin bırakacağı boşluğun CSS birimleriyle ifade edilmesidir. |
| top: 20px; left: 1cm | |
| yüzde oran | Nesnenin bırakacağı boşluğun sayfaya olan yüzde oranıyla belirler. |
| top: 50%; left: 25% |
Konumlandırma Türleri
Ancak bu özelliklerin kullanılabilmesi için position (konum) özelliğine değer vermemiz gerekir. Eğer position özelliğinin değeri absolute ise, verilen top ve left değerleri sayfaya veya içinde bulunulan elemana göre konumlandırır:
Eğer position koduna relative (bağıl) değerini verirsek, top ve left değerleri kendisinden önce tanımlanan nesneye göre konumlandırır:
Yukarıdaki iki uygulama arasındaki farkı görebildiniz mi? positon: absolute olan örnekte başlığın tepe çizgisi, sayfanın başından 100 piksel aşağıda; paragrafın tepe çizgisi ise sayfanın başından 200 piksel aşağıda. positon: relative olan örnekte yine başlık aynı konumda ama paragraf sayfa başından değil, başlıktan itibaren 200 piksel aşağıda. Yani sayfa başından 300 piksel aşağıda yer alıyor.
Nesneleri width, height left ve top özellikleriyle kesin olarak konumlandırabilir ve boyutlandırabiliriz. Not1: position özelliğini kullanmayı unutmayın. Not2: Netscape gözatıcılarının width ve height özelliklerini desteklemediğini unutmayın.
Görünürlük
Şimdi değil ama ileride görünmez nesneler de koymak isteyeceğiz. (DHTML derslerinde mesela.) Bir nesnenin görünür olup olmamasını visibility (görünürlük) özelliğine visible (görünür) veya hidden (gizli, görünmez) değerleri vererek sağlarız. Not: Bu özelliği Netscape gözatıcıları desteklemiyor.
HTML'de nesneleri konumlandırırken, herkesin sizinle aynı gözatıcıyı (browser'ı) kullanmadığını, herkesin sizinle aynı çözünürlük ve pencere büyüklüğünde çalışmadığını aklınızda tutun.
