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
seth hinkle
1,090 Pointsmy site wont validate, even after using HTML tidy. Please help, I am stuck and cant move forward!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org"> <meta> <title>Seth Hinkle | Designer></title> <link rel="stylesheet" href="css/normalize.css" type="text/css"> <link href='http://fonts.googleapis.com/css?family=Niconne|Cantarell:400,700italic,400italic|Bilbo' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Volkhov:400,700,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css" type="text/css"> <link rel="stylesheet" href="css/responsive.css" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <a href="index.html" id="logo" name="logo"></a> <h1><a href="index.html">Skare Krow Design Inc</a></h1> <h2><a href="index.html">Designer</a></h2> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contacts</a></li> </ul> <div id="wrapper"> <ul id="gallery"> <li><a href="image02/dead%20tree.jpg"><img src="image02/dead%20tree.jpg" alt=""></a> <p>Tattoo Design Of A Dead Oak Tree.</p> </li> <li><a href="image02/Sad%20Donald%20Duck.jpg"><img src="image02/Sad%20Donald%20Duck.jpg" alt=""></a> <p>Tattoo of a sad looking Donald Duck, designed by Seth Mosby Hinkle.</p> </li> <li><a href="image02/Rose%20Portrait.jpg"><img src="image02/Rose%20Portrait.jpg" alt=""></a> <p>A beautiful Rose Portrait tattoo, designed by Rachel Hinkle.</p> </li> <li><a href="image02/Clown%20Moon.jpg"><img src="image02/Clown%20Moon.jpg" alt=""></a> <p>Tattoo of a Festive Clown Moon, done by Seth Mosby Hinkle.</p> </li> <li><a href="image02/Wikked%20Iron%20Cross.jpg"><img src="image02/Wikked%20Iron%20Cross.jpg" alt=""></a> <p>Tattoo of a Sinister Iron Cross, designed by Seth Mosby Hinkle.</p> </li> </ul> <a href="http://twitter.com/skrow81"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a> <a href="http://facebook.com/seth.hinkle2"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a> <p>© Seth Mosby Hinkle.</p> </div> </body> </html>
This is my site after using HTML tidy. The validator says there is a problem validating my HTML due to the meta tag
Line 5, column 6: required attribute "CONTENT" not specified
<meta>
This is my site before cleanup
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Seth Hinkle | Designer></title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Niconne|Cantarell:400,700italic,400italic|Bilbo' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Volkhov:400,700,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Skare Krow Design Inc</h1> <h2>Designer</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">Contacts</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="image02/dead tree.jpg"> <img src="image02/dead tree.jpg" alt=""> <p>Tattoo Design Of A Dead Oak Tree.</p> </a> </li> <li> <a href="image02/Sad Donald Duck.jpg"> <img src="image02/Sad Donald Duck.jpg" alt=""> <p>Tattoo of a sad looking Donald Duck, designed by Seth Mosby Hinkle.</p> </a> </li> <li> <a href="image02/Rose Portrait.jpg"> <img src="image02/Rose Portrait.jpg" alt=""> <p>A beautiful Rose Portrait tattoo, designed by Rachel Hinkle.</p> </a> </li> <li> <a href="image02/Clown Moon.jpg"> <img src="image02/Clown Moon.jpg" alt=""> <p>Tattoo of a Festive Clown Moon, done by Seth Mosby Hinkle.</p> </a> </li> <li> <a href="image02/Wikked Iron Cross.jpg"> <img src="image02/Wikked Iron Cross.jpg" alt=""> <p>Tattoo of a Sinister Iron Cross, designed by Seth Mosby Hinkle.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/skrow81"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a> <a href="http://facebook.com/seth.hinkle2"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a> <p>© Seth Mosby Hinkle.</p> </footer> </div> </body> </html>
Please help me to fix this issue!!
5 Answers
Marcus Parsons
15,719 PointsAlrighty Seth,
You had a couple issues that were due to URL encoding. First, in the head section, google's own URL it gives you is not URL encoded as it should be to pass validation. The | character should be encoded to a %7C. With the changes below, I was able to get your page to successfully pass validation.
This line in the <head> element:
<link href='http://fonts.googleapis.com/css?family=Niconne|Cantarell:400,700italic,400italic|Bilbo' rel='stylesheet' type='text/css'>
Should be this:
<link href='http://fonts.googleapis.com/css?family=Niconne%7CCantarell:400,700italic,400italic%7CBilbo' rel='stylesheet' type='text/css'>
Also, as I mentioned, unless you rename each file, you have to use %20 for each space within a filename:
<ul id="gallery">
<li>
<a href="image02/dead%20tree.jpg">
<img src="image02/dead%20tree.jpg" alt="">
<p>Tattoo Design Of A Dead Oak Tree.</p>
</a>
</li>
<li>
<a href="image02/Sad%20Donald%20Duck.jpg">
<img src="image02/Sad%20Donald%20Duck.jpg" alt="">
<p>Tattoo of a sad looking Donald Duck, designed by Seth Mosby Hinkle.</p>
</a>
</li>
<li>
<a href="image02/Rose%20Portrait.jpg">
<img src="image02/Rose%20Portrait.jpg" alt="">
<p>A beautiful Rose Portrait tattoo, designed by Rachel Hinkle.</p>
</a>
</li>
<li>
<a href="image02/Clown%20Moon.jpg">
<img src="image02/Clown%20Moon.jpg" alt="">
<p>Tattoo of a Festive Clown Moon, done by Seth Mosby Hinkle.</p>
</a>
</li>
<li>
<a href="image02/Wikked%20Iron%20Cross.jpg">
<img src="image02/Wikked%20Iron%20Cross.jpg" alt="">
<p>Tattoo of a Sinister Iron Cross, designed by Seth Mosby Hinkle.</p>
</a>
</li>
</ul>
Shaun Kelly
35,560 PointsHi Seth,
You are missing the <!DOCTYPE HTML> tag, you are missing the <HTML> tags and also the closing </BODY> tag.
Marcus Parsons
15,719 PointsThe doctype is there. The code is just not correctly formatted on this forum. The problem is not with that, however, as I addressed.
Marcus Parsons
15,719 PointsHey Seth,
The reason your page won't validate is because you're using spaces in your filenames. This is a big no-no for web design because spaces don't belong in filenames. My recommendation is to go to your physical image files and rename them with a _ or - instead of a space in the filename. And then rename them in the HTML. This will prevent any invalid code and allow you to properly reference each image. You should always avoid putting spaces in filenames.
Otherwise, you'll have to use %20 for each space in your filename for the images, including in your anchor links. %20 is the URL encoding for a space.
seth hinkle
1,090 Points.invisible {
visibility: hidden;
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Seth Hinkle | Designer></title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Niconne|Cantarell:400,700italic,400italic|Bilbo' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Volkhov:400,700,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Skare Krow Design Inc</h1> <h2>Designer</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">Contacts</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="image02/dead tree.jpg"> <img src="image02/dead tree.jpg" alt=""> <p>Tattoo Design Of A Dead Oak Tree.</p> </a> </li> <li> <a href="image02/Sad Donald Duck.jpg"> <img src="image02/Sad Donald Duck.jpg" alt=""> <p>Tattoo of a sad looking Donald Duck, designed by Seth Mosby Hinkle.</p> </a> </li> <li> <a href="image02/Rose Portrait.jpg"> <img src="image02/Rose Portrait.jpg" alt=""> <p>A beautiful Rose Portrait tattoo, designed by Rachel Hinkle.</p> </a> </li> <li> <a href="image02/Clown Moon.jpg"> <img src="image02/Clown Moon.jpg" alt=""> <p>Tattoo of a Festive Clown Moon, done by Seth Mosby Hinkle.</p> </a> </li> <li> <a href="image02/Wikked Iron Cross.jpg"> <img src="image02/Wikked Iron Cross.jpg" alt=""> <p>Tattoo of a Sinister Iron Cross, designed by Seth Mosby Hinkle.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/skrow81"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a> <a href="http://facebook.com/seth.hinkle2"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a> <p>© Seth Mosby Hinkle.</p> </footer> </div> </body> </html>
Like this?
Marcus Parsons
15,719 PointsNot quite. Let's simplify this and have you post a snapshot of your workspace if you're working on this in Workspaces: http://www.teamtreehouse.com/forum/workspace-snapshots
seth hinkle
1,090 Points
seth hinkle
1,090 PointsWhen i use the HTML tidy, it places the percentage 20 in the spaces for me then it tells me that it does not recognize the meta. should I be using HTML tidy or should I just placed the presenters twenties or the underscore into the spaces myself?
Marcus Parsons
15,719 PointsI can't really tell what's all in your code. Try to reformat your code using the image below as a template. Remember to put a space above the first 3 backticks and a space below the last 3. Also, do not put anything else on the line with the first 3 backticks except for the language you're using i.e. html instead of css below.
seth hinkle
1,090 PointsDo i do that in workspaces or on forum?
Marcus Parsons
15,719 PointsThat is strictly for the forum. You don't need to repost all of the code; just edit what you already have. Also, if you do a comment when you reply instead of an answer, the question won't be flooded with answers.
seth hinkle
1,090 Pointsseth hinkle
1,090 PointsTHANKS!!!! :) They didn't cover that in classes!