need help adding individual icons as list item bullets for navigation

[mtouchette]

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

[ralph.m]

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.

[mtouchette]

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!):

<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/

[ralph.m]

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:

#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:

.menu-item a {}

would be better.

[mtouchette]

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

[ralph.m]

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.

[mtouchette]

yeah, that's what has my brain swimming...figuring out which one. and also what to target for the rollover state as it isnt something firebug can "see." i;ve searched the wp codex and online and either no one has covered it or i;m not using the correct search terms.

thanks for taking the time to help me muddle through. :-)

[ralph.m]

Sorry my answers aren't very clear, but I'm on holidays at the moment, typing on a little phone. You can actually view hover states with Firebug. On the right there is an option to show the hover state for a selected element, as well as focus state I think (I use Chrome now, which has the same). If you want the image to change on hover, it's sounding like a sprite image might be the order of the day. You could incorporate the icons with the background image that's already on the <a> elements, and just shift the background image on hover. It's a great technique. I can't get you a link right now, but if you Google "CSS sprite A List Apart" you will find a good explanation of how to do sprites.

[mtouchette]

thanks for the firebug tip. i'll check it out. i'm stil on a mac g4 though, which can't run but an older version of ff, so that feature may not be available. yes, i know of sprites. i think it's also called a "sliding door" technique.

will using the image as a sprite or bg cause it to change size as the window is resized? or will it stay at actual image dimensions so long as i don't change anything manually?

hope you're enjoying your holiday (when you're not here getting your forum fix ;-).)

[ralph.m]

will using the image as a sprite or bg cause it to change size as the window is resized? or will it stay at actual image dimensions so long as i don't change anything manually?

As a rule, background images always stay the same size, and don't resize with changes to the browser window. There are new properties in CSS3 that allow the background image size to change, but that's something you do specifically.

So, no need to worry about the image resizing.

Regarding the G4, you could also see if Chrome runs on it, because the Chrome dev tools have somewhat outstripped Firebug in many respects, and I've switched to that.