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
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.
(:
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.
Geçen zaman içinde fikrimi değiştirdim. Çok sade ve yaptığım işleri sunan bir arabirim tasarladım. Bu arabirim daha anlaşılır oldu. Yaptığım işler öne çıktı ve tüm browserlarla uyumlu.
http://www.suleymansonmez.com adresinden bakabilirsiniz.
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.
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.
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.
Ben de bir çözüm buldum webde buda işeyarar bişi sizinkine benziyor. http://snook.ca/archives/html_and_css/ie-position-fixed-opacity-filter
Süleyman bey, elinize dilinize sağlık yahu. 🙂 Şu “IE6” saç baş yoldurur adama…
Paylaşım için teşekkürler…
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 .
Ç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…