webdesiigner
🏅Acemi Tasarımcı🏅
- Katılım
- 8 Mar 2012
- Mesajlar
- 62
- Tepkime puanı
- 0
list item'lara(li) style(css) özelliği vererek yapabilirsiniz. Başka yolları da olabilir ama ben bu şekilde yapıyorum. Biraz daha açmak gerekirse, örneğin 32x32 lik bir ok resminiz(ok.png) olsun. li'lara soldan 32px padding verip backround'ına da ok.png resmini, tekrarsız yerleştirirseniz tüm li'larınızın başında ok olacaktır. Css konusunda bilginizin olduğunu varsayarak anlattım. Sıkıntı yaşarsanız daha basit bir açıklama da yapabilirim.
li lerin class larına arka plan verip adding yaparak yapablirsin galiba resimdeki de o şekil
kod şöyle
.listeler{
background:url(ok.png) top left no-repeat;
padding:10px;
}
yada dreamweaver kullanıyorsan css ekleme panelinde list bölümünde listelere resim ekleme bölümü var o şekilde de yapabilirsin
çok teşekkür ederim
rica ederim background resmi ve padding ençok kullanılan yöntemdir
altyazilar adlı class ul'e mi li'a mı ait. ul'e aitse neden 55px height verdiniz. altyazilar sanki li'lara aitmis gibi geldi bana. Yoksa ok.png adlı resmi arkaya döşemesi gerekiyor. Onun sonuna no-repeat eklerseniz 1 defa yerleştirir. Buyrun size çalışan bir örnek;
Html kodum:
<ul class="pweDid">
<li>Pohoshop Design</li>
<li>HTML - CSS</li>
<li>PHP - MYSQL</li>
<li>Javascript(Jquery)</li>
</ul>
resim yolu ve boyutları: images/tick.png 16x16;
Css:
.pweDid {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
}
.pweDid li{
background:url(images/tick.png) 0px 6px no-repeat;
width:180px;
padding:5px 0px 5px 20px;
font-size:0.9em;
}
Netice:
![]()
.altyazilar ul li{
}
yapmayı deneyin.
ul'lere class vererek deneyin bir de. Ayrıca html kodlarınızda bir şey dikkatimi çekti. Gribox classlı divlerinizin içinde sadece altyazilar classlı divleriniz var. Tek div ile halledilebilecek bir iş gibi duruyor. iç içe 2 div kullanmanıza gerek yok gibi.
li tagına padding, display:block bunları uygula bir de öyle dene.
Ya bu şekilde yardımcı olmam oldukça zor oluyo. Kodları görmeden ya da kurcalayamadan pek elimden birşey gelmiyo. Onun yerine sana şöyle bir yardımda bulunayım. İstediğin şeyi yapmaya çalıştım. Şöyle bir şey ortaya çıktı.
![]()
Bununla ilgili dosyaları da
https://hotfile.com/dl/162985577/e404e85/deneme.rar.html
adresine upload ettim. Burdan indirip inceleyebilir kafana göre düzenleyebilirsin.