CSS ile Linklere Otomatik Icon

Web masterların , html designer ların en büyük korkulu rüyası demek istemesem de bazen cross browser siteler yaparken css en büyük zamanımızı alan bir kabustur CSS.

Bu konuda çok profesyonel arkadaşlarım bulunmasına rağmen onlar bile bazı projelerde ve anlarda css le sorun yaşadıklarını itiraf ediyorlar.

Css ile sitemize eklediğimiz dökümanların iconlarınıda yanlarında göstermek istiyorsak css ile mümkünatı var tabiki. Nasılmı ?
Bütün programlar örneğin Word,Excel,Quictime,Flash vb.. programların iconlarını hyperlinkimizin yan kısmında gösterebiliriz.

ilk olarak linkimizi oluşturuyoruz

<a href="dokumanlar/butce12.pdf">Aralık Ayı Bütçe Raporu</a>

İkinci Aşamada PDF uzantılı dosyamız için olusturacağımız css kodu aşağıdaki gibi olmalıdır.

a[href $='.pdf'] {
 padding-right: 18px;
 background: transparent url(icon_pdf.gif) no-repeat center right;
}

Bu kodu uygulamamız da kullanmak istediğimiz bütün program iconları için yapmamız gerekecektir. Ve doğal olarak iconlarınıda images klasörü altına atmamız gerekecektir.

Yanıt Yaz