Go Dilinde Concurrency

2,183 More

Projedeki Git Dosyaları Nasıl Silinir?

1 7,664 More

yTheme

4 2,658 More

Sunucu Güvenliği | SSH (Secure Shell) Kullanımı

2 2,108 More

Truemag

  • PHP
  • Golang
  • Laravel
  • Linux
  • SQL
  • SEO
  • WordPress
  • Diğer
    • Yazılım
    • Javascript
    • Css/XHtml/W3C
    • Genel
    • Tanıtım
    • Ajax
  • Home
  • ANASAYFA
  • HAKKIMDA
  • SPONSORLUK
  • ARŞİV
  • İLETİŞİM
  • BENİMLE ÇALIŞMAK İSTER MİSİNİZ?

HTML Listeleme Etiketine Görsel Eklemek

Sitelerimizde gerek menülerde, gerekse yazılarımız içinde bazen listeleme yapma ihtiyacı duyarız. Tabi listeleri tasarımımıza uygun şekilde güzelleştirmek de isteriz. İşte bu noktada en çok kullanılan yöntem liste etiketine bir arkaplan resmi atamak ve bu resmi en sola dayamaktır. Not olarak şunu da belirtmeliyim ki bu yazımda sıralı olmayan listelerden (ul) bahsediyorum. Şimdi basit iki örnekle konuyu inceleyelim.

HTML Kodumuz

Aşağıdaki kodumuzda her öğeye bağlantı (link) verdim ki üzerine gelindiğinde görselin değişimesinin de nasıl yapıldığını görelim.

XHTML
1
2
3
4
5
6
7
8
9
<div id="yakuter">
<ul>
<li><a href="anasayfa.html" title="Anasayfa">Anasayfa</a></li>
<li><a href="hakkimizda.html" title="Hakkımızda">Hakkimizda</a></li>
<li><a href="arsiv.html" title="Arşiv">Arşiv</a></li>
<li><a href="yardim.html" title="Yardım">Yardım</a></li>
<li><a href="iletisim.html" title="İletişim">İletişim</a></li>
</ul>
</div>

Not 1: Eğer amacınız içeriğinde bağlantı olan listeleme etiketlerini biçimlendirmekse 2. yöntemi kullanmanızı tavsiye ederim çünkü 1. yöntemde kullanılan li:hover özelliği IE 6‘da desteklenmeyen bir husus. Genel olarak ise tavsiyem 1. Yöntemi kullanmanızdan yanadır çünkü içinde bağlantı (link) olmayan etiketleri de kapsar.

Not 2: Görsel olarak iki farklı nesne kullandım (ikon.gif, ikon2.gi). Dilerseniz bu iki görseli birleştirip CSS Sprite Tekniği ile de aynı uygulamayı gerçekleştirebilirsiniz.

CSS Kodumuz – 1. Yöntem “li” Etiketini Biçimlendirmek

Aşağıdaki kod ile yapmış olduğumuz olay listeleme etiketinin standart liste tipini iptal edip (list-style-type:none;), istediğimiz bir arkaplan resmi atamak ve bunu en sola dayamak.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#yakuter ul li {
list-style-type:none;
background:url(../resimler/ikon.gif) left center no-repeat;
padding:5px 0px 5px 25px;
}
#yakuter ul li:hover {
background:url(../resimler/ikon2.gif) left center no-repeat ;
}
#yakuter ul li a {
text-decoration:none;color: #006400;
}
#yakuter ul li a:hover {
color:#666666;
}

CSS Kodumuz – 2. Yöntem “a” (link) Etiketini Biçimlendirmek

Aşağıdaki kodun işlevi ise li etiketini değil, “li” etiketi içinde bulunan “a” etiketini biçimlendirmek. Böylece IE 6‘da da fare ile üzerine gelindiğinde resmi değişen bir liste sahibi oluyoruz.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#yakuter ul li {
list-style-type:none;
}
#yakuter ul li a {
display:block;
background:url(../resimler/ikon.gif) left center no-repeat ;
padding:5px 0px 5px 25px;
text-decoration:none;
color: #006400;
}
#yakuter ul li a:hover {
background:url(../resimler/ikon2.gif) left center no-repeat ;
color:#666666;
}

Örneği [Test Edin] [İndirin]

Sonuç

Aslında listeleme etiketlerine resim eklemek için list-style-image özelliği de kullanılabilir fakat bu özelliği dilediğimiz gibi özelleştiremediğimiz için arkaplana resim atama tekniği daha fazla kullanılıyor.

Umarım bu basit ama bir o kadar da etkili yöntem ile siteleriniz daha da güzelleşir. Saygılar, sevgiler…

May 16, 2010Erhan Yakut
Cloud Sunucu


hosting

Webgrup Hosting İndirim KuponujConfirmAction | jQuery Onay Kutusu
You Might Also Like
 
Tarayıcı Uyumluluğu İçin CSS Sıfırlama
 
CSS3 Başlangıç
Erhan Yakut
10 years ago 7 Comments Css/XHtml/W3CCSS dersleri, CSS listeleme etiketi, Css/XHtml/W3C6,995
Sponsorlar

sponsor

sponsor

sponsor

sponsor
Bağlantılar
  • Beyazıt Kölemen
  • Domatessuyu
  • Lezzetli Robot Tarifleri
  • Ofizzo
  • PHP Dersleri
  • Wordpress Hosting
Random Posts
Webit Kongresi Evrensel Devler Mücadalesi 2013
Bilmeseniz de Olur Bilgiler
CentOS Linux | Zip Uzantılı Dosyaları Açmak
Go ile Büyük JSON Dosyalarını Okuma
Sitenizin İstatistiğini Tutun
sdafasdf
Hakkımda

Bilişim Teknolojileri alanında içerik üretmek üzere oluşturulmuş olan Yakuter.com 2006 yılında Erhan Yakut tarafından hayata geçirilmiştir. devamını okuyun…

CLOUD SUNUCU DESTEĞİ
2006-2020 © Yakuter