lostyazilim
tr.link

Css ile resimli listeleme

14 Mesajlar 4.530 Okunma
acebozum
tr.link

Konyali Konyali furkan.konyali@gmail.com Kullanıcı
  • Üyelik 09.04.2011
  • Yaş/Cinsiyet 31 / E
  • Meslek Front-end Developer
  • Konum İstanbul Anadolu
  • Ad Soyad F** K**
  • Mesajlar 1043
  • Beğeniler 130 / 62
  • Ticaret 5, (%100)
Bilindiği üzere [COLOR=black]CSS[/COLOR] ile maddeleme veya listeleme yapılırken [FONT=Lucida Console][COLOR=#0b8a74]
    [/COLOR][/FONT] ve [FONT=Lucida Console][COLOR=#0b8a74]
      [/COLOR][/FONT] elementleri kullanılır. [FONT=Lucida Console][COLOR=#0b8a74]
        [/COLOR][/FONT] kullanıldığında 1'den başlayarak aşağıya doğru size bir liste hazırlar. Bunun dışında [FONT=Lucida Console][COLOR=#0b8a74]
          [/COLOR][/FONT] kullanıldığında ise maddeleme olarak bir liste oluşacaktır.

          Düz bir şekilde, stilde herhangi bir değişiklik yapmadan listeleme yapıldığında aşağıdaki gibi bir görüntü oluşur.



          İşte bu listemizin sol tarafındaki siyah maddeleme işaretlerinin yerine bir resim koymak istiyoruz. Bu işlemi [FONT=Lucida Console][COLOR=#0b8a74]list-style-image[/COLOR][/FONT] CSS kodu ile yapıyoruz. Kullanımı aşağıdaki şekildedir.

          [COLOR=black]ul { list-style-image:url
          ('http://i41.tinypic.com/10rk5ua.jpg'); }
          [/COLOR]

          Bu kodu stil dosyamıza ekledikten sonra şu şekilde bir görüntü ortaya çıkıyor.



          Peki hiç bir madde işareti görmek istemiyorsak?
          Bu durumda [FONT=Lucida Console][COLOR=#0b8a74]list-style-image:none;[/COLOR][/FONT] olarak belirlemeliyiz. None ifadesi kullanıldığında herhangi bir işaret görünmez. Bu kullanım da oldukça yaygındır.
          Resimin dışında alternatif olarak yuvarlak, içi boş yuvarlak veya kare biçimde de listeleme işlemi yapılabilir. Bu işlem [FONT=Lucida Console][COLOR=#0b8a74]list-style-type[/COLOR][/FONT] ile yapılabilmekte.
          ul {list-style-type:disc;} dediğimizde içi dolu bir yuvarlak ile listeler, ki bu varsayılan değerdir.
          ul {list-style-type:circle;} dediğimizde içi boş yuvarlak ile listeler.
          ul {list-style-type:square;} dediğimizde ise isminden de anlaşılacağı gibi kare olarak listeleme yapacaktır.
 

 

elektronikssl
webimgo

StaLker StaLker Cep Telefonu Kullanıcı
  • Üyelik 14.03.2011
  • Yaş/Cinsiyet 36 / E
  • Meslek Cep Telefonu
  • Konum İstanbul Avrupa
  • Ad Soyad M** K**
  • Mesajlar 512
  • Beğeniler 1 / 6
  • Ticaret 2, (%100)
Faydalı Paylaşım Teşekkürler Kardeşim.
 

 

Konyali Konyali furkan.konyali@gmail.com Kullanıcı
  • Üyelik 09.04.2011
  • Yaş/Cinsiyet 31 / E
  • Meslek Front-end Developer
  • Konum İstanbul Anadolu
  • Ad Soyad F** K**
  • Mesajlar 1043
  • Beğeniler 130 / 62
  • Ticaret 5, (%100)
Rica ederim @StaLker
 

 

bd bd WM Aracı Kullanıcı
  • Üyelik 26.10.2010
  • Yaş/Cinsiyet 34 / E
  • Meslek 2
  • Konum Manisa
  • Ad Soyad B** D**
  • Mesajlar 4926
  • Beğeniler 784 / 3953
  • Ticaret 18, (%100)
Güzel bir anlatım olmuş. Böyle konulara ihtiyacımız var. +tb
 

 

wmaraci
wmaraci

Konyali Konyali furkan.konyali@gmail.com Kullanıcı
  • Üyelik 09.04.2011
  • Yaş/Cinsiyet 31 / E
  • Meslek Front-end Developer
  • Konum İstanbul Anadolu
  • Ad Soyad F** K**
  • Mesajlar 1043
  • Beğeniler 130 / 62
  • Ticaret 5, (%100)
Ben teşekkür ederim.
 

 

AlpEreN AlpEreN Sms Onayı Gerekli Banlı Kullanıcı
  • Üyelik 28.03.2011
  • Yaş/Cinsiyet 37 / E
  • Meslek Öğretmen
  • Konum
  • Ad Soyad A** S**
  • Mesajlar 633
  • Beğeniler 0 / 3
  • Ticaret 0, (%0)

Burak Dülgar adlı üyeden alıntı

Güzel bir anlatım olmuş. Böyle konulara ihtiyacımız var. +tb


Teşekkürler gerçektende.. CSS de ben bunu arka plan olarak belirleyip padding ayarları ile yapıyordum ama sanırım bu daha güzel..

Saygılarımla...
 

 

ykgungor ykgungor WM Aracı Kullanıcı
  • Üyelik 31.03.2011
  • Yaş/Cinsiyet - / E
  • Meslek
  • Konum
  • Ad Soyad ** **
  • Mesajlar 77
  • Beğeniler 0 / 1
  • Ticaret 0, (%0)
Evet çok güzel eline sağlık
 

 

Konyali Konyali furkan.konyali@gmail.com Kullanıcı
  • Üyelik 09.04.2011
  • Yaş/Cinsiyet 31 / E
  • Meslek Front-end Developer
  • Konum İstanbul Anadolu
  • Ad Soyad F** K**
  • Mesajlar 1043
  • Beğeniler 130 / 62
  • Ticaret 5, (%100)
Rica ederim.
 

 

Berkay Berkay WM Aracı Kullanıcı
  • Üyelik 29.04.2011
  • Yaş/Cinsiyet 30 / E
  • Meslek Wordpress Geliştirici
  • Konum Mersin
  • Ad Soyad B** G**
  • Mesajlar 1863
  • Beğeniler 90 / 337
  • Ticaret 27, (%100)
Gerçekten Çok Yararlı Bir Konu Çok Teşekkürler +tb
 

 

Konyali Konyali furkan.konyali@gmail.com Kullanıcı
  • Üyelik 09.04.2011
  • Yaş/Cinsiyet 31 / E
  • Meslek Front-end Developer
  • Konum İstanbul Anadolu
  • Ad Soyad F** K**
  • Mesajlar 1043
  • Beğeniler 130 / 62
  • Ticaret 5, (%100)
Rica ederim kardeşim.
 

 

wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al