Kaydırma Çubuğundan Etkilenmeyen Sabit Div

[wmismail]

Sayfa Genelinde Kaydırma Çubuğundan Etkilenmeyen Sabit DIV (Katman)

Sayfada kaydırma çubuğu ile web sitenizi gezen kullanıcılara sayfanızın belirli bölümü sürekli göstermek isteyebilirsiniz. Buna çok basit bir örnek olarak sitenizin menüsü veya sitenize almış olduğunuz bir reklam çalışması verilebilir. Kullanıcı yukarı ve aşağıya doğru sayfayı gezerken sizin belirlediğiniz içerik yine sizin belirlediğiniz bir konumda ekranda sürekli gözükecektir.

Bahsettiğimiz işlevselliği sağlamak için CSS komutlarından faydalanacağız. Sayfamızda sürekli belirli bir konumda gözükmesini istediğimiz kısmı bir DIV katmanı içerisine yerleştireceğiz ve söz konusu DIV katmanına CSS özellikleri olarak konumlandırma koordinatlarını ve sabit kalma komutunu vereceğiz. Gelin ilk olarak içerisinde bir resim bulunan DIV katmanımızı hazırlayalım.

<div>

<img src="http://daron.yondem.com/tr/images/cert.gif" alt="" />

</div>

Katmanımız içerisinde bir resim bulunuyor. Siz kendi web sitenizde bu katman içerisinde her türlü HTML içerik yerleştirebilirsiniz. Bu bir reklam (Banner) çalışması olabileceği gibi sitenizin menüsü de olabilir. Fakat unutmayın ki DIV katmanı içerisine yerleştirdiğiniz HTML objelerinin dış objelerden bağımsız olması gerekiyor. Yani bir HTML tablonun bir satırını alıp bu katman içerisine yerleştiremezsiniz. Eğer böyle bir ihtiyacınız varsa söz konusu satırı tablodan ayırıp ayrı bir tablo olarak düzenlemeniz gerekir.

Bir sonraki adımda katmanımıza satır içi CSS özellikleri vererek ekran gözükmesi gereken konuma ait bilgileri aktaracağız.

<div style="top:10px;right:10px">

<img src="http://daron.yondem.com/tr/images/cert.gif" alt="" />

</div>

CSS özelliği olarak top özelliğine 10px değeri vererek katmanın ekranın en üst noktasından 10px mesafede yer alacağını belirledik. Aynı şekilde right özelliğine de 10px değeri vererek katmanın ekranın sağından 10px mesafede gösterileceğini belirlemiş olduk. Yukarıdaki örneği bu hali ile çalıştırdığınızda maalesef çalışmadığını göreceksiniz. Yapmamız gereken son bir ayar daha var. Konumlandırma ile ilgili tüm ayarlarımızı yaptık fakat bunlara ek olarak kullandığımız katmanın konumlandırma metodunu da belirtmemiz gerekiyor.

<div style="position:fixed;top:10px;right:10px">

<img src="http://daron.yondem.com/tr/images/cert.gif" alt="" />

</div>

CSS özelliği olarak position özelliğine fixed değerini vererek söz konusu katmanın sayfada gösterim metodu olarak sürekli aynı konumda gösterileceğini belirtmiş olduk. Artık kodumuzu çalıştırdığımızda herhangi bir sorun ile karşılaşmayacağız.

position:fixed CSS düzenlemesi Internet Explorer 7.0 ve FireFox 2.0+ internet tarayıcılarında doğru olarak çalışıyor. Maalesef Internet Explorer'ın eski sürümlerinde bu konuyla ilgili bir sorun vardı. Tabi ki her sorun gibi bu sorunun da çok sayıda çözümü var. Hatta Internet Explorer 6.0 ve 5.0 sürümleri için farklı farklı çözümler mevcut. Fakat ben yazımı burada sonlandırarak eski teknolojiye yatırım yapmayacağım. Sizin de yapmanızı tavsiye etmem

D.Y.