Navigation positioned wrongly in html/css

Question

Hey there!

I'm coding my new portfolio and the navigation on it is in the wrong place and I can't figure out why.

http://i26.tinypic.com/25psi10.png

I want the text to be inline with the lines on the sides but instead it's moved to the right and down and I can't figure out why it's done this.

This is the relevant coding:

MozazDesign Portfolio

    </div><!--end logo-->

    <div id="nav">
        <ul id="main_nav">
            <li><a href="#">home</a></li>
            <li><a href="#">about me</a></li>
            <li><a href="#">gallery</a></li>
            <li><a href="#">blog</a></li>
            <li><a href="#">contact</a></li>
        </ul><!--end main nav-->
    </div><!--end nav-->
</div><!--end header-->

body { padding: 0px; margin: 0px; background:url('images/Background.png'); font-family: century gothic; }

nav a {

text-decoration: none; color: white; }

container {

margin: 0 auto; width: 960px; }

logo {

background:url('images/Logo.png'); height: 340px; width: 524px; float: left; margin-left: 0px; }

nav {

background:url('images/Nav_Container.png'); width: 427px; height: 33px; float: right; margin-top: 100px; padding: 0px;

}

main_nav li {

list-style: none; display: inline; font: 18px century gothic, sans-serif; color: white; margin-right: 18px; padding: 0px; }

Any ideas?

Thanks in advance!

Answer 1

What happens when you decrease the margin-right: 17px;

I believe to your last element you should add less margin-right

Answer 2

You should try to decrease the "font-size: 18px;" and/or "margin-right: 17px;" until the text is positioned as you desire.

[update] Also try to add

#main_nav { float: left; }

to have better control over the position of your links. [update]

Answer 3

Instead of adding margin-right, try inserting invisible spacers, like so:

  <div id="nav">
   <ul id="main_nav">
    <li><a href="#">home</a></li>
    <li>&nbsp;</li>
    <li><a href="#">about me</a></li>
    <li>&nbsp;</li>
    <li><a href="#">gallery</a></li>
    <li>&nbsp;</li>
    <li><a href="#">blog</a></li>
    <li>&nbsp;</li>
    <li><a href="#">contact</a></li>
   </ul><!--end main nav-->
  </div><!--end nav-->

That way you don't wind up with unneeded spacing at the end. Give the spacers classnames if you like and set their size until they're just right.

Answer 4

It's most likely default padding/margins on your ul and li items. Try zeroing everything out in your CSS like so and then adding it back slowly until you find the point where the menu layout breaks:

#main_nav,
#main_nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#main_nav li { 
    display: inline;
    margin-right: 17px; /* lower this value and see if that fixes the layout */
    font: 18px century gothic, sans-serif; /* specify a fall back font that's at least the same type as century gothic */
    color: white;        
}