dhtml_Konumsalozelliklerilecalis.htm

dhtml - Konumsal özellikler ile çalışma

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.

Örnek olarak bir katman tanımlarsak :


<DIV STYLE="position:absolute; left:20; top:30; width:200">

ş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 :


<DIV ID="yeniKatman" STYLE="
position:absolute;
left:100;
top:40;
width:200;
height:200;
clip:rect(0,200,200,0);
background-color:red;
layer-background-color:red;
visibility:visible;"> yeniKatman isminde tanımlanmış bir katman.
</DIV>

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;


<HTML>
<HEAD>
<STYLE type="text/css">
<!--
#yeniKatman {
position:absolute;
left:100;
top:40;
width:200;
height:200;
clip:rect(0,200,200,0);
background-color:red;
layer-background-color:red;
visibility:visible;}
#digerKatman {
position:absolute;
left:200;
top:10;
width:300;
height:400;
clip:rect(0,300,200,0);
background-color:silver;
layer-background-color:silver; }
-->
</STYLE>
</HEAD>
<BODY>
<DIV ID="yeniKatman"> </DIV>
<DIV ID="digerKatman"> </DIV>
</BODY>
</HTML>

 

 
Yardım İçin Sadece Bir Tık Yeter
 
Sponsor
 
.tk
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol