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
Charlie Kloppenburg
5,060 PointsWhy doesn't my page look like Nick's? I'm half way through this block.
I've been trying to troubleshoot; and I've caught a couple glitches; but I'm stuck. Here is my code for the HTML and the CSS. Can you tell me where I missed the lesson?
HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Charlie Kloppenburg | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Charlie Kloppenburg</h1> <h2>Designer</h2> </a> <nav> <ul id="gallery"> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul> <li> <a href="IMG/numbers-01.jpg"> <img src="IMG/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="IMG/numbers-02.jpg"> <img src="IMG/numbers-02.jpg" alt=""> <p>Playing with Photoshop.</p> </a> </li> <li> <a href="IMG/numbers-06.jpg"> <img src="IMG/numbers-06.jpg" alt=""> <p>Trying to create the 80's.</p> </a> </li> <li> <a href="IMG/numbers-09.jpg"> <img src="IMG/numbers-09.jpg" alt=""> <p>Drips created using Photoshop.</p> </a> </li> <li> <a href="IMG/numbers-12.jpg"> <img src="IMG/numbers-12.jpg" alt=""> <p>Creating shapes.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/nickrp"><img src="IMG/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/nickpettit"><img src="IMG/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>Ā© 2015 Charlie Kloppenburg.</p> </footer> </div> </body> </html>
CSS: /************* GENERAL ************/
body { font-family: 'Open Sans', sans-serif; }
a { text-decoration: none; }
img { max-width: 100%; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
/************* 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 { margin: -5px 0 0; font-size: 0.75em; 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; }
/************* FOOTER ************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
/************* 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; color: #999; }
/* green header */ header { background: #6ab47b; border-color: #599a68; }
/* nav background on mobile */ nav { background: #599a68; }
/* logo text */ h1, h2 { color: #fff; }
/* links */ a { color: #6ab47b; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }
Thanks for the help.
3 Answers
Ryan Field
Courses Plus Student 21,242 PointsFor one, the src attribute in your
<img> tags and href attribute in your
<a> tags are using IMG rather than img, which might be causing your images to not appear. Other than that, what kind of glitches are you seeing specifically?
Charlie Kloppenburg
5,060 PointsFirst: the "IMG"; I made the mistake of capitalizing the folder name and have taken the challenge of trying to keep it straight. I don't like just straight copying.
The issue that I'm seeing (or, not seeing) is that in my version the "Portfolio, About and Contact" are stacking. And, they have white fields around them.
Secondly, the images are still vertical. They size with the page width; but I think they should be two across.
Charlie Kloppenburg
5,060 PointsOkay, I figured out the white around the "Portfolio, About and Contact". I simply made a choice that left the field pretty close to white. My bad.