[SOLVED] eplacement for page menu buttons &amp;amp; removal of text

interage · #1 Jul 15, 2010, 02:08 PM

Hey all...

So I've got a menu here:

http://www.green-tech.org/site/

I've managed to get graphic backgrounds for each button. However, I can't get the "trigger" area to extend to the actual size of the graphics - and I'd like to lose the text on the buttons as well. Hover state would be nice too...

UPDATED: Please see the last post in this thread.... I've made progress, but still need a hand.

Here's what I have:

div#menu1 ul.rMenu li.page-item-5 {
background: url(http://green-tech.org/site/02.jpg) no-repeat left top;
padding: 0 0 0 0;
height:116px;
width:212px;
}

Help?

Thanks!

M.

interage · #2 Jul 16, 2010, 09:04 AM

If it helps at all, I want the menuing to work JUST like this:

http://thehomeinspectioncompany.org/home.html

M.

lmilesw · #3 Jul 16, 2010, 09:31 AM

I would add a four cell widget area and put the graphics with links to the pages you want.

lmilesw · #4 Jul 16, 2010, 09:37 AM

I just saw that you want dropdowns so what I said is not valid.

interage · #5 Jul 16, 2010, 09:38 AM

Hey Larry!

Well thanks for the reply just the same.

Have a great one!

M.

lmilesw · #6 Jul 16, 2010, 11:05 AM

I was curious so started experimenting and this might help you with where you want to go. The following increased the "target area" the rMenu-ver a was necessary to keep the sub menus from being as wide. I would need to experiment more to figure how to get the hover images to work but wanted to post this.

HTML Code:

.page-item-5 a {height:100px;} 
.rMenu-ver a  {height:20px !important;}

interage · #7 Jul 16, 2010, 11:07 AM

Thanks!!! I'm getting close too.

M.

interage · #8 Jul 16, 2010, 12:03 PM

OK - so here's where I am...

(and please - I've looked and looked before asking - I'm just missing something.)

The menuing is VERY close - except for the behavior of the child menus - they are inheriting the background of the top level menus, and their alignment is very very messed up.

Here are my CSS aditions - along with some that were already there - but have been adjusted. ANY help would be GREATLY appreciated.

/* Menu Bars */

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 0px 0px;
}
/* different padding for parents with arrow image */
div#menu1 ul.rMenu li.rMenu-expand a, div#menu2 ul.rMenu li.rMenu-expand a {
padding: 80px 22px 8px 10px !important;
}
/* less padding for children with arrow image */
div#menu1 ul.rMenu li.rMenu-expand li a, div#menu2 ul.rMenu li.rMenu-expand li a {
padding: 5px 22px 5px 10px !important;
}

div#menu2 {
background: #666666;
}
div#menu1 {
background: #eee;
}

/* XX comments to .... */
h3#comments {
margin: 10px 0;
padding: 10px;
font-weight: normal;
background: #f5f5f5;
}

ul.commentlist {
border-top: 0;
margin: 0;
line-height: 1.4;
font-size: 12px;
}
ul.commentlist li.thread-odd, ul.commentlist li.thread-even {
margin: 5px 0;
padding: 10px;
border-bottom: solid 5px #fafafa;
background: #fff;
}
span.authorname, span.authorname a {
font-weight: normal;
font-size: 17px !important;
}
div.commentmetadata a {
color: #999;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}

/* set menu transparency */

div#menu1 {
border: 0;
background-color: none !important;
background-color: transparent !important;
padding: 0 0 0 0;
}

/* Individual Menu Items */

/* Home page - has no subs, and works PERFECTLY */

div#menu1 ul.rMenu li.page-item-3 {
height: 116px;
width: 212px;
background: url(http://green-tech.org/site/01.jpg) no-repeat left top;
}

div#menu1 ul.rMenu li.page-item-3 a:hover {
background: url(http://green-tech.org/site/01.jpg) no-repeat left top;
}

/* About page - has subs, which are misaligned and background-messed */

div#menu1 ul.rMenu .page-item-5 {
background: url(http://green-tech.org/site/02.jpg) no-repeat left top;
height: 116px;
width: 212px;
}

div#menu1 ul.rMenu .page-item-5 a:hover {
background: url(http://green-tech.org/site/02.jpg) no-repeat left top;
height: 116px;
padding: 0px 0 0 0;
}

/* Services page - has subs, which are misaligned and background-messed */

div#menu1 ul.rMenu li.page-item-7 {
background: url(http://green-tech.org/site/03.jpg) no-repeat left top;
padding: 0px 0 0 0;
height: 116px;
width: 212px;
}
div#menu1 ul.rMenu li.page-item-7 a:hover {
background: url(http://green-tech.org/site/03.jpg) no-repeat left top;
padding: 0px 0 0 0;
height: 116px;
}

/* Contact page - has no subs, and works PERFECTLY */

div#menu1 ul.rMenu li.page-item-9 {
background: url(http://green-tech.org/site/04.jpg) no-repeat left top;
padding: 0px 0 0 0;
height: 116px;
width: 212px;
}

div#menu1 ul.rMenu li.page-item-9 a:hover {
background: url(http://green-tech.org/site/04.jpg) no-repeat left top;
}

/* add formatting to submenu items */

div#menu1 ul.rMenu li ul.rMenu-ver li a {
font-size: 10px;
text-align: left;
}

/* Set menu padding so text shows at bottom of buttons - for menu items with no subs */

div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active
{
padding: 80px 20px 0px 0px;
}

lmilesw · #9 Jul 16, 2010, 02:57 PM

My brain is hurting

juggledad · #10 Jul 16, 2010, 04:35 PM

This is the nature of CSS

when you create a selector/rule, it applies to all the elements that match it. Take this example (copy the code and save it as color.html and open it in your browser. Then you can make changes, save it, refresh the page and see the effect

HTML Code:

<html>
<head>
<title>CSS Test</title>
<style type="text/css">
</style>
</head>
<body>
<div>
	<ul>
		<li class="color_1">item 1</li>
		<li class="color_2">item 2</li>
		<li class="color_1">item 3</li>
			<ul class="child">
				<li class="color_1">item 3-1</li>
				<li class="color_2">item 3-2</li>
				<li class="color_1">item 3-3</li>
			</ul>
		<li class="color_1">item 4</li>
			<ul class="child">
				<li class="color_2">item 4-1</li>
				<li class="color_1">item 4-2</li>
			</ul>
		<li class="color_1">item 5</li>
	</ul>
</div>
</body>
</html>

If you run this as is, all the text will vbe black, but then add (in the <style>...</style> the following

HTML Code:

li {color: red;}

but what if we want the sub items (3-1 thru 3-3 and 4-1 to 4-2) to be red and tht parent items to be blue? if you change the color to blue, everything goes to blue because they are all <li>'s. So what happens it you change the css to

HTML Code:

li {color: blue;}
ul li {color: red;}

everything stays red because all the <li>'s are decendents of <ul>'s. So how do you do it? You need to be more specific with the selectors (this is where class and id come in handy
if you change the css to

HTML Code:

li {color: blue;}
ul.child li {color: red;}

it now works because you set the child elements to a new set of rules

So what does this have to do with your issue? Well you have to set the child selectors for the menus to something different than the parents and this is the most complicated section of the CSS. There is more that 400 lines of CSS selectors and rules dealing whit the menu's.

Best way to do this is to view your page, view the source, copy it to a file and save it. Then you can add css in to see the effect. once you have it right, you can put the css into the CSS Inserts option of teh theme.

Hope this helps

interage · #11 Jul 16, 2010, 04:42 PM

Hey JD!

Thanks for the reply.

With your help, I'd like to cut to the chase just a little here, if that's OK.

So here's just one menu selection:

div#menu1 ul.rMenu li.page-item-7 {
background: url(http://green-tech.org/site/03.jpg) no-repeat left top;
padding: 0px 0 0 0;
height: 116px;
width: 212px;
}
div#menu1 ul.rMenu li.page-item-7 a:hover {
background: url(http://green-tech.org/site/03.jpg) no-repeat left top;
padding: 0px 0 0 0;
height: 116px;
}

Now I pulled the

div#menu1 ul.rMenu li.page-item-7

from looking around here.

Does that line address submenus as well as top-level ones? and, if so, how do I JUST address top-level ones?

Thanks again and again.

M.

interage · #12 Jul 16, 2010, 10:52 PM

I have Firebug - thanks!

As for the line that I pulled - that's where I'm having the problem - because that's the ONLY place I had put the background graphic - but it was showing up in all the child menu backgrounds as well.

I moved the menu below for the weekend - I'll band on it more on Monday.

Thanks to all for the hand.

M.

juggledad · #13 Jul 17, 2010, 05:53 AM

ok, to cut to the chase, you have to reset all the submenu settings. Here is an example for your site that changes some of them

HTML Code:

iv#menu1 ul.rMenu li.page-item-7 ul.rMenu-ver li,
div#menu1 ul.rMenu li.page-item-7 ul.rMenu-ver li a:hover {
background: red;
height: 24px;
}

interage · #14 Jul 17, 2010, 06:04 AM

Thanks SO much, JD...

I'll give it a try manana.

Have a great rest of the weekend!

M.

DragNfLy · #15 Sep 18, 2010, 03:48 PM

Hello

I would like to continue where this left off. I have been through the forum for days now.

Could someone please explain to me why the hover image does not display on my menu. The static menu image displays correctly for each page, but there is a black block displaying on all the other roll-over menu images. My current site is in under construction mode > so you will not be able to view the site.

I am by no means a CSS coder and am learning from copy paste.

Could someone please have a look. My CSS insert page has this in it:

******************

div#menu1
{
background: transparent;
border: 0px;
}

ul.rMenu-hor { padding-left: 415px !important; }

/* Margin between Menu Blocks */

ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-right: 0px !important; }

ul.rMenu li a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* Home */

ul.rMenu li.page-item-8 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-8 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-8 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-8 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* Events */
ul.rMenu li.page-item-11 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/events_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-11 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/events_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-11 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-11 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/events_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* Gallery */
ul.rMenu li.page-item-14 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/gallery_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-14 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/gallery_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-14 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-14 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/gallery_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* Contact */
ul.rMenu li.page-item-17 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/contact_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-17 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/contact_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-17 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-17 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/contact_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* News */
ul.rMenu li.page-item-20 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/news_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-20 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/news_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-20 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-20 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(wp-content/themes/atahualpa353/images/news_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* Page Backgrounds */

body.page-id-8 div#container {
background :url(/wp-content/themes/atahualpa353/images/home.jpg);
}

body.page-id-11 div#container {
background-image:url(/wp-content/themes/atahualpa353/images/events.jpg);
}

body.page-id-14 div#wrapper {
background-image:url(/wp-content/themes/atahualpa353/images/gallery.jpg);
}

body.page-id-17 div#wrapper {
background-image:url(/wp-content/themes/atahualpa353/images/contact.jpg);
}

body.page-id-20 div#wrapper {
background-image:url(/wp-content/themes/atahualpa353/images/news.jpg);
}

lmilesw · #16 Sep 18, 2010, 04:00 PM

Put a slash before each of your background path statements. For instance

HTML Code:

background: url(wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;

Should be

HTML Code:

background: url(/wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;

DragNfLy · #17 Sep 18, 2010, 04:13 PM

Hi

Thanks for the reply.

I have done this and there is still no change. I have taken the site out of Maintenance for you to have a look. The URL is... more payment gateways please

lmilesw · #18 Sep 18, 2010, 05:39 PM

The selectors I am seeing are

#menu-item-10 for Home
#menu-item-13 for Event
#menu-item-16 for Gallery
#menu-item-19 for Contact Us
#menu-item-22 for News

Are these the items you want to have hovers on? And you do need the slashes their.

DragNfLy · #19 Sep 19, 2010, 01:25 AM

Yes, that is correct. I need to replace the black hover box with images on the menu items you mentioned. Where to from here?

lmilesw · #20 Sep 19, 2010, 07:47 AM

You would have to use something like the following

HTML Code:

#menu-item-13 a:hover {
background:url(/wp-content/themes/atahualpa353/images/events_h.jpg) no-repeat scroll top center !important;
display:marker;
}
#menu-item-16 a:hover {
background:url(/wp-content/themes/atahualpa353/images/gallery_h.jpg) no-repeat scroll top center !important;
}

And so on. Then add #menu-item-13 a:active etc. as needed.

DragNfLy · #21 Sep 19, 2010, 02:17 PM

You Are SUPERSTAR > As soon I can figure out how to become a GOLD member > I WILL.

My currency is stupendous ... and PayPal just does not work unless I have a monthly subscription to a certain Bank for $1 a month. (currently 6.5 of my currency)

Perhaps something you will take into consideration > different payment methods for GOLD memberships. It is tough out here.

Thank you Once again.

Yours
DragNfLy

PS. > Atahualpa is SUPER DUPER!!!

DragNfLy · #22 Sep 23, 2010, 06:35 AM

Ahhh man...

Now IE has messed it all up. Menu (%pages) Bar works fine in all other browsers, except for IE.

Thanks for your help Miles. I'd appreciate a little more. I am experimenting with the following threads to see if I can find a solution.
My PayPal has been loaded with some cash, but will only clear on the 29 September. please help in advance.

These are the threads:

http://forum.bytesforall.com/showthr...ernet+explorer
and
http://forum.bytesforall.com/showthr...orer+menu+text

My URL again: http://www.decodance.co.za and the contents of my CSS HTML inserts page is:

********************

div#menu1
{
background: transparent;
border: 0px;
}

ul.rMenu-hor { padding-left: 415px !important; }

/* Margin between Menu Blocks */

ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-right: 0px !important; }

ul.rMenu li a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* New TESTS */

/* Home */

ul.rMenu li.page-item-8 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-8 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-8 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-8 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* Events */
ul.rMenu li.page-item-11 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/events_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-11 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/events_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-11 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-11 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/events_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* Gallery */
ul.rMenu li.page-item-14 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/gallery_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-14 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/gallery_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-14 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-14 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/gallery_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* Contact */
ul.rMenu li.page-item-17 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/contact_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-17 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/contact_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-17 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/decodance.gif) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-17 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/contact_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

/* News */
ul.rMenu li.page-item-20 a:link
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/news_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-20 a:visited
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/news_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-20 a:active
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/news_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li.page-item-20 a:hover
{
color: transparent !important;
font-weight: bold !important;
font-size: 10pt !important;
background: url(/wp-content/themes/atahualpa353/images/news_h.jpg) no-repeat scroll top center !important;
width: 100px !important;
height: 30px !important;
text-align: center !important;
padding-top: 0px !important;
}

#menu-item-10 a:hover {
background:url(/wp-content/themes/atahualpa353/images/home_h.jpg) no-repeat scroll top center !important;
display:marker;
}

#menu-item-13 a:hover {
background:url(/wp-content/themes/atahualpa353/images/events_h.jpg) no-repeat scroll top center !important;
display:marker;
}
#menu-item-16 a:hover {
background:url(/wp-content/themes/atahualpa353/images/gallery_h.jpg) no-repeat scroll top center !important;
}

#menu-item-19 a:hover {
background:url(/wp-content/themes/atahualpa353/images/contact_h.jpg) no-repeat scroll top center !important;
display:marker;
}
#menu-item-22 a:hover {
background:url(/wp-content/themes/atahualpa353/images/news_h.jpg) no-repeat scroll top center !important;
}

/* Page Backgrounds */

body.page-id-8 div#container {
background :url(/wp-content/themes/atahualpa353/images/home.jpg);
}

body.page-id-11 div#container {
background-image:url(/wp-content/themes/atahualpa353/images/events.jpg);
}

body.page-id-14 div#wrapper {
background-image:url(/wp-content/themes/atahualpa353/images/gallery.jpg);
}

body.page-id-17 div#wrapper {
background-image:url(/wp-content/themes/atahualpa353/images/contact.jpg);
font-weight: bold !important;
font-size: 10pt !important;
color: #000000 !important;
}

body.page-id-20 div#wrapper {
background-image:url(/wp-content/themes/atahualpa353/images/news.jpg);
}

********************

Any IE help appreciated.

Thanks

lmilesw · #23 Sep 23, 2010, 09:16 AM

Something just occurred to me. Instead of trying to get some graphics to line up with the menu bar why not just make graphics with links to the pages you need. I'm thinking you could slice your DECODANCE into 6 parts DECO, D, A, N, C, E. Then create hover images for the last five. Now put a 6 cell widget area in place of %pages and populate the widget areas with a text widget with the necessary code.

Does that make any sense to you?

DragNfLy · #24 Sep 26, 2010, 01:35 PM

Hi Miles

Yes, absolutely. I did it like that on my first attempt with html coding. I really wanted to learn how to do this in CSS though. I have another day or 2 before the site goes live officially. If I have not figured this out by then > I will revert to the old style of doing this.

I will however keep trying on a test site, or perhaps get more answers as a Gold member, but will have to wait till the 29th for my PayPal monies to clear.

Regards
DragNfLy

rohaver · #25 Sep 30, 2010, 10:44 PM

this is the closest answer I could find. I have a strange issue. All was working as it should, then we upgraded and the page (top) menu messed up. http://morrisonshomeimprovement.com/ look at the sub-menus on the top menu bar. The menu doesn't expand as it should. I have set the sub-menu width to 25 and it does not change any more. here is the html/css insert.

div#menu2 {
background: transparent url(/wp-content/themes/atahualpa/images/navbar.jpg) !important;
}
ul#rmenu2 {
background: url(/wp-content/themes/atahualpa/images/navbar.jpg) !important;
padding:2px 5px;
}

ul.rmenu2 li
{
background: transparent url(/wp-content/themes/atahualpa/images/navbar.jpg);
}

div#menu1 li.current_page_item a:link,
div#menu1 li.current_page_item a:active,
div#menu1 li.current_page_item a:visited {
background: transparent url(/wp-content/themes/atahualpa/images/navbar.jpg) !important;
padding:5px 25px;
}

div#menu1 li.current_page_item a:hover {
background: transparent url(/wp-content/themes/atahualpa/images/navbar.jpg) !important;
}

ul.rMenu li
{
background: transparent url(/wp-content/themes/atahualpa/images/navbar.jpg);
}

[SOLVED] eplacement for page menu buttons &amp;amp;amp; removal of text

[SOLVED] eplacement for page menu buttons &amp; removal of text