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
Jeremy Dortch
3,799 PointsGrey Boxes around links in the header....
So everything was running smoothly until this step, and now I have grey boxes surrounding the links in my header that correspond to the #999 color. I've tried changing the only line of code that has this color but it has no effect. Will post the code if it helps answering this question. Thanks!
Zachary Caldwell
13,166 PointsPosting the code will help greatly, but check and make sure your selectors have both opening and closing brackets and that you've included a semi-colon after each rule in your selectors. Small errors can happen like this all the time and that's likely the cause.
Jeremy Dortch
3,799 PointsThanks for all the help!
/******************* 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%; }
a {color: #6ab47b; }
/******************* 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: '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; }
/******************* NAVIGATION *******************/
nav { text-align: center; padding: 5px 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; } footer {clear: both; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/******************* 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
}
/******************* COLORS *******************/
/site body/
body { background-color: #fff; }
/green header/
header { background: #6ab47b; border-color: #599a68; }
/heading/
/color on logo texts/
h1, h2 { color: #fff; }
/links/
a {color: #6ab47b; }
/navigation 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;
}
Zachary Caldwell
13,166 PointsTwo problems that I see:
Padding needs a colon in your wrapper selector.
--> Incorrect: max-width: 940px; margin: 0 auto; padding 0 5%;
--> Correct: max-width: 940px; margin: 0 auto; padding: 0 5%;
Everything from "COLORS" down is being ignored because of invalid use of "/" (i am assuming these were meant to be comment blocks) use /*...*/ instead on each of these lines where you commented incorrectly.
--> Incorrect: /site body/
--> Correct: /*site body*/
After fixing those errors I ran the fixed code through w3c css validator and everything seemed peachy. You can use this at http://jigsaw.w3.org/css-validator/#validate_by_input
Jacob Herper
94,150 PointsJacob Herper
94,150 PointsCan you please post your code? It might just be a small error in the css.