CODEWITHSUNDEEP
htmlcssnavigationbar
Sydney Penny
Sydney Penny

Reputation: 1

How can I move my navigation bar to a different place?

I'm trying to make my nav bar be horizontal and centered. Right now, it's all smushed to the right of the website. How do I control where the bar is located?
Also, why can't I just have all my css under #nav (why do I need #nav ul li, etc?)

#nav{
    width: 90%;
    text-align: center;
    font-size: 35px;
    text-align: center;
}

#nav ul li{
    display: inline;
    height: 60px;
    text-align: center;
}

#nav ul li a{
    padding: 40px;
    background: #25ccc7;
    color: white;        	
    text-align: center;
}
<div id="nav">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</div>

Upvotes: 0

Views: 1706

Answers (1)

connexo
connexo

Reputation: 56793

You need the different css selectors because not all the styles are meant to be applied to the surrounding container #nav, but to certain elements inside it. With pure CSS, it is not possible to nest rules. If nesting is what you were asking for, take a look at LESS or SASS (DuckDuckGo is your friend).

Your list items were pushed a little to the right because that is the natural behaviour of list items unless you overwrite the responsible css attributes margin and / or padding (depending on the browser). So just reset both to 0 in your CSS for the list items.

#nav {
  background-color: #e8e8e8;
  width: 90%;
  font-size: 35px;
  text-align: center;
  margin: 0 auto;
}
#nav ul {
  display: inline-block;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}
#nav ul li {
  display: inline;
  text-align: center;
  margin: 0;
  padding: 0;
}
#nav ul li a {
  padding: 40px;
  background: #25ccc7;
  color: white;
  text-align: center;
}
<div id="nav">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</div>

Upvotes: 1

Related Questions