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 :stud

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

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? :OO

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 :e

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 :q

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 :l

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)