All geek questions in one place

Navigation incorrectly placed in html / css

I am coding my new portfolio, and the navigation on it is in the wrong place, and I cannot understand why.

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

I want the text to be embedded with lines on the sides, but instead it moved to the right and down, and I cannot understand why he did it.

This is the appropriate encoding:

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>
Run codeHide result
+3
source share
4 answers

What happens when you reduce margin-right: 17px;

I believe in my last element, you have to add less margin-right

+2
source

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

[]

#main_nav { float: left; }

. []

+1

This is most likely the default padding / fields for your ul and li positions. Try to zero out everything in your CSS like this, and then add it slowly until you find the point where the menu is blurred:

#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 at least the same type as century gothic */
    color: white;        
}
0
source

Instead of adding margin-right, try inserting invisible delimiters, for example:

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

This way you do not end up with an unnecessary interval at the end. Give class separators if you want, and set their size until they are right.

-1
source

Source: https://habr.com/ru/post/1756187/

More articles:


All Articles