CSS web sayfasına konulan öğelerin her birisini bir kutu (box) içindeymiş gibi algılar. Bu kutuları sayfada istediğimiz yere yerleştirebiliriz. Kutular, aksi istenmiyorsa, yazılış sırasıyla sayfaya yerleşir. Şöyle ki, satır doluncaya kadar satırın sağına doğru yerleşirler; satır dolunca bir satır aşağıya geçer ve aynı şekilde devam eder.
İstendiğinde kutular sayfada istenilen yere yerleştirilebilir. Böylece kutuları iç-içe ya da üst-üste koymak mümkündür. Bu özellik sayfalara katmanlar (layers) yerleştirilmesine olanak sağlar.
Önce kutular...
CSS, bir HTML sayfasını dikdörtgen kutularından oluşan bir küme olarak algılar. Her bir dikdörtgen içinde, HTML elemanlarından birisi ya da birkaçı bulunur.
En altta <HTML></HTML> kutusu vardır. Diğer bütün
kutular bunun içindedir.
Bunun içinde, ikinci büyük kutu <BODY></BODY> kutusudur.
Bunun içinde, sayfaya girecek elemanları içeren bütün kutular yer alır. Örneğin,
Web sayfasına elemanları iki kategoride yerleştirebiliriz: block-düzeyi elemanları ve satır içi (inline) elemanlar.
Blok düzeyindeki elemanlar bir satırla başlar ve bir satırla biter.
inline elemanlar kendi başlarına bir satıra yerleşmezler; bunlar başka bir kutunun içindedirler. Dolayısyla, başka birisinin satırı içindedirler.
Bu farkı görmek için şu örneğe bakınız:
Örnek
Bu örnekte elemanlar normal akışı içindedir.
Buna statik konuşlanma diyoruz..
CSS 'in güçlü yanı, web sayfasına girecek elemanları, normal akışına bırakmayıp, onları sayfada istenilen konuma yerleştirebilmesidir.
Eğer bir eleman için konum belirtilmezse, o eleman sayfada normal akışa göre yerleşir. Yani yazıldığı sırada yerleşir.
Konuşlandırılan elemanlar sayfada istenilen koordinatlara konuşlanırlar. Bunun nasıl olduğunu örneklerle göreceğiz.
Bir kutu konuşlandırılması üç ayrı biçimde yapılabilir:
Elemanların konumları, onları içeren kutuya göre belirlenir.
Bütün elemanları içeren başlangıç (kök) kutusunun <HTML></HTML> kutusu olduğunu unutmamalıyız.
Sabit bir öğe için, onu içeren kutu olarak daima
tarayıcı penceresi (browser window) alınır.
Bu pencerenin koordinatları kullanılarak konuşlanma yapılır.
mutlak konuşlanmış (absolutely positioned) elemanlar, kendilerini içeren en yakın üst (ata) kutuya göre konuşlanır. Eğer başka bir üst kutu yoksa, <HTML></HTML> kutusuna göre konuşlanır. Bu tür konuşlanmada, kök kutusuna daha önce yerleşmiş eleman olup olmadığına bakılmaksızın, eleman istenilen yere konuşlanır. Böylece iç-içe ve üst-üste elemanlar oluşturulabilir.
göreli (relatively) konuşlanmış öğenin kendine özgü bir içeren bloku yoktur. İçinde bulunduğu blokun normal akışı içinde nereye raslıyorsa, oraya konuşlanır. Üst, sağ, alt ve sol konuşlanma kuralına uyarak yerini bulur.
Göreli ve mutlak konuşlanmaya başka Örnek görmek için tıklayınız.
CSS ile konuşlandırmanın esası budur. Şimdi sayfamızı biçimlendirmeye başlayabiliriz.
İlk önce yönlendirme (navigation) bölümünü oluşturalım.