MTB Lover
MTB Lover

Reputation: 33

List style image with not function

i try to personalizate my web page with an image on a list. I try to use the list style image but not function.

You can see at the page http://ctp.servizieweb.it/flotta/

I use this code:

CSS

/*Lista Flotta */

ul#flotta li
{
list-style-image:url("http://ctp.servizieweb.it/wp-content/uploads/2013/07/freccia.png"); 
}

(I try also to use ../07/freccia.png for url)

MYPAGE

<ul id="flotta">
<li>Augusta 109 (06 pax / 300 k/h)</li>
<li>Augusta 206 (04 pax / 240 k/h)</li>
<li>Robinson R44 (03 pax / 200 k/h)</li>
<li>Robinson R22 (01 pax / 180 k/h)</li>
<li>Cessna (10 pax)</li>
<li>Mercedes serie S</li>
</ul>

But i can't see the image on the list? Where wrong? Can you help me to know? Thank's

Upvotes: 0

Views: 103

Answers (2)

ntgCleaner
ntgCleaner

Reputation: 5985

Your list style images are being hidden because they are being pushed to the left of your container. Here's what to do to fix this:

First remove article ul li:before. This is pushing everything and adding an unnecessary circle.

Then change this CSS line:

article ul li, article ol li {
    line-height: 25px;
    position: relative;
    list-style-image: url('http://ctp.servizieweb.it/wp-content/uploads/2013/07/freccia.png');
    left: 30px;
}

This might not be the EXACT style you're looking for, but this will help you realize where the image is.

Upvotes: 1

ygesher
ygesher

Reputation: 1161

It looks like a problem with the CSS selector: instead of ul#flotta il use #flotta. Since id is by definition unique, no need to specify what kind of tag it belongs to. Also there seems to be a problem with the file path--I was unable to find the image when I clicked on the link. In addition, it's customary to place <style> tags inside the <head> tag of the document, rather than in the <body>. Good luck!

Upvotes: 0

Related Questions