CODEWITHSUNDEEP
htmlcss
Latoya Emmer
Latoya Emmer

Reputation: 29

Centering Nav bar

I am currently trying to center my nav bar on my website. I attempted several different ways to do this all failing. I believe there might be something wrong with my code... I am not currently using an IDE only notepad if this makes a difference.

Here is the code:

ul#list-nav {
  list-style: none;
  margin-left: -540 auto;
  padding: 720;
  width: 1040;
}
ul#list-nav li {
  display: inline
}
ul#list-nav li a {
  text-decoration: none;
  padding: 5px 0;
  width: 100px;
  background: #F7819F;
  color: #DF013A;
  float: left;
  text-align: center;
  border-left: 1px solid #ffffff;
}
ul#list-nav li a:hover {
  background: #DF01A5;
  color: #DF01A5;
}
div#nav {
  text-align: center;
  text-shadow: 2px 2px 8px #FF0000;
}
div#nav ul {
  display: inline-block;
  border-radius: 25px;
}
<ul id="list-nav">
  <li><a href="index.html">Home</a></li>
  <li><a href="bio.htm">Biography</a></li>
  <li><a href="career.htm">Career</a></li>
  <li><a href="links.htm">Links</a></li>
  <li><a href="contact.htm">Contact</a></li>
  <li><a href="tutorial.htm">Tutorial</a><li>
</ul>

Upvotes: 1

Views: 106

Answers (5)

Raj Rana
Raj Rana

Reputation: 90

add this property  margin-left:25% and margin-right:25% to the **ul#list-nav**  itz works for all viewport Try this.


ul#list-nav {
  list-style: none;
 margin-left:25%;
 margin-right:25%;

  padding: 720;
  width: 1040;
}
ul#list-nav li {
  display: inline
}
ul#list-nav li a {
  text-decoration: none;
  padding: 5px 0;
  width: 100px;
  background: #F7819F;
  color: #DF013A;
  float: left;
  text-align: center;
  border-left: 1px solid #ffffff;
}
ul#list-nav li a:hover {
  background: #DF01A5;
  color: #DF01A5;
}
div#nav {
  text-align: center;
  text-shadow: 2px 2px 8px #FF0000;
}
div#nav ul {
  display: inline-block;
  border-radius: 25px;
}
<ul id="list-nav">
  <li><a href="index.html">Home</a></li>
  <li><a href="bio.htm">Biography</a></li>
  <li><a href="career.htm">Career</a></li>
  <li><a href="links.htm">Links</a></li>
  <li><a href="contact.htm">Contact</a></li>
  <li><a href="tutorial.htm">Tutorial</a><li>
</ul>

Upvotes: 0

dippas
dippas

Reputation: 60543

your issue is here 

ul#list-nav {
  list-style:none; 
  margin-left: -540 auto; 
  padding:720;
  width: 1040;
}

the length always needs a unit to work (except if the value is 0), otherwise the browser won't process it.

plus you are using the shorthand to margin-left, if you want to shortand attributes in this case just use margin

See how shorthand works here

so, take in consideration your values I think you are using px(pixels),

here is how you will center you navbar

ul#list-nav {
  list-style:none; 
  margin:0 auto; 
  width: 1040px;
}

Upvotes: 1

Oriol
Oriol

Reputation: 287980

You can use

ul#list-nav {
  text-align: center;
}
ul#list-nav > li { 
  display: inline-block;
}

You can also remove useless floats.

ul#list-nav {
  list-style: none;
  padding: 0;
  text-align: center;
}
ul#list-nav > li {
  display: inline-block;
}
ul#list-nav > li > a {
  text-decoration: none;
  display: inline-block;
  padding: 5px 0;
  width: 100px;
  background: #F7819F;
  color: #DF013A;
}
ul#list-nav > li > a:hover {
  background: #DF01A5;
  color: #DF01A5;
}
<ul id="list-nav">
  <li><a href="index.html">Home</a></li>
  <li><a href="bio.htm">Biography</a></li>
  <li><a href="career.htm">Career</a></li>
  <li><a href="links.htm">Links</a></li>
  <li><a href="contact.htm">Contact</a></li>
  <li><a href="tutorial.htm">Tutorial</a><li>
</ul>

Upvotes: 0

Halfpint
Halfpint

Reputation: 4079

We've all been in your shoes, the first tedious project to get a navigation bar to center...I remember those days! Fortunately its a very easy thing to do once you begin to understand how the browsers renders elements to the DOM.

First up, we need to define some sort of container element, you could use the body, but I normally define an extra "wrapper" to hold my elements. 

#navWrapper {
        width: 100%;
        height: 75px;
    }

    #navContainer {
        width: 200px;
        height: 75px;
        background: black;
        margin: 0 auto;
    }
<div id="navWrapper">
         <div id="navContainer">
              <nav>...</nav>
         </div> 
    </div>

Now lets style this, first off we want our wrapper to fill 100% of the viewport, we then want our nav container to be positioned in the centre of the screen. To do this, we can allow the browser to calculate the left/right offsets by using margin:0 auto, opposed to what you are doing above where you set absolute values (this will generally be bad practice for cross platform compatability).

So the whole css:

#navWrapper {
    width: 100%;
    height: 75px;
}

#navContainer {
    width: 1024px;
    height: 75px;
    background: black;
    margin: 0 auto;
}

Feel free to change these values as you please, I hope this helps you understand!

Upvotes: 0

aleksandar
aleksandar

Reputation: 2399

The solution is simple. You can use margin: 0 auto; which will center the navigation. Here is the solution:

ul#list-nav {
  list-style:none; 
  margin: 0 auto; /* notice the code here */
  width: 610px; /* notice the code here */
}

ul#list-nav li { 
  display: inline }  

ul#list-nav li a { 
  text-decoration:none;
  padding:5px 0; width:100px;
  background:#F7819F; 
  color:#DF013A; float: left;
  text-align:center; 
  border-left:1px solid #ffffff; }  

ul#list-nav li a:hover {
  background:#DF01A5; 
  color:#DF01A5; } 

div#nav{
  text-align: 
  center; 
  text-shadow: 2px 2px 8px #FF0000;
}
div#nav ul{
  display: inline-block; 
  border-radius: 25px;}
<ul id="list-nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="bio.htm">Biography</a></li>
      <li><a href="career.htm">Career</a></li>
      <li><a href="links.htm">Links</a></li>
      <li><a href="contact.htm">Contact</a></li>
      <li><a href="tutorial.htm">Tutorial</a><li>
</ul>

Upvotes: 1

Related Questions