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
Dian Zhang
508 Pointswhite header
Hi, after I put changes to the css, my header became blank. And I have no idea which step was wrong. Can anybody help? THX!
Here is my css coding:
/************* COLORS *************/
/* site body*/
/************* GENERAL *************/
body {
font-family: 'Open Sans', sans-serif; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img { max-width: 100%; } /************* HEADING *************/ header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Ubuntu', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.6em; }
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/************* 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; }
/************* NAVIGATION *************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
a { color: #6ab47b; }
/************* 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 }
gallery li a p
/* green header*/
header { background: #6ab47b; border-color:#599a68; }
/* logo text*/ h1, h2 { color: #fff; } /* nav background on mobile devices*/ nav { background: #599a68; } /* nav link*/ nav a, nav a:visited { color: #fff; }
/* selected nav link*/
nav a.selected, nav a:hover { color: #32673f;
}
body {
background-color: #fff; color: #999;}
3 Answers
Joel Smith
14,779 PointsI can still see some commenting that is incorrect. I'll post it here as well as the correction.
/* site body*/
/************* GENERAL *************/
body {font-family: 'Open Sans', sans-serif; }
wrapper {max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img { max-width: 100%; }
/************* HEADING *************/
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo { text-align: center; margin: 0; }
h1 { font-family: 'Ubuntu', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.6em; }
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/************* 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; }
/************* NAVIGATION *************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
a { color: #6ab47b; }
/************* 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 }
gallery li a p
/* green header*/
header { background: #6ab47b; border-color: #599a68; }
nav a { font-weight: 800; padding: 15px 18px; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/* logo text*/
h1, h2 { color: #fff; }
/* nav background on mobile devices/ nav { background: #599a68; } / nav link*/ nav a, nav a:visited { color: #fff; }
/* selected nav link*/
nav a.selected, nav a:hover { color: #32673f;
}
body { background-color: #fff; color: #999;}
Here it is, corrected:
/* site body*/
/************* GENERAL *************/
body { font-family: 'Open Sans', sans-serif; }
wrapper { max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img { max-width: 100%; }
/************* HEADING *************/
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo { text-align: center; margin: 0; }
h1 { font-family: 'Ubuntu', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.6em; }
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/************* 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; }
/************* NAVIGATION *************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
a { color: #6ab47b; }
/************* 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 }
/* green header*/
header { background: #6ab47b; border-color: #599a68; }
nav a { font-weight: 800; padding: 15px 18px; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/* logo text*/
h1, h2 { color: #fff; }
/* nav background on mobile devices */
nav { background: #599a68; }
/* nav link */
nav a, nav a:visited { color: #fff; }
/* selected nav link*/
nav a.selected, nav a:hover { color: #32673f; }
body { background-color: #fff; color: #999;}
I hope this helps.
Matt F.
9,518 PointsDid you include the period to denote classes and the # to denote id's in your code? If not, that may fix it.
Dian Zhang
508 PointsHi Matt-- yes, I did. Have put # and '', or ;
And I'm running out of ideas :(
Joel Smith
14,779 PointsWell, from what I can tell.. I think you have commented out your logo and some nav elements.. That's the only thing that I could find that may be giving you trouble.
Dian Zhang
508 PointsThanks Joel. I didn't think of that because the video said it didn't change anything to the result. Let me try fix that...
Joel Smith
14,779 Points/************* COLORS *************/
/* site body*/
/************* GENERAL *************/
body {
font-family: 'Open Sans', sans-serif; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img { max-width: 100%; } /************* HEADING *************/ header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Ubuntu', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.6em; }
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/************* 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; }
/************* NAVIGATION *************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
a { color: #6ab47b; }
/************* 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 }
gallery li a p
/* green header*/
header { background: #6ab47b; border-color:#599a68; }
/* -------------------------THIS IS THE STUFF THAT YOU HAVE COMMENTED IMPROPERLY--------*/
/* logo text/ h1, h2 { color: #fff; } / nav background on mobile devices/ nav { background: #599a68; } / nav link*/ nav a, nav a:visited { color: #fff; }
/*--------------------TO HERE----------------------------------------*/
/* selected nav link*/
nav a.selected, nav a:hover { color: #32673f;
}
body {
background-color: #fff; color: #999;}
For every comment, it must be surrounded by a /* and */ there is some stuff in here that has only / and / fix that and it should run just fine.
Happy coding.
Dian Zhang
508 PointsHey Joel, I've made the changes accordingly, as you can see. But the header is still blank... Really running out of ideas..
/* site body*/
/************* GENERAL *************/
body {
font-family: 'Open Sans', sans-serif; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img { max-width: 100%; }
/************* HEADING *************/
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Ubuntu', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.6em; }
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/************* 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; }
/************* NAVIGATION *************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
a { color: #6ab47b; }
/************* 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 }
gallery li a p
/* green header*/
header { background: #6ab47b; border-color: #599a68; }
nav a { font-weight: 800; padding: 15px 18px; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/* logo text*/
h1, h2 { color: #fff; }
/* nav background on mobile devices*/ nav { background: #599a68; } /* nav link*/ nav a, nav a:visited { color: #fff; }
/* selected nav link*/
nav a.selected, nav a:hover { color: #32673f;
}
body { background-color: #fff; color: #999;}
Dian Zhang
508 PointsDian Zhang
508 PointsThank you so much!!! It really works! :)
Joel Smith
14,779 PointsJoel Smith
14,779 PointsI'm really glad to be able to help, Dian.
Keep it up! :)