Egen icon till <li>

5 svar · 344 visningar · startad av Emil RT 16 mars 2005

Emil RTMedlem sedan feb. 2004200 inlägg

Frågan16 mars 2005 10:15#1

Har denna koden i mitt Style Sheet:

ul
{
    list-style-type:circle; 
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 15px;
}
li
{
	list-style-image:url('/aaa_media/search/icon_01.gif');
	padding:0px 0px 0px 0px;
}

Saken är den att i IE kommer den lite högt i t-led gentemot textraden och i NS kommer den något lite under.

Exicterar lösning?

dectgapMedlem sedan sep. 20021 655 inlägg

16 mars 2005 10:28#2

Jag var på väg att slå upp ordet "exicterar" innan jag insåg att det var "existerar" du avsåg :)

Hur som helst...
Det hela görs ganska enkelt genom att använda bilden som bakgrund istället:

ul {
    list-style-type: none;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 15px;
}
li {
	background: url('/aaa_media/search/icon_01.gif') left center no-repeat;
	padding-left: 10px;
}

Att jag sätter padding-left till 10px beror på att vi vill att bakgrundsbilden ska synas utan någon text eller annat innehåll över.
Ändra 10px till vad som är lämpligt för dig.

GunnarDMedlem sedan juni 20014 290 inlägg

16 mars 2005 13:19#3

Lite tips om hur man kan modifiera listor: http://css.maxdesign.com.au/

Emil RTMedlem sedan feb. 2004200 inlägg

16 mars 2005 16:58#4

Toppensida!

simmelMedlem sedan mars 20052 inlägg

16 mars 2005 21:22#5

enda problemet är att hela den <li> får det, så om man inte vill ha indenting på andra raden så blir det problem.

dectgapMedlem sedan sep. 20021 655 inlägg

16 mars 2005 22:20#6

simmel skrev:

enda problemet är att hela den <li> får det, så om man inte vill ha indenting på andra raden så blir det problem.

Då kan du testa med

li {
	background: url('img1.png') 0 5px no-repeat;
	text-indent: 25px;
}

Jag skrev "0 5px" (horisontell resp. vertikal placering) för att få bilden justerad efter första raden istället hela li-elementet.
Det kan naturligtvis också ändras efter behag.