Egen bild till <li>-tag

Det här fungerar för mig:

<style type="text/css">
#navlist
{
margin-left: 0;
padding-left: 0;
list-style: none;
}

#navlist li
{
padding-left: 10px;
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}
</style>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

Fick för mig att det bara gick att använda gif-bilder för detta ändamål varpå jag testade teorin men det visade sig vara en felaktig slutsats av mig

Att det ska vara så svårt att "klippa och klistra" in en ynka liten rad

Denna attribut har jag sett florerat en del när jag sökt på google:

list-style-image: url(picture/cessna_bullet.gif);

Är det något som ska fungera?

Jag prövade med din kod utan positivt resultat!

Vad kan jag ha missat?

li { background: url(list_background.gif) no-repeat 0 50%; }

borde fungera alldeles utmärkt.

Visst! Du kan använda list-style-image.
Jag använder det själv på min sida.

Kan du visa lite mer av din kod eller kanske länka till din sida?

m_soderlund skrev:

li { background: url(list_background.gif) no-repeat 0 50%; }

borde fungera alldeles utmärkt.

Denna kod fungerade inte för mig

Här är länken till sidan: http://www.flygfyren.nu/index.php

Hmm...

Det verkar vara sökvägen till bilden som strular...

Om CSS:en ligger i en separat fil i en "systerkatalog" till bilderna (som du har), så utgår en relativ sökväg från CSS-filens katalog enligt standard (och inte från webbsidan som inkluderade den)...

Prova om det blir bättre om du kör med "komplett sökväg" till bilden - typ

list-style-image: url([url]http://www.flygfyren.nu/picture/cessna_bullet.gif[/url]);

Om det är listan i lagret infobox_content så kan du testa detta:

#infobox ul li { background: url(list_background.gif) no-repeat 0 50%; }

Det trilskas fortfarande...Får inte upp något förutom en vanlig rund listpunkt.

Koden jag använder mig av efter modifiering avseende sökväg ser ut så här:

padding-left: 15px;
background-image: url([url]http://www.flygfyren.se/cessna_bullet.gif[/url]);
background-repeat: no-repeat;
background-position: 0 .5em;

Ska man alltid använda absoluta sökvägar? Går det att ändra standardsökvägen på något sätt?

m_soderlund skrev:

Om det är listan i lagret infobox_content så kan du testa detta:

#infobox ul li { background: url(list_background.gif) no-repeat 0 50%; }

Fungerade tyvärr inte...Koden är säkert helt korrekt med det känns som att idag är det SBS (skit bakom spakarna) haha

Om man inte får ett kodstycke som man kopierat rakt av och som någon annan verifierat så är det något som är fel

lillebror skrev:

Det trilskas fortfarande...Får inte upp något förutom en vanlig rund listpunkt.

Yep - testa

list-style-image: url([url]http://www.flygfyren.nu/picture/cessna_bullet.gif[/url]);

(jag redigerade nog inlägget ovan medan du testade )

Ska man alltid använda absoluta sökvägar? Går det att ändra standardsökvägen på något sätt?

Nej - man kan köra med "../pictures/bild.jpg" eller "/pictures/bild.jpg" också om man vill - men att köra med absoluta, globala sökvägar är en säker "storslägga" att ta till i tveksamma fall som jag lärde mig när MSIE och NN4 en gång i forntiden hade lite olika uppfattningar om varifrån de skulle börja leta efter bilder från CSS-stilar...

Annars kan du ju se till att alltid lägga CSS-filerna och "designbilderna" i samma katalog...

jarvklo skrev:

lillebror skrev:

Det trilskas fortfarande...Får inte upp något förutom en vanlig rund listpunkt.

Yep - testa

list-style-image: url([url]http://www.flygfyren.nu/picture/cessna_bullet.gif[/url]);

(jag redigerade nog inlägget ovan medan du testade )

Som vanligt fungerar det strålande nu! Gud vilken lättnad. Trodde aldrig det skulle gå att få bukt med problemet

En liten sak bara. Bilden verkar uttryck till vänster. Går det att få in den lite mer till höger?

Löste det med

margin-left: 10px;

Punktlistan ser bra ut i FF men i IE ser det ihoptryckt ut som vanligt

IE och FF använder inte samma stil för att göra indraget (den ena kör margin-left och den andra padding-left)...

Lägg till ett värde på padding-left också (själv brukar jag "nolla" bägge för både ul och li och sedan testa mig fram med först margin-left och sedan padding-left på li tills det ser bra ut)