Tutorial :Navigation positioned wrongly in html/css



Question:

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>


Solution:1

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

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


Solution: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]


Solution:3

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


Solution:4

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.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »