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 trialMatthew Lehman
5,282 PointsMy CSS did not validate, its showing 3 errors. May i have my code checked to see what I am doing wrong?
/********************** 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%; }
h3 { margin: 0 0 1em 0; }
/********************** 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: 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: 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: ABOUT ****************/
.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
/********************** 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'); } /********************** COLORS ***********************/
/* site body */ body { background-color: #fff; color: #999; }
/* green header */ header { background: #6ab47b; border-color: #599a68; }
/* nav background on mobile */ nav { border-color: #599a68; }
/* logo text */ h1, h2 { color: #fff; }
/* links */ a { color: #6ab47b; }
/* nav background on mobile */ nav { background: #599a68; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* selected nav link*/ nav a.selcted, nav a:hover { color: #32673f; }
/* site body */ body { background-color: #fff; color: #999;
Chris Bennett
7,499 PointsDid it specify what the errors were?
5 Answers
Shane Meikle
13,188 PointsFirst issue: Change
body { font-family: 'Open sans,' sans-serif; }
to
body { font-family: 'Open sans', sans-serif; }
Notice the change of position of the comma.
Second issue:
/* selected nav link*/ nav a.selcted, nav a:hover { color: #32673f; }
Change to
/* selected nav link*/ nav a:selcted, nav a:hover { color: #32673f; }
Not seeing a third at the moment
Ted Sumner
Courses Plus Student 17,967 PointsThanks.
Ted Sumner
Courses Plus Student 17,967 PointsI don't see anything wrong, but there are some odd features. What is saying you have errors?
This is odd: gallery li a p. I cannot tell you it is wrong, though. Also, I suggest putting the color scheme first so that you don't overrule other colors by accident.
Matthew Lehman
5,282 Pointsthank you for replying back to me ted, but I did end up finding the errors.
they were '' problems using those symbols.
But thank you for helping me out.
Ted Sumner
Courses Plus Student 17,967 Pointscan you elaborate where the errors were so I can see what they were? I didn't see them when I formatted your code.
Marcus Parsons
15,719 PointsThe syntax highlighting that Ted did isn't picking up everything not because of anything he did but just because you have to notice how Github Flavored Markdown works on this site. The # sign, when prepended to a line, causes that line to become a header level format. If you notice, all of the gallery selectors (and wrapper
and logo
) are huge and bold, because of the # sign that you can't see that was turned into Markdown. Anytime you see raw CSS data posted and some selectors are bold and huge, these are id selectors that were turned into markdown.
i.e. this:
#gallery {}
becomes this:
gallery {}
A single # sign is the same as h1 and you can put up to 5 hash signs for an h5 like this:
h5
This is why it is important to put your code into blocks as seen in the Markdown Cheatsheet.
Matthew Lehman
5,282 Points/********************** GENERAL ***********************/
body { font-family: 'Open sans', sans-serif; }
Before hand I had
body { font-family: 'Open sans,' sans-serif; }
I just put this mark: '
before the comma instead of after and that seemed to do the trick
Matthew Lehman
5,282 Pointsthank you Shane.
I did end up finding the errors and it seemed like it did the trick.
Thanks for replying back to me
Shane Meikle
13,188 PointsNo problem :)
Just out of curiosity, what was the third error? I couldn't find it in the couple passes I did.
Matthew Lehman
5,282 Pointsit was my mistake it ended up being 2 errors.
my fingers hit a letter on my keyboard while I was scrolling down, so I just fixed that myself.
the other thing is my hover still doesnt seem to be working.
changing it to: (as you planned it)
/* selected nav link*/ nav a:selcted, nav a:hover { color: #32673f; }
made it cause more errors. and i rechecked the video and nick wanted to be the original one that I had:
/* selected nav link*/ nav a.selcted, nav a:hover { color: #32673f; }
doing that didn't cause any errors but my site still doesn't have my hover feature working
Ted Sumner
Courses Plus Student 17,967 PointsTed Sumner
Courses Plus Student 17,967 PointsPlease review the Markdown Cheatsheet for how to format code quotes.