İmaj Yerine Koyma Teknikleri -3 (GL)

İmaj Yerine Koyma Teknikleri -3 (GL)

Serimizin bu üçüncü yazısında İmaj Yerine Koyma Tekniklerinden Tom Gilder ve Levin Alexander tarafından geliştirilen Gilder/Levin Tekniği ile devam edeceğiz. Klasik FIR ve Phark Tekniğine göre daha başarılı olan bu teknik ile tarayıcıda CSS özelliğinin açık, imaj özelliğinin kapalı olduğu durumda yaşamış olduğumuz sorunu da aşmış oluyoruz. Nasıl mı? İncelemeye başlayalım.

Gilder/Levin Tekniği

Geliştirilen bu teknik, bir blok tip eleman içerisinde oluşturulan içi boş <span> etiketinin, blok tip eleman içerisindeki yazının üzerine bir katman olarak gelmesi ve yazının üzerini kapatması ilkesine dayanır. Hızlıca içeriğimizi hazırlayalım.

<h1>
<span></span>Yazı Başlığı
</h1>

Şimdi de CSS kodumuzu yazalım.

h1{
font-size:1.6em;
height:30px;
position:relative;
width: 150px;
overflow:hidden;
}
h1 span {
background:url(resim.gif) no-repeat;
position:absolute;
height:100%;
width:100%;
}

Burada gördüğünüz üzere <h1> etiketi içerisindeki boş <span> etiketine, yazının yerine koymayı düşündüğümüz arka planı döşüyoruz.<span> etiketini position:abosulte; ile <h1> etiketine göre konumlandırarak yükseklik ve genişliği 100% atıyoruz. Böylece  <span> etiketinin, yazının üzerini tamamen kapatmasını sağlıyoruz.

FIR ve Phark Tekniğinin aksine, yazınsal içerik olduğu yerde durmaya devam ediyor. Ufak bir hile ile yazının <span> etiketinin altına saklanmasını sağlıyoruz.

Uygulamanın son halini buradan görebilirsiniz.

Bu teknik ile ekran okuyucular tarafından okunamama ve arama motorları tarafından indekslenememe sorunlarını aştığımız gibi, diğer iki teknikte aşılamayan tarayıcı imaj özelliğinin kapalı, CSS özelliğinin açık olması durumunda yaşanılan problem de aşılmış oluyor.

Sorunlar

Bu teknikteki problemimiz ise; eğer transparan bir imajı arka plan olarak kullanmak istersek ortaya çıkıyor. Ek olarak Phark Tekniğinin aksine anlamlı olmayan bir <span> etiketini fazladan kullanmak durumunda kalıyoruz. Ama yine de bu teknik, diğer iki tekniğe göre daha sağlıklı görünüyor.

Hemen Paylaş!
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Live
  • MySpace
  • LinkedIn
  • Technorati
  • Netvibes
  • FriendFeed
  • Reddit
  • Yahoo! Bookmarks

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.

Yorumla Bakalım

Yorumlara Git

Daha Fazlasını Oku!

Makale Detayı

Bu Makale için toplam 0 adet yorum bulunmaktadır...

Bu Makale 11 February, 2009 ve saat 5:34 itibariyle CSS kategorisi altına kaydedilmiştir. Bu makale ile ilgili yorumları RSS 2.0 beslemesinden takip edebilirsiniz.. Bu makale için yorum yapabilir, veya kendi web sitenize trackback sağlayabilirsiniz...

Yorumla

Yorumunuzu ve katkılarınızı sabırsızlıkla bekliyoruz :)

Yukarıya Çık