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
Cristian Castro
Courses Plus Student 12,666 PointsI am receiving errors from the validator website
They say something is wrong with this section in html. </nav> </header> <div id="wrapper"> <section> They say something is wrong with this section in html.
In CSS it said there is an error:
gallery li a p Value Error : font Parse Error size:0.20em
I don't understand.
5 Answers
Ali Esmaili
7,985 PointsCould you show us the rest of the HTML code, & possibly the CSS code in question?
Cristian Castro
Courses Plus Student 12,666 Points/************************ GENERAL ************************/
body{ font-family: 'Work 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: 'Bevan', 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:30px; height:30px; margin: 0 5px }
/************************ PAGE: PORTFOLIO ************************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float:left; width: 45%; margin: 2.5%; background-color: #303030; color: #fff; }
gallery li a p {
margin:0; padding:5%; font size:0.20em; color: #707070; }
/************************ PAGE: PORTFOLIO ************************/
.profile-photo { display:block; max-width: 200px; margin: 0 auto 30px; border-radius: 100%; }
/************************ PAGE: ABOUT ************************/
.profile-photo { display:block; max-width: 200px; 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'); }
/************************ COLORS ************************/
/* site body */
body{
background-color: #333;
color: #999;
}
/* black header */ header { background: #000; border-color: #f23; }
/* nav background on mobile devices */ nav { background: #f23; }
/* logo text */ h1, h2 { color: #fff; }
/* links */ a { color: #fff; }
/* nav links */ nav a, nav a:visited{ color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover{ color: #800
Ali Esmaili
7,985 PointsFor The Question You Asked:
I think your issue is that in your CSS, you forgot to put a hyphen in one of your selector properties. You accidentally wrote font size: instead of font-size:, like so...
/* What you wrote */
#gallery li a p {
color: #707070;
font size: 0.20em;
margin: 0;
padding: 5%;
}
/* What you meant to write */
#gallery li a p {
color: #707070;
font-size: 0.20em;
margin: 0;
padding: 5%;
}
This should solve your problem.
Ali Esmaili
7,985 PointsI have a few more notes for you. If you're not interested, completely ignore this post. : p
Follow-Up Note:
In your HTML file, do you have the !DOCTYPE, html, head, and body tags? I'm not seeing them in the example you provided. Your file should look something like this...
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Page setup, like the meta tags you already have -->
</head>
<body>
<!-- Website or app content, like the header and div tags you included -->
</body>
</html>
A Second Follow-Up:
The a ("hyperlink") tags in your HTML don't support the alt property. You can remove them, because they won't do anything...
<!-- What you have -->
<a href="img/boat.jpg" alt="">
<!-- What will be supported -->
<a href="img/boat.jpg">
Hey Look, Another Follow-Up:
You could clean up your CSS file, so that you can diagnose things a little bit better. Here are a couple of pointers...
- Do you find yourself repeating code/properties? Try combining some of those selectors! In some cases you will need to be more specific, but until you come to those scenarios, try not to repeat yourself...
/* A few selectors that are repeating */
h1,
h2 {
color: #fff;
}
a {
color: #fff;
}
nav a,
nav a:visited {
color: #fff;
}
/* The same selectors sharing a repeating property */
a,
h1,
h2,
nav a,
nav a:visited {
color: #fff;
}
- It looks like you have some overqualified selectors, which means you are being more specific than you need to be [HOWEVER, if you use different elements in different rules with the same class (e.g.
nav a.selectedandnav i.selected) and you want them to act differently, ignore this]...
/* One of the overqualified selectors */
nav a.selected,
nav a:hover {
color: #800;
}
/* The alternative that should have the same result */
nav .selected,
nav .selected:hover {
color: #800;
}
- When writing CSS, it's much more readable and easier to diagnose when you write multi-line instead of inline.
- Don't forget to use semicolons. Forgetting one could mess things up unexpectedly and they're easy to miss.
I hope this has been helpful. : )
Ali Esmaili
7,985 PointsCristian Castro – Did my response help?
Cristian Castro
Courses Plus Student 12,666 PointsCristian Castro
Courses Plus Student 12,666 Points<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cristian Castro | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Work+Sans:400,800,700,600|Bevan' 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>Cristian Castro</h1> <h2>Photographer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/church.jpg" alt=""> <img src="img/church.jpg" alt=""> <p>Cathedral of Cartagena, Colombia</p> </a> </li> <li> <a href="img/boat.jpg" alt=""> <img src="img/boat.jpg" alt=""> <p>Tropical islands of Cartagena</p> </a> </li> <li> <a href="img/burger.jpg" alt=""> <img src="img/burger.jpg" alt=""> <p>Yummy! Delicious burger!</p> </a> </li> <li> <a href="img/flowers.jpg" alt=""> <img src="img/flowers.jpg" alt=""> <p>Some tropical flowers you can find in Cartagena, Colombia</p> </a> </li> <li> <a href="img/light.jpg" alt=""> <img src="img/light.jpg" alt=""> <p>A light outside Gabriel Garcia Marquez house in Cartagena, Colombia</p> </a> </li> </ul> </section> <footer> <a href="http://www.facebook.com/ccriscastphoto/"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social_icon"></a> <p>© 2016 Cris Cast Photography.</p> </footer> </div> </body> </html>