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
Jennifer Huang
2,705 Pointschanging nav background to none => nav takes on body background color (white) instead of header background color (green)
This is boggling me. In the video, I followed what Nick was doing, and after making the responsive changes to nav and setting background: none, the background color of nav became white instead of changing to the lighter shade of green of the header (and that Nick said it should take on in the video). When I changed the background of the body to red, the nav background color changed to red.
Incidentally, when I used background-color: none in the nav rule (instead of background: none), instead the change retained the background color set in main.css, only the shaded part was limited to the 45% width box surrounding the list items.
Thanks for your help! Cheers!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Nick Pettit</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="primary">
<h3>General Information</h3>
<p>Not currently looking for new design work, but I am available for speaking gigs and similar engagements. If you have any questions, please don't hesitate to contact me!</p>
<p>Please only use phone contact for urgent inquiries. Otherwise Twitter and email are the best ways to reach me.</p>
</section>
<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:555-6425">555-6425</a></li>
<li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">nickrp</a></li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
main.css
/*********************************
GENERAL
*********************************/
#wrapper {
max-width: 940px;
margin : 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 0;
}
/*********************************
HEADING
*********************************/
header {
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Changa One',sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
/*********************************
COLORS
*********************************/
body {
background-color:#fff;
color:#999;
}
/* green header */
header {
background: #6ab47b;
border-color:#599a68;
}
/* nav background on mobile */
nav {
background: #599a68;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
/*********************************
NAVIGATION
*********************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/*********************************
FOOTER
*********************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/*********************************
PAGE: ABOUT
*********************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/*********************************
PAGE: PORTFOLIO
*********************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
/*********************************
PAGE: CONTACT
*********************************/
.contact-info {
list-style:none;
padding:0;
margin:0;
font-size:0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png');
}
responsive.css
@media screen and (min-width: 480px) {
/*********************************
TWO COLUMN LAYOUT
*********************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/*********************************
PAGE: PORTFOLIO
*********************************/
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4n) {
clear: left;
}
/*********************************
PAGE: ABOUT
*********************************/
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
}
@media screen and (min-width: 660px) {
/*********************************
HEADER
*********************************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
}
Jennifer Huang
2,705 Pointsthanks Jason! that did the trick.
Jennifer Huang
2,705 Pointsthanks Jason! that did the trick.
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsFirst off, the header in this project is supposed to be floated left. I don't see that in your css.
You have a partially collapsed header because it's not containing the floated navigation. This is causing at least some or perhaps all of your color problems. So I would fix that first and then let us know which of your color problems you're still having. Your nav is actually outside of the header and so you are seeing the body background through your nav. Which is why you saw the red.
header {
float: left;
}
Add float: left to your existing header rule.
Also, to save you from future problems, you want to clear this floated header in your wrapper div which comes right after the header.
Add clear: both; to your existing #wrapper rule.
Jason Anello
Courses Plus Student 94,610 PointsAlso, regarding background-color: none; vs. background: none -
'none' is not a valid value for background-color so the browser probably ignored it and you didn't notice a change. background-color can only accept a color value or the keyword transparent.
The reason the shorthand background property works with 'none' is because what you are really doing is setting background-image to none and because the rest of the values for the other properties are omitted they're all reset to their initial values. And for background-color it is "transparent".
So when you use background: none, you're effectively setting the background color back to transparent among other things.
Jennifer Huang
2,705 PointsHi Jason, Thanks for the directions and for explaining how background and background-color work.
Adding the declaration of "float: left" did the trick.
Incidentally I do believe that I had set the nav inside the header, or that's how I'm interpreting this:
<header>
<a href="index.html" id="logo">
<h1>Nick Pettit</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
</header>
I understand the purpose of clearing the floats in the #wrapper rule.
Would you mind sharing why the float property was key to this working? I can't seem to find the explanation in the videos in this series, but haven't rewatched all the videos yet.
Thanks!
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome. Glad it helped you out.
Sorry for the confusion. You did put the nav in the header.in your markup. I only meant to say that because your header was partially collapsed it wasn't containing the nav on the rendered page. So that's why your nav was not over the green header background but instead over the white body background. So when you remove the background color from your nav its the body background that was showing through.
I haven't been through this project so I don't know at which point Nick covered this. It is in the project files for this video. You may want to work your way backward and try to find where you might have missed it. I'm assuming he covers it. I've noticed that some people have it in their code and others don't. Maybe its covered quickly and was missed?
Anyways, normally a parent element will not contain its' floated children. If all of the direct children inside are floated then it will collapse to zero height. Sometimes this is ok. When you are using a background color it's not ok because you can't see your background.
Floating the parent is one technique that will make a parent contain its floated children.
Jennifer Huang
2,705 PointsThanks again for your explanation.
Yes, float property was added to the header selector in an earlier selection (Build Navigation with Unordered LIsts, my bad) but the discussions on float (that I've seen so far before the Responsive Web Design and Testing section) were only in context of the main content on the pages, and not as specific to the parent/child as what you offered here.
I'm hoping it's covered in the <a href="http://teamtreehouse.com/library/css-layout-techniques">CSS Layout Deep Dive</a> which I'll take a look at next.
Thanks again for all your help.
Cheers!
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome Jennifer.
I'm not sure if it is explained. I need to go through this project myself so I know.
Floats might be explained more in css layout techniques.
A distinction should probably be made about floating the header vs. floating the other elements on the page that you mentioned. They're all floated for different reasons.
Floating the gallery images for example was done for layout purposes and I think you're saying that this was explained.
The header itself doesn't really need to be floated. But since the header contains floated children, some technique needs to be used to prevent it from collapsing. I guess this is why Nick floated it. In terms of the header, floating is not needed for any other purpose since it occupies the full width of the page.
As I think I mentioned previously, that floated header does need to be cleared though and I think that was left off the project. Several problems occur because of it like the profile photo not being displayed properly in firefox. I think you're past that point.
Here are some other ways to make a parent contain its floated children if you're interested: (in the collapsing section)
http://css-tricks.com/all-about-floats/
Floating the parent is omitted from this article though. Not sure why.
Jennifer Huang
2,705 PointsThank you Jason. That link was very helpful in explaining the collapsed parent and clearing.
In the video where Nick added the float property to the header, he said that "floating the header to the left doesn't have any practical use right now but it will later on when we style our desktop layout." There wasn't anything about the collapsed parent in the later videos in this series "How to Make a Website" but that was a super-introductory class. Methinks I'll see more about it in the CSS Layout Deep Dive.
Thanks again for all your guidance! Have a great rest of your holiday weekend. :)
Jason Anello
Courses Plus Student 94,610 PointsMaybe explaining it was just beyond the scope of the course like you mentioned. You have to draw the line somewhere or the course will be too long.
Anyways, glad you made it through.
You enjoy the rest of your holiday weekend too!
Jennifer Huang
2,705 PointsUgh wow that was ugly. Here's the Codepen: http://codepen.io/anon/pen/dhIwp
Jennifer Huang
2,705 Points(dupe)
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Jennifer,
You need to have a blank line before your 3 opening back ticks on each code block. Try editing your post and then go to the beginning of your opening back ticks for each code block and hit
<enter>twice.Edit enter was stripped out