[SOLVED] Use images in Menu bar for Pages

ChaseMann · #1 Jul 18, 2011, 02:29 PM

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

HTML Code:

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