Reputation: 33
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
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
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