---
title: "Egen bild till <li>-tag"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/126599-egen-bild-till-li-tag"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "lillebror"
published: "2005-04-17T17:33:37.000Z"
updated: "2005-04-17T18:51:56.000Z"
replies: 15
views: 374
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/126599-egen-bild-till-li-tag"
---

# Egen bild till <li>-tag

## #1 — lillebror, 2005-04-17T17:33Z

Hej...

Jag har försökt ändra bilden i en \<li\>-lista med följande kod utan något resultat:

```
padding-left: 15px;
background-image: url(picture/icon_list_cessna172.jpg);
background-repeat: no-repeat;
background-position: 0 .5em;
```

Jag har utgått från exemplet på följande sida: <http://css.maxdesign.com.au/listamatic/vertical05.htm>

Efter att jag sparat CSS-filen och uppdaterat webbläsaren ser listan precis likadan ut som innan! :OO

Permalänk: https://www.webforum.nu/p/126599

## #2 — Web-Tor, 2005-04-17T17:55Z

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>
```

Permalänk: https://www.webforum.nu/p/1596227

## #3 — lillebror, 2005-04-17T17:56Z

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

Permalänk: https://www.webforum.nu/p/1596228

## #4 — lillebror, 2005-04-17T18:01Z

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

Permalänk: https://www.webforum.nu/p/1596231

## #5 — m_soderlund, 2005-04-17T18:09Z

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

borde fungera alldeles utmärkt.

Permalänk: https://www.webforum.nu/p/1596234

## #6 — Web-Tor, 2005-04-17T18:09Z

Visst! Du kan använda *list-style-image*.
Jag använder det själv på [min sida](http://www.tor.nu/bil.php).

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

Permalänk: https://www.webforum.nu/p/1596235

## #7 — lillebror, 2005-04-17T18:14Z

> **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>

Permalänk: https://www.webforum.nu/p/1596236

## #8 — jarvklo, 2005-04-17T18:18Z

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]);
```

;)

Permalänk: https://www.webforum.nu/p/1596238

## #9 — m_soderlund, 2005-04-17T18:18Z

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%; }
```

Permalänk: https://www.webforum.nu/p/1596239

## #10 — lillebror, 2005-04-17T18:22Z

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?

Permalänk: https://www.webforum.nu/p/1596241

## #11 — lillebror, 2005-04-17T18:27Z

> **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

Permalänk: https://www.webforum.nu/p/1596245

## #12 — jarvklo, 2005-04-17T18:29Z

> **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... ;)

Permalänk: https://www.webforum.nu/p/1596248

## #13 — lillebror, 2005-04-17T18:36Z

> **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?

Permalänk: https://www.webforum.nu/p/1596252

## #14 — lillebror, 2005-04-17T18:38Z

Löste det med 

```
margin-left: 10px;
```

:)

Permalänk: https://www.webforum.nu/p/1596254

## #15 — lillebror, 2005-04-17T18:41Z

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

Permalänk: https://www.webforum.nu/p/1596255

## #16 — jarvklo, 2005-04-17T18:51Z

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)

Permalänk: https://www.webforum.nu/p/1596263

---

Tråden på webben: https://www.webforum.nu/amne/html-css/126599-egen-bild-till-li-tag