Hi guys, I found a few threads in the forum that sort of answered my question on how to use images in the menu bar for the page names, but not quite a full and succinct tutorial.

I'm trying to duplicate the menu bar that the client already has on this website:
http://thewellingtonsd.com

Here's what I have so far:
http://thewellingtonsd.com/blog/

I gave my pages classes in the menu admin area (can't seem to find the thread that suggested I do this though). Then I used CSS to style the classes with the images.

Here is the CSS I put into ATO-Add HTML/CSS inserts

/*Page Menu Images*/
div#menu1 ul.rMenu li a:active, div#menu2 ul.rMenu li a:active {
padding: 6px 5px 0 5px; text-decoration:underline !important;
}

div#menu1 ul.rMenu li.current-menu-item a:link, div#menu1 ul.rMenu li.current-menu-item a:active, div#menu1 ul.rMenu li.current-menu-item a:hover, div#menu1 ul.rMenu li.current-menu-item a:visited, div#menu1 ul.rMenu li.current_page_item a:link, div#menu1 ul.rMenu li.current_page_item a:active, div#menu1 ul.rMenu li.current_page_item a:hover, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 ul.rMenu li a:hover {
    background-color: transparent;
    border-bottom: 1px solid;
    color: #000000;
    padding-bottom: 0;
}

div#menu2 ul.rMenu li.current-menu-item a:link, div#menu2 ul.rMenu li.current-menu-item a:active, div#menu2 ul.rMenu li.current-menu-item a:hover, div#menu2 ul.rMenu li.current-menu-item a:visited, div#menu2 ul.rMenu li.current_page_item a:link, div#menu2 ul.rMenu li.current_page_item a:active, div#menu2 ul.rMenu li.current_page_item a:hover, div#menu2 ul.rMenu li.current_page_item a:visited, div#menu2 ul.rMenu li a:hover {
    background-color: transparent;
    border-bottom: 1px solid;
    color: #000000;
    padding-bottom: 0;
}

.menu-home {background:url("http://thewellingtonsd.com/images/home-n2.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-home a:hover, .menu-home a:active {background:url("http://thewellingtonsd.com/images/home-n2-o.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-about {background:url("http://thewellingtonsd.com/images/about-n2.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-about a:hover, a:active {background:url("http://thewellingtonsd.com/images/about-n2-o.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-contact {background:url("http://thewellingtonsd.com/images/contact-n2.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-contact a:hover, a:active {background:url("http://thewellingtonsd.com/images/contact-n2-o.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-reviews {background:url("http://thewellingtonsd.com/images/reviews-n2.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-reviews a:hover, a:active {background:url("http://thewellingtonsd.com/images/reviews-n2-o.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-parties {background:url("http://thewellingtonsd.com/images/parties-n2.gif") no-repeat left top !important;
background-color: none; width: 104px !important;
}

.menu-parties a:hover, a:active {background:url("http://thewellingtonsd.com/images/parties-n2-o.gif") no-repeat left top !important;
background-color: none; width: 104px !important;
}

.menu-wellhome {background:url("http://thewellingtonsd.com/images/well-home-n2.gif") no-repeat left top !important;
background-color: none; width: 130px !important;
}

.menu-wellhome a:hover, a:active {background:url("http://thewellingtonsd.com/images/well-home-n2-o.gif") no-repeat left top !important;
background-color: none; width: 124px !important;
}

So how do I get rid of the ATO default "active" page over-lay and the text from covering my images?

I have done this by putting the image code in the navigation label box when using the WordPress menu system.

Hi Larry, thanks for the response, but can you clarify what you mean by "image code"?

I tried putting all the CSS, just the background:url(...) line, and just the actual image file name, but none of that worked.

Thanks.

You wouldn't put the CSS there just a image wrapped in a div for styling.

<div id="hometab"><img src="path to image" /></div>

Thanks Larry, I was able to keep my roll-over images by keeping my images in my CSS and then using your trick of putting the <div id="menu-home"><img src="http://thewellingtonsd.com/images/60-trans.gif" /></div> in the WordPress Menu navigation label field ... but I used transparent images so you could see through the button to my images in my CSS.

I also was getting a weird background highlight box around the current page, so I added some more CSS for another trick I had learned here to put an underline instead of a highlight box under page menu items and I made the underline the same color as the background so it wouldn't actually show. (I edited the code above with the added CSS).