[SOLVED] Menu rollover CSS background

[stuarty80]

I am having problems with my menu setup. Basically i am using the cssmenu.tpl to create the menu. I basically want to have a menu with an image background for each of the menu links (see menu_original image) and then when the user hovers over the menu option it changes to a different image (see menu_hover image).

To give you a better idea of what i mean i have included the following address: http://www.projectseven.com/tutorials/c ... /index.htm

The css i am using is:

Code: Select all

/* Styling the basic apperance of the menu elements */
#primary-nav a { 
   display: block; 
   padding: 5px 10px; 
   margin: 0px; 
   background-image:  url(images/nav_normal.gif);
   background-repeat: no-repeat;
   color: #606a70;
   text-decoration: none; 
   background: transparent; 
   min-height:1em; /* Fixes IE7 whitespace bug*/ 
}

#primary-nav li, #primary-nav li.menuparent { 
   background-color: #fff; 
   min-height:1em; /* Fixes IE7 bug*/
}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive { 
   background-image:  url(images/nav_over.gif);
background-repeat: no-repeat;
 
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent, 
#primary-nav li.menuparent:hover, 
#primary-nav li.menuparenth { 
   background-image: url(images/cms/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat; 
}


/* Styling the apperance of menu items on hover */
#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
   background-image:  url(images/nav_over.gif);
background-repeat: no-repeat;
 
}

I have been able to change the look of the menu, but i have not been able to display any of the images. Any help with this would be great.

[Dr.CSS]

First, all images should go in the uploads folder, whether you put them in the uploads/images folder only matters if you are going to need to see them when making an album or need to use them when editing a page then you will need to put them in uploads/images, I usually put them in a folder in uploads...

Now, the original had the off state image in the 'a' so you need...

background: url(uploads/nav_normal.gif)  not 'background-image', add the folder name in the path if used, uploads/folder name/nav_normal.gif...

Then you need to put the on image in a:hover...

#primary-nav a:hover {background: url(uploads/nav_over.gif)}

You have it in the li hover so the 'a' image is still there and not being replaced, if it shows at all...

OK this works but you will need to make some minor changes to get the image over to the left, maybe it's too wide on the left...

#primary-nav a {
  display: block;
  padding: 5px 10px;
  margin: 1px 0px;
  background:  url(images/nav_normal.gif) left bottom;
  background-repeat: no-repeat;
  color: #606a70;
  text-decoration: none;
  backgound: transarent;
  min-height:1em; /* Fixes IE7 whitespace bug*/
}

[stuarty80]

Thanks Mark, that has sorted the menu and now looks great. Cheers for your help.

cheers

stu