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
Laura Cressman
12,548 PointsNavigation bar help?
I am trying to build my own navigation bar, but I am really struggling with overriding properties. For instance, the proper color shows up for my title but not my nav bar. My code is below. In addition, When I add more rules to the CSS, such as for nag ul li, it's like the nav rule stops existing! Any help would be appreciated :) HTML
<body>
<h1 id="title">Title</h1>
<nav>
<ul>
<li><a href="#">Home</li>
<li><a href="#">About</li>
<li><a href="#">Contact</li>
</ul>
</nav>
</body>
CSS
* {
padding: 0;
margin: 0;
background-color: #F9F9F9;
}
#title {
background-color: #333366;
color: #00FF00;
font-size: 2em;
text-align: center;
width: 100%;
padding: 0.5% 0;
}
nav {
background-color: red;
width: 100%;
}
3 Answers
Matthew Craig
6,340 PointsI may be wrong here, but it seems like part of the problem may be that there's a conflict between the two elements since the width for both is set to 100%. I'll show you what I did, but that keep in mind that this may not be the only(or right, for that matter) way to fix it.
<body>
<h1 id="title">Title</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</body>
</html>
* {
padding: 0;
margin: 0;
background-color: #F9F9F9;
}
#title, nav {
float: left;
}
#title {
background-color: #333366;
color: #00FF00;
font-size: 2em;
text-align: center;
width: 100%;
padding: 0.5% 0;
}
nav {
background-color: red;
width: 100%;
height: 50px;
}
Basically, I floated both elements to give them their own space. I also got rid of the ul in the nav element, since the default styling for nav is inline-block, whereas the default styling for an unordered list is block(I think...). Anyway, I really hope that helps!
John Locke
15,479 PointsCSS has specificity rules to determine which rule wins out. Think of it like a point system: Each element selector is worth 1. Each class is worth 10. Each ID is worth not 100, but much more. The important tag overrides everything, and should be avoided.
There are several charts and pages that explain it much better than I just did. http://www.standardista.com/css3/css-specificity/ http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity http://css-tricks.com/specifics-on-css-specificity/ http://www.webstock.org.nz/talks/css-tools-massive-websites/
James Barnett
39,199 PointsI think this is the best explanation of specificity I've read
Laura Cressman
12,548 PointsThank you both very much!!