‘:hover’ etiketi için sonuçlar
Arayüz Geliştiriciler(HTML-ci) Tasarımcıdan Ne İster?
Temmuz 31st, 2010 • 21 yorum CSS, XHTML
Etiketler: :active, :hover, akış şeması, arayüz geliştirici, focus, İkon, kaynak dosyalar, png, psd, tasarımcı
Web Sitesi Hakkında Bilgi ve İçerik Toplama Süreci – Tasarım Süreci – HTML/CSS/JS Süreci – Programlama Süreci – Test ve Yayına Alma Süreci
Genel bir web sitesinin oluşum aşamaları genel hatları ile yukarıdaki gibidir.
Bir web sitesinin evrelerinden birisi; Tasarımı bitmiş web sitesinin Arayüz geliştiriyiciye (HTML-ci) teslim etmesidir. İyi bir web sitesi çıkarmak için çok iyi bir ekibe sahip olmak gerektiğini çeşitli platformlarda değinmiştim. Bu ekipte en çok iletişimde olması gereken iki kişi veya iki bölüm tasarım ve arayüz geliştiricileri arasında olmalıdır. Tasarımcı ve arayüz geliştirici arasındaki iletişimin sağlam olması projenin sağlığı açısından önemlidir. Hadi programcılarıda kızdırmayalım onlarda olmazsa olmaz.
Bir arayüz geliştirici olarak tasarımcıdan beklentilerimiz var tabiki. Aynı şekilde Tasarımcının ve programcının da çeşitli beklentileri olabilir. Ancak ben burada kendi açımdan bakarak bir tasarımcıdan beklentilerimin ne olduğunu yazacağım. Okumaya devam edin »
İE6 sorunu: Bağlantı içi elemanlarda hover sorunu
Mayıs 11th, 2010 • 6 yorum CSS
Etiketler: :hover, bağlantı içi, ie6, sorun
Yine bir ie6 sorunu ile karşı karşıyayız. Evet proje biraz dallı budaklı olunca ie6 sorunları başa bela olmaya başladı. Normal standart site tasarımında sorunlar belli idi, ona göre kod yazıyordum, ancak şimdi proje normal site şablonlarından farklı olunca sorunlarda çalışmadığımız yerleden glemeye başladı.
Gelelim sorunun ne olduğuna; sorun şudur ki zemininden resim olan genişleyebilir alanlarda kullandığımız bir yöntem olan Sliding Doors(aynı yöntemi şurada da kullandım) yaptığım bir alanda hover efekti vermeye çalıştığımda karşılaştığım bir sorun. Daha kolay anlaşılmasıması ve benim içinde anlatması kolay olduğu için kaynaklardaki bir örneği vereceğim burada size ben.
HTML kodu
<div> <a href="#">foo<span>bar</span></a> </div>
CSS Kodu
span {
display: none;
}
a:hover span {
display: inline;
}
Örneği görmek için tıklayınız.
Burada yapılan çok basit bir iştir. Bağlantı üzerine gelince span içindeki bar yazısını gösteriyoruz. Ancak ie6′da bu sayfaya baktığımızda bar görüntülenmeyecektir.
Peki çözüm nedir?
Sorun hasLayout sorunu gibi görünsede genel hasLayout çözümleri pek işe yaramıyor. Haslayout sorunları ie6 ve ie7 de görülür, ancak Microsoft bu sorunu ie7 çözmüş görünüşe göre.
friendlybit.com sitesindeki çözüm yolu şöyle; a:hover elemanına padding-top:0 değeri atayıp sonrada a:hover span seçicisinede padding-top:0 değeri atayınca oluyor.
a:hover{
padding-top:0;
}
span {
display: none;
}
a:hover span {
display: inline;
padding-top:0;
}
Örneği görmek için tıklayınız.
