CODEWITHSUNDEEP
htmlcss
MozazDesign
MozazDesign

Reputation: 617

Navigation positioned wrongly in html/css

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:

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;  <!--check-->
}

#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;
}
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <title>MozazDesign Portfolio</title>
  </head>

  <body>

    <div id="container">
      <div id="header">
        <div id="logo">

        </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-->
    </div>
  </body>
</html>

Upvotes: 3

Views: 84

Answers (4)

Pat
Pat

Reputation: 25675

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;        
}

Upvotes: 0

Niki
Niki

Reputation: 1924

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]

Upvotes: 1

Robusto
Robusto

Reputation: 31883

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.

Upvotes: -1

sushil bharwani
sushil bharwani

Reputation: 30177

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

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

Upvotes: 2

Related Questions