SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help adding individual icons as list item bullets for navigation

    hi all,

    i want to use the list-style-image property to add icons for my navigation tabs. i have individual icons for home, about, tour, etc.

    near as i can figure out, i would make the declaration like so:
    .menu-item menu-item-type-post_type menu-item-object-page menu-item-82 {list-style-image:url[fullPathtoHOMEicon1Here]; float:left;}
    and
    .menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-37 current_page_item menu-item-82 {list-style-image:url[fullPathtoHOMEicon2Here]; float:left;}

    two questions:
    1. does the item designation *really* have to be that long? and,
    2. what would it be for the rollover focus state?

    (okay three... )

    3. am i even on the right track??

    thanks in advance!

    michelle

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The CSS selectors look wrong there, because each name should have a dot before it. Did you just grab that list of words from the element itself? Perhaps show us your menu HTML so we can see what's needed.

    Personally, I would just use a background image for each list item.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi ralph,

    thank you for replying. i copied them from the firebug highlighted section.

    here is the html from a source view (never occurred to me, duh!):
    HTML Code:
    <div id="nav-bottom-menu"><nav id="access" class="menu_bar" role="navigation">
    		<div class="skip-link"><a class="assistive-text" href="#content" title="">Skip to primary content</a></div>
    			<div class="skip-link"><a class="assistive-text" href="#primary" title="">Skip to secondary content</a></div>
    <div class="menu-mainnav-container"><ul id="menu-mainnav" class="menu"><li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="http://www.dev.threeriversfitness.com/home/">Home</a></li>
    <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-29 current_page_item menu-item-42"><a href="http://www.dev.threeriversfitness.com/tour-the-gym/">Tour the Gym</a></li>
    <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="http://www.dev.threeriversfitness.com/about-us/">About Us</a></li>
    <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://www.dev.threeriversfitness.com/class-schedule/">Schedule</a></li>
    <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="http://www.dev.threeriversfitness.com/class-descriptions/">Classes</a></li>
    <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a href="http://www.dev.threeriversfitness.com/meet-our-trainers/">Trainers</a></li>
    <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="http://www.dev.threeriversfitness.com/contact-us/">Contact Us</a></li>
    </ul></div>		</nav></div>
    i'm already using a background image which is set to 100% width of each li. if i include the icon, it will beocme distorted. nervous about multiple backgrounds because of browser support issues.

    here's the dev site (minus the icons): http://www.dev.threeriversfitness.com/tour-the-gym/

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Since you have a bg image on the LIs, you could place the icon on the <a> itself as a bg image ... or, if you have a bg image on the <a> too (I can't check, as I'm mobile at the moment) then perhaps by adding a span to the <a>, or by using the :before pseudo class for each <a>.

    You could target each individual <a> with something like this:

    Code:
    #enu-item-42 a {...styles here...}
    That's assuming the icon is different for each LI. If there is just one icon to be shared, then something like:

    Code:
    .menu-item a {}
    would be better.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks again!

    no, background image on the <a>.

    yes, different for each. also for a:hover and current.

    so for the current do i really need all of --
    <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-29 current_page_item menu-item-42">
    which i assume would actually be --
    .menu-item .menu-item-type-post_type .menu-item-object-page .current-menu-item .page_item .page-item-29 .current_page_item .menu-item-42

    or can i get away with --
    .current_page_item .menu-item-42

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    No, leave the code as is in the HTML. It's in the CSS where you have to be careful. In your original post, you just copied those inline classes and tried to make a CSS rule of it, which doesn't work. That's a list of classes, and you just need to pick one to target the element with CSS.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Tags for this Thread

Bookmarks

Posting Permissions

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