Geek Answers Handbook

Aligning the horizontal navigation bar

I have a little problem aligning my horizontal navigation bar to the center of the browser. Now, before I put forward this request, I want to indicate that I am new to HTML and CSS, so bear with me, which is undoubtedly a quick fix!

Headers and footers should be full width with fixed content in the center of the browser. The navigation bar should be under the heading. Currently, the bar is aligned to the left, but it does not seem to budge without losing its shape.

HTML:

<body>
<div id="header">
  <div class="wrap">
    <img src="images/logo_header.png" alt="Image alt." />
  </div>
</div>
<div id="nav">
  <div class="wrap">
    <ul>
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
      <li><a href="#">Option 3</a></li>
      <li><a href="#">Option 4</a></li>
      <li><a href="#">Option 5</a></li>
      <li><a href="#">Option 6</a></li>
    </ul>
  </div>
</div>
<div id="content"><div class="wrap">Content</div></div>
<div id="footer"><div class="wrap">Footer</div></div>
</body>

and CSS:

body {
  margin:0;
  padding:0;
  font-family:verdana;
}
.wrap {
  position:relative;
  margin:0 auto;
  width:960px;
}
#header {
  float:left;
  width:100%;
  background-color:#FFCC33;
}
#nav {
  float:left;
  background-color:#FFCC33;
  border-top:2px solid #000000;
}
#nav ul {
  list-style:none;
  display:inline;
  margin:0px;
  padding:0px;
}
#nav li {
  display:inline;
  line-height:1.8em;
}
+5
source share
3 answers

try the following:

<body>
<div id="header">
  <div class="wrap">
    <img src="images/logo_header.png" alt="Image alt." />
  </div>
</div>
<div class="container">
<div id="nav">
  <div class="wrap">
    <ul>
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
      <li><a href="#">Option 3</a></li>
      <li><a href="#">Option 4</a></li>
      <li><a href="#">Option 5</a></li>
      <li><a href="#">Option 6</a></li>
    </ul>
  </div>
</div>
</div>

<div id="content"><div class="wrap">Content</div></div>
<div id="footer"><div class="wrap">Footer</div></div>
</body>


.container{width:980px;margin:0 auto;text-align:center;}
.nav{float:left; text-align:left;}
+2
source

:

#nav .wrap {text-align:center; }

.

.

+1

try to do it For HTML

<nav class="computer">
    <div class="container">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">services</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </div>
</nav>

for css:

nav{
    width: 100%;
    .container{
        width: 50vw;
        margin: 0 auto;
        ul{
          text-align: center;
          li{
            width: 10vw;
          }
        }
     }
 }

since I had 5 elements, I used 50 vw for the container and 10 vw for each element. This aligns the navigation bar, fully centered. don't forget to use the meta tag to view

<meta name="viewport" content="width=device-width, initial-scale=1"/>

NOTE: I am using LESS here for css

0
source

More articles:


All Articles