View Full Version : Navigation Menu Problem (Too Much Spacing?)

05-21-2008, 03:41 AM

I'm having a problem with my top horizontal navigation menu on my site Game Monarch (http://www.gamemonarch.com).

I am not sure what the problem is, but as you can see text is being spaced out to the right, and the "Contact Us" link has fallen out of place and gone to a new line underneath the menu.

How can I fix this? I am not sure if it's an XHTML or a CSS issue. :confused:

05-21-2008, 06:45 AM
I messed around with your code for a bit, you were giving each link an different class with all the same properties, dont make it so hard on yourself :thumbsup:

Cut your css "nav a.link1" down to this:

#nav {
background-image: url(images/nav_bg.gif);
background-repeat: no-repeat;
margin: 0px;
height: 29px;
width: 855px;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

#nav a.links {
height: 22px;
width: 46px;
font-family: Tahoma;
font-size: 11px;
color: #717171;
text-decoration: none;
font-weight: bold;
display: block;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: px;


#nav a:hover {
color: #FFFFFF;
background-image: url(images/button_bg.gif);
background-repeat: repeat-x;

And your html would nav now look like this:

<a href="#" class="links">Buying</a>
<a href="#" class="links">Trading</a>
<a href="#" class="links">Selling</a>
<a href="#" class="links">Power Leveling</a>
<a href="#" class="links">Rentals</a>
<a href="http://www.gamemonarch.com/memberships/" class="link1">Memberships</a>
<a href="#" class="links">Rewards</a>
<a href="http://www.gamemonarch.com/company-information/" class="link1">Company</a>
<a href="#" class="links">Affiliates</a>
<a href="#" class="links">Contact Us</a>
Mess with the left padding, but I got it aligned properly in firefox with the code above :)

*Note:Your navigation links would be better set in an unordered list as that is what they are and that is the traditional way to set the navigation, just for future reference ;)



Edit-Heres a screen shot of what I did, just to make sure this is what your wanting:http://drewsdesigns.com/codingforums/gamemonarch.png