How can I get the z-index to work on having navigation stack on top of image?

Question

So I am redesigning a clients joomla site. The orginal designer had coded the site. He has the navigation's z-index set to relative and the z-index to 100. The image background I had created for the navigation system is in relative position and has a z-index of 1. But when I position the nav over the image it hides behind. I don't think the index for the navigation system is being recognized at all. How could I possibly fix this? The navigation is on the top right hand corner, btw. Heres the site: www.sheasconsignanddesign.com

Answer 1

I assume this is more or less what you're trying to achieve:

There are a couple of issues with your approach:

1. The current main menu is located in a completely different container (.artisteerheader) than your logo and menu background image (.artisteerdeco). Event though it's possible to move the main menu outside it's container (and above the other), don't do it. See if your template has another module position, the same as the logo/menu background image uses. You can find available module positions for Artisteer templates here: http://www.artisteer.com/?p=help_joomla#joomla4.

2. Using an image with fixed menu backgrounds is not a good idea. It will almost certainly look wrong in certain browsers (just look at the image above, the text is not perfectly aligned for each button). If you need the exact same layout of the buttons as your image, use a .png image behind each li element.

Another (better) option is to use CSS to create the buttons. Try using the following code (and use a simple black background for your main menu bar):

 ul.menu li {
  background-color: #CAC6AF;
  width: 124px;
  padding: 3px 3px;
  margin: auto 20px;
  text-align: center;
  border-radius: 23px;
  border: 7px solid white;
}

You'll get something like this:

Move the main menu module to a different position, and play around with CSS (margins and paddings) to get it correctly aligned.

Hope that helps a little :)