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
    902

    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
    902
    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>
    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
    902
    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
    Location
    Ohio
    Posts
    3,356
    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
    902
    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
    Location
    Ohio
    Posts
    3,356
    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
    902
    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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.33328 seconds
  • Memory Usage 2,997KB
  • Queries Executed 13 (?)
More Information
Template Usage (35):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (5)bbcode_code
  • (4)bbcode_html
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (13)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (13)postbit
  • (13)postbit_onlinestatus
  • (13)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • bbcode_parse_start
  • postbit_imicons
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates