www.webdeveloper.com
Results 1 to 13 of 13

Thread: list image question

  1. #1
    Join Date
    Apr 2005
    Location
    Behind my DiGiCo SD7 Console
    Posts
    900

    list image question

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

    Here is the menu code from my stylesheet

    HTML Code:
    #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)

    HTML Code:
        <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>
    Registered Linux User: #463250
    -----------------
    HELPFUL LINKS
    PHP - http://www.php.net
    Website Color Schemer - http://www.colorschemer.com/online.html

  2. #2
    Join Date
    Feb 2007
    Location
    Wolverhampton
    Posts
    96
    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
    My name is Tom Bangham i am owner of a web developer company called Phoenix Web Solutions.

  3. #3
    Join Date
    Nov 2010
    Posts
    21
    You may need to wrap your <li> tags within <ul> tags like this:

    HTML Code:
    <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 "../"

  4. #4
    Join Date
    Apr 2005
    Location
    Behind my DiGiCo SD7 Console
    Posts
    900
    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:

    HTML Code:
    <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>
    Attached Files Attached Files
    Registered Linux User: #463250
    -----------------
    HELPFUL LINKS
    PHP - http://www.php.net
    Website Color Schemer - http://www.colorschemer.com/online.html

  5. #5
    Join Date
    Apr 2005
    Location
    Behind my DiGiCo SD7 Console
    Posts
    900
    Images are in httpdocs/images/icons
    CSS is in httpdocs/css
    Registered Linux User: #463250
    -----------------
    HELPFUL LINKS
    PHP - http://www.php.net
    Website Color Schemer - http://www.colorschemer.com/online.html

  6. #6
    Join Date
    Jan 2009
    Posts
    3,346
    You have a quoting problem:
    "list-style-image:url("/images/icons/drink.png");"
    either use:
    Code:
    "list-style-image:url('/images/icons/drink.png');"
    or:
    Code:
    "list-style-image:url(/images/icons/drink.png);"

  7. #7
    Join Date
    Apr 2005
    Location
    Behind my DiGiCo SD7 Console
    Posts
    900
    Hi Again,

    Using that syntax, it still does not work. Any other ideas?
    Registered Linux User: #463250
    -----------------
    HELPFUL LINKS
    PHP - http://www.php.net
    Website Color Schemer - http://www.colorschemer.com/online.html

  8. #8
    Join Date
    Jan 2009
    Posts
    3,346
    Does the image exist in that location?

  9. #9
    Join Date
    Feb 2007
    Location
    Wolverhampton
    Posts
    96
    have you tried to add the full address for the image example

    http://www.webaddress.co.uk/images/icons/drink.png
    My name is Tom Bangham i am owner of a web developer company called Phoenix Web Solutions.

  10. #10
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    criterion9 has the correct syntax.
    Here's an example of working image:
    Code:
    <li style="list-style-image: url(arrow.jpg)">Independent film marketing strategy</li>
    EfV

  11. #11
    Join Date
    Apr 2005
    Location
    Behind my DiGiCo SD7 Console
    Posts
    900
    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?
    Registered Linux User: #463250
    -----------------
    HELPFUL LINKS
    PHP - http://www.php.net
    Website Color Schemer - http://www.colorschemer.com/online.html

  12. #12
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    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
    Code:
    <UL id=menus>
    <LI>
    but can't really find the </li> to go with it.
    Also in
    Code:
    <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

  13. #13

    Try removing the unnecessary <LI>

    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles