z_ARŞİV YAZILAR

IE 6 ve Position Fixed Problemi

Makaleyi dinlemek ister misiniz?

 

Kişisel sitemi yeniledim. Bu yenileme sırasında en büyük sıkıntıyı IE6 uyumlu olsun diye yaşadım. Modern diyebileceğim Firefox, Opera ve Internet Explorer 7 kullanıcıları gayet güzel görüyorlardı. Sorun, bir nesnenin (benim için menüydü) ekrandaki diğer öğeler kaydırılırken sabit tutulması.

Normalde CSS ile bir Div tanımlarken


 

position:fixed; komutu istediğiniz bir öğeyi yerinde sabitler. Diyelim ekranın en üstünde solunda tutar. Böylece sayfa aşağı kayarken bir menü veya banner sabit tutulabilir.

Ancak bu kod IE6 için işe yaramaz.

Benim portfolyo sitemde içerik aşağı değil otomatik olarak sağa kaydırıldığından webde bulunan bir çok çözüm işe yaramadı. Sonunda garip bir çözüm uyguladım. İki CSS dosyası hazırladım. IE6 için ve diğer tüm browserlar için. Önce modern browserlar için yazdığım CSS dosyasını test ettim. “Tamam” dedikten sonra onu çıkarıp, IE6 için yaptığım CSS dosyasını denedim ve IE6 ile baktım. Bu seçimi otomatik yapılması için HTML dosyama şöyle aktardım.


 

işte ikinci satır eğer ziyaretçim IE7’den daha eski bir browser kullanıyorsa devreye giriyor.

Sonra ilk olarak position:fixed; yerine position: absolute; kullandım. Ancak içerik, dediğim gibi aşağı değil, sağa kaydığından önerilen çözüm çuvalladı.
Böylece 3 günlük deli uğraşıdan sonra çözümü buldum. Bu yazıyı yazma nedenim de budur. Belki arayan çıkar ki, webde bulmak oldukça zor. Belki ne aradığınızı bilseniz saniyede bulursunuz ama 🙂

Sabit tutmak istediğiniz nesneyi kaydırma alanında ekranda görünen alanın o andaki koordinatlarını buldururarak left ve top değerlerini vermelisiniz. Ne demek şimdi bu? Eğer top ve left’e sıfır değerini veriyorsanız, bu değerleri ekran sabit koordinatı değil, sayfanın koordinatı kabul ediyor IE6 ve sayfa kaydırma çubuklarıyla kaydırılınca nesneyi kaydırıyor. Bunun yerine bir formül ile koordinat veriyoruz.


 

Yukardaki IE6 için yazdığım CSS dosyama eklenen kod sizi dinamik olarak hep sola ve üste alır. Bu kod sadece IE6 uyumludur. Çünkü zaten sorunu olan odur 🙂
document.documentElement.scrollLeft+0+”px” ifadesinde sıfır yerine koyacağınız rakam kadar soldan uzaklaşacaktır. Top için de aynısı yapılır.

Sonuç olarak IE6 için aynı div CSS’de aşağıdaki gibi tanımlanır.
HTML’ye CSS seçici kodu eklemeyi unutmayın.


 

Uzun lafın kısası beni çok uğraştırdı ama sanırım güzel bir portfolyo sitem oldu. 🙂
www.suleymansonmez.com


Kaynakça:

Expression örnekleri
http://webfx.eae.net/dhtml/cssexpr/cssexpr.html

Youtube Kanalıma Abone Olun

https://www.youtube.com/suleymansonmez1?sub_confirmation=1

Podcast Kanalım

Hangi platformu kullanıyorsanız, birini seçip takip edebilirsiniz, aynı içeriğe erişeceksiniz.

Süleyman Sönmez'in Sessizliği

LinkedIn Ekleyin:

https://www.linkedin.com/in/suleymansonmez

Instagram Takip Edin:

https://www.instagram.com/suleymansonmez/

Facebook Takip Edin:

https://www.facebook.com/suleymansonmezofficial

Twitter Takip Edin:

https://twitter.com/ssonmez

Yazdığım E-Kitaplar - Satın Alın

https://play.google.com/store/books/author?id=S%C3%BCleyman+S%C3%B6nmez

Patreon ile destekleyin

https://www.patreon.com/suleymansonmez

Etiketler

Süleyman Sönmez

Adım Süleyman Sönmez. Yıldız Teknik Üniv. Bilgisayar Programcılığı ve İstanbul Üniversitesi İşletme Fakültesi olmak üzere iki üniversiteden mezun oldum. Sonrasında başladığım Uluslararası İşletme masterını terk edip hayata atıldım. Proje yöneticiliği, bilgisayar programcılığı, sistem analistliği, pazarlama / satış sonrası müşteri ilişkileri yöneticiliği, LEGO takım koçluğu, Web tasarımcılık, fotoğrafçılık, ISO9001:2000 kalite sistemleri sistem kuruculuğu ve iç denetimcilik, Teknoloji Okuryazarlığı müfredat yazarlığı, Bilgi İşlem Bölüm Başkanlığı, öğretmenlik, video düzenleme, Eğitim Teknolojileri Uzmanlığı gibi birbirinden farklı pek çok meslekte çalıştım. Bu kadar farklı iş neden? Dünyayı Da Vinci gibi yaşamak gerektiğine inanıyorum. Youtube kanalıma abone olarak takip ediniz. Youtube Web sitelerim: www.suleymansonmez.com , Büyükler Giremez Bana ulaşmak için lütfen ssonmez@gmail.com adresine eposta gönderin. Aşağıdaki simgelerden sosyal medya üzerinden takip edebilirsiniz. Twitter Instagram Linkedin Facebook

10 Yorum

  1. Sitenizi Firefox’da mouse scroll’u yardımı ile gezmeye çalıştığımda bir nevi çalışmıyor diyebilirim.
    Ayrıca, tam ekran haricinde kullanıp sayfayı boyutlandırdığımda herhangi bir scroll çıkmıyor gene karşıma.

    Sorun bir başka şekilde devam ediyor anlaşılan.
    (:

  2. M. Ömer Gölgeli zaman ayırıp portfolyo sitemi gezdiğiniz için telekkür ederim.

    Öncelikle söyleyeyim genel web tasarımlarımda, basit, anlaşılır ve herkes için kolay kullanılır tasarımları yeğlerim. Bkz ( http://www.mihrace.net )

    Ancak portfolyo sitesi farklı bir şeydir. Onda geleneksel menü, geleneksel bilgi vermek, bir web tasarımcı için çok sıkıcıdır. Öyle bir site bir kaç günde yapılır biter. Bu işe başladığımda yaptığım sitem öyleydi. Sonraları Flash tabanlı sayfaları çevrilen kitap bir site yaptım. Bir kaç yıl da öyle gitti.

    Son yaptığım portfolyo sitem ise çok iyi planlamadan sonra başladı.

    Bu nedenle gezdiğinizde sanırım bazı şeylere dikkat edemediniz. Söylediğiniz engellemeleri bilinçli bir şekilde yaptım.

    Scrollbarları dikkat ederseniz bilerek gizledim ve mouse ile olan geleneksel aşağı kaydırma efektini bozdum 🙂 Garip değil mi evet .

    Çünkü amacım kullanıcının soldaki renkli fotoğraf menünün sıradışılığını az rastlanırlığını hemen farketmesi ve her bir parçanın bağımsız olduğunu anlamasaydı.

    İkincisi pek çok kişinin Firefox desteğini kenarından tutarak yaptığı yerde özellikle Firefox hatta Opera uyumluluğunu aradım.

    Bir çok portfolyo sitesi bırakın tam ekranı herşeyi kaplayan tek bir sayfa açar. Çünkü portfolyo siteleri genele hitap etmez. Sizin müşteriniz ya da ziyaretçiniz sizi incelemeye gelir. Karşısında sıradışı bir şey arar.

    Peki bu yaptığım site beğenildi mi? Evet 🙂 Benzer siteler yapmam için teklif isteyen ziyaretçilerim oldu ve sanırım IE kullanıyorlar (!) bol bol tebrik aldım.

    Eleştirileriniz için teşekkür ederim. Ama anlaşılmak ve sıradan mı olmak ya da sıradışı ve yeni olmak mı diyorsanız. Oyumu ikincisine kullanıyorum. Scroll yok. Küçük pencere yok. 😉 Hatta gerekirse uyumluluk bile yok. Bazen sanat anlamak isteyenedir.

  3. Merhabalar; Öncelikle position:fixed problemi hakkında yazmış olduğunuz bu makale çok işime yaradı. Bu tarz deneyimleri paylaşan çok az insan var. Benim için hayati sayılabilecek bir projede kullandım. Aslında Fixed elementler çok uygun olmasa da mecburen kullanılması gereken yerler var.

    Ayrıca ” Yaptığım işler öne çıktı” kısmına pek katılmıyorum (Web Yazılım firma sahibi olarak ve Bir web yazılımcısı olarak). Ben yaptığınız işleri pek anlaşılır bulamadım. Blog yazılarınızla iç içe referansmı yoksa blog yazısımı zor ayırt ediliyor. Bence o kısmı tekrar elden geçirmelisiniz. Görsele bir şey diyemiyorum. Kişisel zevkiniz 🙂 Tekrar teşekkürler. Eleştirilerim yanlış anlaşılmaz umarım.

  4. Mehmet Kurt bu yazı yazıldığında bayağı sanatsal bir sitem vardı. Sonra basit olsun anlaşılır olsun görüşüyle o siteyi kaldırdım yerine şimdiki hali getirdim. Yani bu yazıda geçen site görünüşü o değil. Ben de bu ara bir yenilik düşünüyorum. Daha güzel bir portfolyo sitesi.

  5. Merhaba Süleyman Bey,
    Yazınız çok yardımcı oldu bana.
    Verdiğiniz çözümü uyguladıktan sonra yüzde yüz uzattığım bir div içinde kullandığım fixed eleman IE 7 de bu koddan etkilendi ve alakasız bir yerde göründü ayrıca Firefox 3’te hata verdi.
    Ben de sizin kodu tüm Explorer sürümleri için uygulayıp Firefox’a ayrı aşağıdaki gibi bir tanımlama yaptım. Belki bu da birilerinin işine yarar:)

    #leftsider , x:-moz-any-link, x:default {
    position:fixed
    float: left;
    width: 579px;
    background-color: #000000;
    left: expression(document.compatMode==”CSS1Compat”? document.documentElement.scrollLeft+0+”px” : body.scrollLeft+”px”);

    top: expression(document.compatMode==”CSS1Compat”? document.documentElement.scrollTop+0+”px” : body.scrollTop+”px”);

    cursor: pointer;

    }

    İyi çalışmalar.

  6. Süleyman bey, elinize dilinize sağlık yahu. 🙂 Şu “IE6” saç baş yoldurur adama…

    Paylaşım için teşekkürler…

  7. Paylasım için sagolun fixed olayı pek işime yaramadı ; kısmen çalısmakta ama scrolla hareket ettirdiğimde birkaç pixel kayıyor ama yine çakılıyor
    bu arada ie6 ile siteneze bakmaya çalıştığımda sitenin dagıldıgını goruyorum bilginize ;
    çok emin değilim benim kullandıgım scriptlerden kaynaklanıyo olabilir
    yinede paylasım için sagolun en azından bilgi edindim .

  8. Çok teşekkür ederim bu güzel yazı için Süleyman Sönmez abi. Her yerde aradım fakat bir türlü bulamadım şu internet explorer için olanını. Sayende artık web sitemin yeni grafik çalışmalarına başlayabileceğim. Allah razı olsun…

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu
Kapalı