Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Calvin Castillo
.a{fill-rule:evenodd;}techdegree
Calvin Castillo
Front End Web Development Techdegree Student 2,494 Points

How can I create a proper active background size to my navbar?

I am having a really hard time creating a background color inside my navbar to make a link active, I keep getting background colors that do not fit the entire height of the navbar, what am I doing wrong?

This is what I am trying to achieve 

<div class="header-1">
  <img src="http://www.bxconsortium.org/uploads/2/5/2/4/25243029/1386401365.png">
</div>

<!--- Navbar --->
<header>
  <div class="main-nav">
    <ul class="links">
      <a href="#"><li class="highlight">home</li></a>
      <a href="#"><li>our membership</li></a>
      <a href="#"><li>our work</li></a>
      <a href="#"><li>events calendar</li></a>
      <a href="#"><li>continuing education</li></a>
      <a href="#"><li>more...</li></a>
    </ul>
  </div>
</header>

body {
  margin: 0;
  padding: 0;
}

.header-1 {
  background-color: #272727;
  padding: 20px;
}

.header-1 img {
  width: 50%;
  margin-left: 15%;
}

/* ==== Navbar === */

.main-nav {
  background: #ececec;
  position: relative;
  bottom: 10px;
}

.links {
  margin-left: 12%;
}

.highlight {
  background: #acbcb9;
  color: #fff;
}

li {
  color: #7a7a7a;
  font-family: arial;
  font-weight: bold;
  display: inline-block;
  list-style: none;
  padding: 10px;
  text-transform: uppercase;
  position: relative;
  left: 20px;
}

li:hover {
  background: #acbcb9;
  color: #fff;
}

This is what i keep getting 

<div class="nav">
  <ul>
    <li><a href="#">Home</li></a>
    <li><a href="#" class="highlight">Tutorials</li></a>
    <li><a href="#">About</li></a>
    <li><a href="#">Newsletter</li></a>
    <li><a href="#">Contact</li></a>
  </ul>
</div>

body {
  margin: 0;
  padding: 0;
}

.nav {
  width: 960px;
  margin: 0 auto;
}

div {
  background: #444;
  padding: 1px;
  position: relative;
  top: 10px;
}

div a {
  color: #fff;
  text-decoration: none;
  font-size: 25px;
  font-weight: thin;
  font-family: Oswald;
  margin-right: 50px;
}

.nav li {
  display: inline-block;
  position: relative;
  left: 14%;
}

.highlight {
  color: #444;
  background: #fff;
  border-bottom: 1px solid #444;
}

 a:hover {
  background: #079992;
  transition: 0.4s;
}
hayden carnegie
hayden carnegie
601 Points
hayden carnegie
hayden carnegie
601 Points

Sorry I'm struggling to see your problem, can you reword it please or give more context?

1 Answer

Calvin Castillo
seal-mask
.a{fill-rule:evenodd;}techdegree
Calvin Castillo
Front End Web Development Techdegree Student 2,494 Points
Calvin Castillo
.a{fill-rule:evenodd;}techdegree
Calvin Castillo
Front End Web Development Techdegree Student 2,494 Points

I cannot get the nav menu's to cover the entire background when you hover over them, its too small.