CODEWITHSUNDEEP
htmlcssnav
Gilles
Gilles

Reputation: 121

Space Between Nav

How do I make a nice header/nav section?

This is my code:

body {
   margin: 0px;
}

.container {
  width: auto;
  height: 1920px;
  background-color: #514367;
}

header {
  width: 100%;
  height: 70px;
  background-color: #647551;
  top: 0px;
}

nav ul {
  margin: 0px;
  padding: 24px 0px 5px 30px;
}

nav li {
   margin-right: 40px;
   list-style: none;
   text-decoration: none;
   display: inline;
}

nav li a {
   text-decoration: none;
}
<!DOCTYPE html>
<html>
   <head>
      <link href="css/Main.css" type="text/css" rel="stylesheet" />
      <meta charset="utf-8">
      <title>Talkody - Design Services</title>
   </head>
   <body>
      <div class="container">
         <!-- Menu start -->
         <header>
            <nav>
               <ul>
                  <li><a href="index.html">Home</a></li>
                  <li><a href="about/index.html">About</a></li>
                  <li><a href="portfolio/index.html">Portfolio</a></li>
                  <li><a href="contact/index.html">Contact</a></li>
               </ul>
            </nav>
         </header>
         <!-- Menu end -->
         </div>
   </body>
</html>

So what I want. I want the text a little bit more in the middle. Wait!, let's tell it in a another way. You see the 'StackExchange' navbar above?; Well, that's what I want. I want the text on the right (but centered in the middle area) and then a logo on the left (but also centered in the middle area).

I'm trying to improve my acknowledge in HTML5. So I started working with the nav and header function.

Upvotes: 2

Views: 10923

Answers (1)

Dylan Stark
Dylan Stark

Reputation: 2395

A great HTML5/CSS3 positioning solution is CSS Flexbox.

To begin using this, add display:flex to your <ul>. Then it's internal items can be positioned a variety of ways with properties either on the flex container (the <ul>) or on the flex children (the <li>).

To keep your <ul> and it's children from extending too wide (like the stack overflow nav does) I've given it a set width of 80%, then centered it inside of the <nav> using flexbox as well.

Flexbox is a really versatile tool for positioning, you can read a little more about it here.

body {
   margin: 0px;
}

.container {
  width: auto;
  height: 1920px;
  background-color: #514367;
}

header {
  width: 100%;
  height: 70px;
  background-color: #647551;
  top: 0px;
}

nav {
  display:flex;
  justify-content:center;
  }

ul {
  margin:0 auto;
  width:80%;
  display:flex;
  justify-content:space-between;
  }

#logo {
  margin-right:auto;
  }
  
nav ul {
  margin: 0px;
  padding: 24px 0px 5px 30px;
}

nav li {
   margin-right: 40px;
   list-style: none;
   text-decoration: none;
   display: inline;
}

nav li a {
   text-decoration: none;
}
<!DOCTYPE html>
<html>
   <head>
      <link href="css/Main.css" type="text/css" rel="stylesheet" />
      <meta charset="utf-8">
      <title>Talkody - Design Services</title>
   </head>
   <body>
      <div class="container">
         <!-- Menu start -->
         <header>
            <nav>
               <ul>
                  <li id="logo"><a href="index.html">Home</a></li>
                  <li><a href="about/index.html">About</a></li>
                  <li><a href="portfolio/index.html">Portfolio</a></li>
                  <li><a href="contact/index.html">Contact</a></li>
               </ul>
            </nav>
         </header>
         <!-- Menu end -->
         </div>
   </body>
</html>

Upvotes: 3

Related Questions