Sayfa içerisindeki elemanların konumları ile ilgili özellikleri değiştirerek değişik uygulamalar geliştirebiliriz. Mesela bir katmanı gizleme, gösterme, başka bir alana taşımak veya hareket ettirmek gibi. Bu kısımda bu gibi konuları işleyeceğiz.
CSS ile katman tanımlama
Browserler arasında Nestcape 4.x serisi <LAYER> tagı ile katman kullanmayı ve CSS ile katman tanımlamayı destekler. Fakat İnternet Explorer ve Nestcape 6.x serisi sadece CSS ile katmanları tanımlayabilirler ve kullanabilirler. Bu nedenle bir bu bölümde sadece CSS ile katman kullanmayı göreceğiz.
CSS ( Cascading Style Sheet ) ile katman tanımlamak için <STYLE> tagını kullanıyoruz. Katmanları genel olarak block taglarında kullanabiliriz ( P, DIV, Hx gibi). Genel katman tanımlama tagı olarak <DIV> tagını kullanacağız.
şeklinde bir tanımlama yapmamız yeterli olacaktır.
Bu şekilde bir kullanım satır içi kullanımdır. Şimdi satır içi kullanımla birlikte katman tanımlarken kullanacağımız diğer sitil özelliklerini görelim.
position
Bu özellik katmanın durumunu belirtir. Üç değer alabilir. absolute : bu parametre kullanıldığında katman bağımsız bir şekilde oluşturulacaktır. Verilen değerlere göre sayfa üzerinde dilediğimiz yere katmanı yerleştirebiliriz. relative : bu özellik ile katmanı sayfa içerisinde katmanın tanımlandığı yere göre konumladırılır. inherid : bu özellikte katmanın bir başka katman içerisinde kullanıldığında içerisinde bulunduğu katmana göre hareket etmesini sağlar. Eğer başka bir katman içerisinde tanımlanmadıysa katman absolute özelliği gibi davranacaktır.
left
Bu özellik katmanın sol kenara göre nereye yerleştirileceğini belirtir. left: 10 şekllinde bir kullanım sol kenara göre 10 pixel sağa katman yerleşecektir.
top
Bu özellik katmanın sayfanın enüstüne göre konumlandırılmasını sağlar.
width
Katmanın genişliğini belirtir. Kullanılmadığı zaman browser kendi ayarlama yapacaktır. Fakat böyle durumlarda Internet Explorer sorun çıkarabilir. Bu nedenle belirtilmesi gereklidir.
height
Katmanın yüksekliğini belirtir.
clip
Bu özellik ile katmanın hangi bölümünün görünür olacağı belirtilir. Katmanın istenilen bölümü görünür kılınabilir. clip:rect(ust,sağ,alt,sol) şekllinde bir kullanımı vardır. Burada : üst katmanın en üstünden ne kadar birim uzaklıkta gösterime başlanacağını bellirtir. Sağ değeri ise katmanın sol kısımdan ne kadar birim sağdan başlayacağını belirtilir. Alt parametresi katmanın en üsten ne kadar aşağıya doğru gösterileceğni belirtir. Sol parametresi katmanın en soldan ne kadar sağa yanaşık gösterileceğini belirtir.
visibility
Bu parametre katmanın görünürlüğünü belirtir. visible parametresi ile katman görünür olacaktır. hidden parametresi ise katmanın görünmez olamsını sağlar.
z-index
Bu parametre derinlik olarak katmanın hangi seviyede olacağını belirtir. Bu değer kullanılmadığında katmanlar sayfa içerisinda aynı derinlikte kalacaklardır. Değer artıkça katmanın daha üste görünmesi sağlanır.
background-color
Bu değer katmanın zemin rengini belirler. Değer olarak tanımlı renk isimleri veya hexadesimal RGB üçlüsü girilebilir. Nescape 4.x serisinde bu değer katman içerisine yazılan yazının zemin rengini belirtir.
layer-background-color
Bu değer Nestcape 4.x için layerin zemin rengini belirler.
background-image
Katman için zemine bir resim yerleştirir. Kullanımı : background-image:URL(zemin.gif) şeklindedir.
layer-background-image
Nestcape için katmana bir zemin resmi yerleştirir. Kullanımı layer-background-image:URL(zemin.gif) şeklindedir.
Bu özelliklerin tam açıklamasını W3C CSS-Positioning adresinide bulabilirsiniz. Şimdi örnek bir katman tanımlayalım :
Bu katmanı görmek için
tıklayınız . Burada dikkat edilmesi gereken bir konuda ID özelliğidir. HTML 4.0 da tanımlanan bu özellik ile tüm sayfa elemanlarına özel bir kimlik verilebilir ve istenildiğinde verilen kimlik ile elemana istenilen yerden ulaşılınablir. Burada verdiğimiz yeniKatman isminde başka bir elemena isim veremeyiz ve yeniKatman ismi ile istediğimiz zaman bu katmana ulaşabiliriz
dhtml - Konumsal özellikler ile çalışma 2
Yine sitillerin başka bir kulanımı şu şekilde olabilir; tüm sitillerimizi başlangıçta HEAD tagı içerisinde tanımlayabiliriz. Böyle bir kullanımda tanımlayacağımız katmanın ID sine göre tanımlama yapabiliriz. Mesela;