• Programlama
• Sistem
• Web & Grafik
• Genel Konular

  Web & Grafik

Css İle Kaymayan Div

Arkadaşlar belki bir çoğunuz biliyordur yada bir çoğunuz görmüşsünüzdür bazı sitelere girdiğinizde mesela Ülkemizin bayrağını sol üst köşeye koyuyorlar ve bayrağın kaymasını engelliyorlar , tüm sayfayı aşağı yukarı oynattığınız halde bayrak sabit kalıyor ve çokta güzel bir sayfa tasarımı meydana getiriliyor . Geçen gün aklıma geldi bende yapayım dedim bu konuda ufak bir css kodu yazdım buyrun sizlerde sayfalarınızda bu efekti kullanın

#vampire_ressim
{
position: absolute;
top: 0px;
left: 0px;
position: fixed;
text-indent: -1000px;
width: 100px;
height: 100px;
overflow: hidden;
background: url('turk_bayragim.gif') no-repeat 0 0;
}

vermiş olduğum kodu sayfanıza

<style type="text/css">
</style>

tagları arasına ekleyip yada kendi css'iniz üzerine ekleyin
daha sonra resminizin  hangi sayfalarda gözükmesini istiyorsanız aşağıdaki div tanımlamasını sayfanıza ekleyin
<div id="vampire_ressim"></div>
tagları eklemeniz kafi artık eklediğiniz resim ki ben ülkemizin bayrağını ekledim artık sayfalarımın sol üst köşesinde sabit bir şekilde kalıyor :)

 kod üzerinde bir kaç belirtmek istediğim nokta var benim kullandığım bayrak 100*100 olduğundan dolayı ben css kodum üzerinde genişlik ve yükseklik değerlini 100px olarak verdim siz başka resimler kullanacağınız zaman bu değerlere dikkat ediniz resminize göre ayarlarsınız

Sonuç itibari ile herhangi bir sorunla karşılaşmadan kaymayan div'i elde etmiş olacaksınız bu kodu daha fazla geliştirerek daha güzel işlevler yapabilirsiniz

Saygılarımla
Vampire

vampire 10.11.2007

---

Rating : 10 üzerinden 7.71

0 - Daha kötü olamazdı 1 - Çok kötü 2 - Kötü 3 - Kötüye yakın 4 - Vasattan kötü 5 - Vasat 6 - Vasattan iyi 7 - İyiye yakın 8 - İyi 9 - Çok iyi 10 - Daha iyi olamazdı

---

Tümünü Göster / Sadece Başlıklar Yorumlar Ali Gereksiz IE6 tarafından desteklenmeyen bir kod. Gereksizdi kanımca   Vampire !!! Kod sadece ie7.0 da problemli çalışıyor onun haricinde tüm browserlarda görüntüleme motoru ne olursa olsun tam işlevini yerine getiriyor bunun yanında gereksizliği projeye göre değişir bir haber portalı hazırlıyorsanız yada reklam içeriği fazla olan ancak reklamların kaymasını istemediğiniz bir projede fazlası ile işinizi görecek bir kod.Günümüzde fazlası ile tercih edilen bir yöntem ancak yorumunuza saygılıyım teşekkürler   anov Güzel ipucu, ancak text-indent neden? Güzel bir ipucu ve hemen her komutun ne işe yaradığı açık, ancak text-indent komutu dışında, ben bu direktifin burada neden kullanıldığını anlamadım. Kolay gelsin.   Vampire Şunun İçin Öncelikle Yorumun İçin teşekkürler indent kullanmamın sebebi aslında tam işlevi yerine getirmesede dikkat edersen yada kodu test ettiğin zaman sol yada sağ tarafında var olan linkleri disable ediyor bunun önüne geçmek için indent kullandım ancak her zaman işe yaramıyor bi tarayıcıda çalışırken diğerinde çalışmıyor :(   kGlz ipucu text-indent: -1000px; yerine float:"left" şeklinde denedinmi?ben denemedim de bu şekilde yapınca belki istediğin gibi çalışır. birde neden iki kere position kullandın.sadece position:"fixed" demen yeterli değilmiydi? Kolay gelsin.   mehmet FeNERCAFe arkadaşım bu koddaki konum değeri hangisidir ?? resmin bulunduğu yer değişmiyor   Sercan Güzel Ama.. ie6 da problem veriyo bu tür şeyler bunu nasıl aşabiliriz?   Osman Arslan Cross Browser Desteği Bu css kodunu tüm browserlar için uyumlu hale getirebilirseniz çok makbule geçecek. Teşekkürler.   Vampire Cevaben ! Arkadaşlar malumunuz olmayabilir ancak ie markalı tarayıcıların css noktasında çok eksiği var ancak son çıkan ie sürümünde bu sorunların bir çoğu aşılmaya çalışılmış . Şu anda sorun yaşadığınız noktaları forumlarımızda belirtmeniz halinde sizlere daha rahat yardımcı olabilirim   recep ivedik css Konu yazarı arkadaş! ie6 position:fixed; komutunu tanımaz ve çalıştırmaz. Bunun için javascript ile scrollHeight metodu kullanılıyor. Divinizin top değerine bu metodun döndüreceği değeri eklerseniz yapışkan diviniz iede çalışır olacaktır. overflow komutu, eğer içeriğimiz bir divin sınırları içine sığmıyorsa kaydırma çubuğu işlemlerini ayarlar. Burada kullanımı gereksiz olmuş. Yine birisinin değindiği gibi absolute parametresine de gerek yoktu.

---