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

0 dakikada yazıldı

16420 defa okundu

Düzenle

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