CSS alignment problems for nav rollovers

[tobeeornot]

Hi all,

I am new to this forum. It looks very helpful. Any solutions to this problem would be greatly appreciated.

I have created a main nav area set just below the header container to reveal rounded rollover images as buttons using css but I am having a lot of trouble aligning the links (an unordered list in the html) and the buttons/rollover images to the images that are placed above on the header (I also want the link titles centered within each button). Essentially, I want to give the effect that the rollover buttons and links are connected to the images above and are evenly spaced. I have managed to get three of the five links in place but the rollover effects (especially the second state) break down and become distorted after the first link.

I am fairly new to design but would really like understand why this isn't working and find a solution as I have spent a week working on it, mainly playing with the padding settings within css and the size of the nav container.

For your information, the size of images on the header that I want to correspond to the buttons below are W: 110px H: 115px and spaced apart by 10px. The width of the nav container below is 590px to correspond with the images above. The rollover image is W: 110px and H:60 (30px for each button) where one is sitting on top and the other directly below ).

The CSS code is below:

CSS

#mainNav {
	position: absolute;
	background-color: #8DADAF;
	left: 231px;
	width: 590px;
	bottom: -29px;
	height: 29px;
}

#mainNav ul {
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
}

#mainNav li {
	padding: 0;
	margin: 0;
	display: block;
	float: left;/* ~~ makes list horizontal ~~ */
}

#mainNav li a:link, #mainNav li a:visited {
	padding: 0em 4.0em 0em 1.0em;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.8em;
	font-weight: bold;
	color: #8dadaf;
	text-decoration: none;/* ~~removes default underline from link~~ */
	display: block;
	line-height: 30px; 
	background: url(../_images/nav_rollover.jpg) no-repeat left top;	

#mainNav li a:hover {
	color: #b11f44;
	background: url(../_images/nav_rollover.jpg) right bottom;
	border: none;	
}

Many thanks in advance.
Toby:?:

[tobeeornot]

http://jsfiddle.net/tobeeornot/fgHga/

Here is a link to an example site to shpw you what I mean.

[Arkinder]

This is easy enough to fix, but before going straight to the problem there are several things that can be done to make things a little easier. I'm going to try to change your markup as little as possible, and making the changes red.

Let's begin with the header section. The two images have a combined height of 180px. However, you've set the height of their container to only 115px.

#header {
    background: none repeat scroll 0 0 #4D3821;
    height: 180px;
    margin: 0;
    padding: 0;
    position: relative;
}

This will push your navigation down a bit. Don't worry, we'll fix that soon. Next we're going to move where your images are in the markup. They're displayed before your navigation, and that's the way it should be in your markup.

<div id="header">
<img width="960" height="115" src="http://i1200.photobucket.com/albums/bb328/tobeeornot/header_bg.jpg" alt="header">
<img width="960" height="65" src="http://i1200.photobucket.com/albums/bb328/tobeeornot/indentifier.jpg">
                <div id="shoppingCart"><a href=".htm" title="shop">shop</a></div>
                <div id="joinButton"><a href="mailto:[e-mail]" title="join">join</a></div>
                <div id="mainNav">
                    <ul>
                        <li><a href="index.htm">about us</a></li>
                        <li><a href="products.htm">products</a></li>
                        <li><a href="order.htm">custom order</a></li>
                        <li><a href="contact.htm">contact us</a></li>
                        <li><a href="recipe.htm">recipe</a></li>
                    </ul>
                </div><!-- end #mainNav -->
 </div><!-- end #header -->

Now it will look exactly like it did before you moved the images. It just makes a little more sense to anyone reading the markup. Now let's move your navigation back up with the top property.

#mainNav {
    background-color: #8DADAF;
    bottom: -30px;
    height: 30px;
    top: 115px;
    left: 230px;
    position: absolute;
    text-align: center;
    width: 590px;
}

Now we can remove <h3>&nbsp;</h3> from your mainContent section, and decrease its height to around 340px to move the flowers up.

#mainContent {
    background: url("http://i1200.photobucket.com/albums/bb328/tobeeornot/flowers_bg.png") no-repeat scroll center bottom transparent;
    float: left;
    height: 340px;
    margin: 0;
    width: 960px;
}

Now let's deal with the actual problem.

#mainNav li a:link, #mainNav li a:visited {
    background: url("http://i1200.photobucket.com/albums/bb328/tobeeornot/nav_rollover.jpg") no-repeat scroll left top transparent;
    color: #8DADAF;
    display: block;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    line-height: 30px;
    padding: 0 4em 0 1em;
    text-decoration: none;
}

The padding will simply not work because some links are going to be bigger than the others. This is because there are larger words, or just more words. Fortunately fixing this is pretty easy. Remove the padding and give the links a width.

#mainNav li a:link, #mainNav li a:visited {
    background: url("http://i1200.photobucket.com/albums/bb328/tobeeornot/nav_rollover.jpg") no-repeat scroll left top transparent;
    color: #8DADAF;
    display: block;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    line-height: 30px;
    text-decoration: none;
    width: 120px;
}

Now there is just one issue. The recipe link is on the next line. Increase the width of mainNav to 600px.

#mainNav {
    background-color: #8DADAF;
    bottom: -30px;
    height: 30px;
    left: 230px;
    position: absolute;
    top: 115px;
    width: 600px;
}

I'm not entirely sure if this is the look you were going for, but it fixes the problem. Let me know if there's something I did that you don't understand.

Regards
Arkinder

[tobeeornot]

That's great. Many thanks Arkinder!