Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2008
    New Jersey
    Thanked 0 Times in 0 Posts

    Question Navigation Menu Problem (Too Much Spacing?)


    I'm having a problem with my top horizontal navigation menu on my site Game Monarch.

    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.

  2. #2
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Thanked 45 Times in 43 Posts
    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

    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
    Last edited by FWDrew; 05-21-2008 at 06:52 AM. Reason: URL


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts