Css İle Kaymayan Div

10 Kasım 2007 | Kategori: PROGRAMLAMA | Yazar:

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ınArkadaş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

Arama Terimleri:

css ile kaymayan, css ile sağ üst köşeye ikon eklemek, divlerin kaymaması, divlerin kaymaması için ne yapılır, sitenin köşesinde sabit bayrak, sitenin sol köşesinde div, siteye sabit bayrak

ceviz.net

Yazar - 10 Kasım 2007. Kategori PROGRAMLAMA. Bu yazıya yazılan yazıları RSS üzerinden takip edebilirsiniz RSS 2.0. Yorum yazabilir veya geri izlemede bulunabilirsiniz.

"Css İle Kaymayan Div" için yapılan toplam yorum - 11

Ali 01 Ocak 2003 - 00:00

IE6 tarafından desteklenmeyen bir kod.
Gereksizdi kanımca

Cevapla
Vampire 01 Ocak 2003 - 00:00

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

Cevapla
anov 01 Ocak 2003 - 00:00

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.

Cevapla
Vampire 01 Ocak 2003 - 00:00

Ö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

Cevapla
kGlz 01 Ocak 2003 - 00:00

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.

Cevapla
mehmet 01 Ocak 2003 - 00:00

arkadaşım bu koddaki konum değeri hangisidir ?? resmin bulunduğu yer değişmiyor

Cevapla
Sercan 01 Ocak 2003 - 00:00

ie6 da problem veriyo bu tür şeyler bunu nasıl aşabiliriz?

Cevapla
Osman Arslan 01 Ocak 2003 - 00:00

Bu css kodunu tüm browserlar için uyumlu hale getirebilirseniz çok makbule geçecek. Teşekkürler.

Cevapla
Vampire 01 Ocak 2003 - 00:00

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

Cevapla
recep ivedik 01 Ocak 2003 - 00:00

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.

Cevapla
blt 01 Ocak 2003 - 00:00

bence onla ugrasasagına dırek ajax always visible extender koyman cok daha mantıklı

Cevapla

Bir Cevap Yazın Cevabı iptal et