list image question

[comptech520]

Hi, I want to have a different image for each navigation option in my menu.

Here is the menu code from my stylesheet

#menus LI {
 DISPLAY: inline; 
}
#menus LI A {
 PADDING-RIGHT: 20px; DISPLAY: block; PADDING-LEFT: 20px; FONT-SIZE: 11px; Z-INDEX: 1; BACKGROUND: url(../img/menu.gif) no-repeat; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN-LEFT: -10px; COLOR: #382e1f; LINE-HEIGHT: 31px; PADDING-TOP: 0px; HEIGHT: 31px; TEXT-DECORATION: none
}
#menus LI A:hover {
 BACKGROUND-POSITION: 0px -31px
}
#menus LI A.current {
 BACKGROUND-POSITION: 0px -31px
}
#menus LI.current_page_item A {
 BACKGROUND-POSITION: 0px -62px
}
#menus LI.current-cat A {
 BACKGROUND-POSITION: 0px -62px
}
#menus LI A.home {
 PADDING-RIGHT: 0px; BACKGROUND-POSITION: 0px -93px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN-LEFT: 0px; WIDTH: 45px; TEXT-INDENT: -999em; PADDING-TOP: 0px
}
#menus LI A.home:hover {
 BACKGROUND-POSITION: 0px -124px
}
#menus LI.current_page_item A.home {
 BACKGROUND-POSITION: 0px -155px
}
#menus LI A.lastmenu:hover {
 BACKGROUND-POSITION: 0px 0px; CURSOR: default
}
#menus LI UL {
 BORDER-RIGHT: #a6a6a6 1px solid; BORDER-TOP: #a6a6a6 1px solid; DISPLAY: none; Z-INDEX: 1; BACKGROUND: #f4f5f7; BORDER-LEFT: #a6a6a6 1px solid; LINE-HEIGHT: 0; BORDER-BOTTOM: #a6a6a6 0px solid; POSITION: absolute;
}
#menus LI LI {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; 
}
#menus LI LI A {
 PADDING-RIGHT: 18px; DISPLAY: block; PADDING-LEFT: 10px; FLOAT: none; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 7px; MARGIN: 0px; WIDTH: 175px; COLOR: #999; LINE-HEIGHT: 145%; PADDING-TOP: 7px; BORDER-BOTTOM: #ddd 1px solid; HEIGHT: auto; TEXT-DECORATION: none
}
#menus LI LI A.last {
 BORDER-LEFT-COLOR: #a6a6a6; BORDER-BOTTOM-COLOR: #a6a6a6; BORDER-TOP-COLOR: #a6a6a6; BORDER-RIGHT-COLOR: #a6a6a6
}
#menus LI LI A:hover {
 COLOR: #382e1f; BACKGROUND-COLOR: #edeff0
}
#menus LI LI A.current {
 COLOR: #382e1f; BACKGROUND-COLOR: #edeff0
}
#menus LI LI A.subtitle {
 BACKGROUND-POSITION: right 50%; BACKGROUND-IMAGE: url(../img/arrow.gif); BACKGROUND-REPEAT: no-repeat
}
#menus LI LI A.subtitle:hover {
 BACKGROUND-POSITION: right 50%; BACKGROUND-IMAGE: url(../img/arrow.gif); BACKGROUND-REPEAT: no-repeat
}

I want to do it this way, not in a style sheet, but nothing is showing. So I can use a different image for each one (drink.png is to test)

    <li style="list-style-image:url(../images/icons/drink.png);"><a href="information.php">Info</a></li>
   <li style="list-style-image:url(../images/icons/drink.png);"><a href="software.php">Software</a></li>
   <li style="list-style-image:url(../images/icons/drink.png);"><a href="tools.php">Tools</a></li>
            <li style="list-style-image:url(../images/icons/drink.png);"><a href="games.php">Games</a></li>
   <li style="list-style-image:url(../images/icons/drink.png);"><a href="feeds.php">Feeds</a></li>

[mrtom100]

hello
try the following as you forgot the "

<li style="list-style-image:url("../images/icons/drink.png");"><a href="information.php">Info</a></li>
<li style="list-style-image:url("../images/icons/drink.png");"><a href="software.php">Software</a></li>
<li style="list-style-image:url("../images/icons/drink.png");"><a href="tools.php">Tools</a></li>
<li style="list-style-image:url("../images/icons/drink.png");"><a href="games.php">Games</a></li>
<li style="list-style-image:url("../images/icons/drink.png");"><a href="feeds.php">Feeds</a></li>

that should sort it..and make sure the path to the image is 100&#37; correct

[andypants]

You may need to wrap your <li> tags within <ul> tags like this:

<ul>
    <li style="list-style-image:url(../images/icons/drink.png);"><a href="information.php">Info</a></li>
   <li style="list-style-image:url(../images/icons/drink.png);"><a href="software.php">Software</a></li>
   <li style="list-style-image:url(../images/icons/drink.png);"><a href="tools.php">Tools</a></li>
            <li style="list-style-image:url(../images/icons/drink.png);"><a href="games.php">Games</a></li>
   <li style="list-style-image:url(../images/icons/drink.png);"><a href="feeds.php">Feeds</a></li>
</ul>

also, if you are copy and pasting these styles from a sub directory css file you might need to get rid of the "../"

[comptech520]

Hi,

Thank you for your reply, but for some reason it didn't work. I posted my full style sheet.

I'm using a navigation bar with various sub menu's, so my <ul>'s and <li>'s are a little messed up.

This is more code from my navigation area to give you a better idea:

<UL id=menus>
<LI>                                <?php
IF ($_SERVER['SERVER_NAME'] ==  "localhost") :
echo "<a class='home' href='http://localhost'>Home</a>";
else:
echo "<a class='home' href='http://mydomain.com'>Home</a>";
ENDIF;
?> 
<li style="list-style-image:url("/images/icons/drink.png");"><a href="information.php">Info</a></li>
<li style="list-style-image:url("/images/icons/drink.png");"><a href="software.php">Software</a></li>
<li style="list-style-image:url("../images/icons/drink.png");"><a href="tools.php">Tools</a></li>
<li style="list-style-image:url("../images/icons/drink.png");"><a href="games.php">Games</a></li>
<li style="list-style-image:url("../images/icons/drink.png");"><a href="feeds.php">Feeds</a></li> 
<li><a href="#">Software Links</a>
<ul>
<li><a href="#" target="_blank">Sub link 1</a></li>
<li><a href="#" target="_blank">Sub link 2</a></li>
<li><a href="#" target="_blank">Sub link 3</a></li>
</li></ul>
<li><a href="#" title="">Vendors</a>
<ul>
<li><a href="#">Hardware</a>
<ul>
<li><a href="#" target="_blank">Sub link 1</a></li>
<li><a href="#" target="_blank">Sub link 2</a></li>
<li><a href="#" target="_blank">Sub link 3</a></li>
</ul></li>
</ul></li>
<li><A class=lastmenu href="javascript:void(0);"></A></li></ul>

[comptech520]

Images are in httpdocs/images/icons
CSS is in httpdocs/css

[criterion9]

You have a quoting problem:

"list-style-image:url("/images/icons/drink.png");"

either use:

"list-style-image:url('/images/icons/drink.png');"

or:

"list-style-image:url(/images/icons/drink.png);"

[comptech520]

Hi Again,

Using that syntax, it still does not work. Any other ideas?

[criterion9]

Does the image exist in that location?

[mrtom100]

have you tried to add the full address for the image example

http://www.webaddress.co.uk/images/icons/drink.png

[Eye for Video]

criterion9 has the correct syntax.
Here's an example of working image:

<li style="list-style-image: url(arrow.jpg)">Independent film marketing strategy</li>

EfV

[comptech520]

Hrmmmm. I've tried all the combinations, with the image being local and on a web site, still nothing.

Can you please take a look at the attached CSS to see if there are any conflicts in the menu area that are preventing this from being displayed?

[Eye for Video]

Break your problem into 2 parts.
One, solve the image issue with a test, none nested <li>. Make as simple as possible to get that part working.
Then work on the nesting.
I see

<UL id=menus>
<LI>

but can't really find the </li> to go with it.
Also in

<li><a href="#">Software Links</a>
<ul>
<li><a href="#" target="_blank">Sub link 1</a></li>
<li><a href="#" target="_blank">Sub link 2</a></li>
<li><a href="#" target="_blank">Sub link 3</a></li>
</li></ul>

the last two tags should be switched, to correctly nest the <ul> inside the <li>.
Best wishes,
Eye for Video
www.cidigitalmedia.com

[stefanraj]

Hi,

<UL id=menus>
<LI> // this one

I am not sure why you used this <LI> , Please make sure about all <li> tags are enclosed correctly.

Check whether images exist in the given path or not using the firebug addon.