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
Elonzo Clark
701 PointsMy code exactly matches the instructors and I'm still getting only one column of Pics. I've read all the answers to this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>"
<title>Lonnie Clark | Student</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>Lonnie Clark</h1>
<h2>Student</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/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 blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"</a>
<a href="http://facebook.com/Lonnie.Clark.397"><img src="img/facebook-wrap.png" alt="Facebook Logo"</a>
<p>© 2015 Lonnie Clark.</p>
</footer>
</div>
</body>
</htm
/*****************
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%;
}
/*****************
HEADING
*****************/
#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;
/*****************
FOOTER
*****************/
footer {
font-size: 0.75em;
text-align: center;
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;
}
/*****************
COLORS
*****************/
/*site body*/
body {
background-color: #fff
color: #999;
}
/*green header*/
header {
background: #6ab47b
border-color: #599a68;
}
nav {
background: #599a68;
}
/*logo text*/
h1, h2 {
color: #666;
}
/*links*/
a {
Color: #6ab47b;
}
/*nav link*/
nav a, nav a:visited {
color: #fff;
}
/*selected nav link*/
nav a.selected, nav a:hover {
color: #32673f;
}
Robert Richey
Courses Plus Student 16,352 PointsTwo lines that could be causing the problem are:
<meta charset="utf-8>"
and
</htm
4 Answers
Elonzo Clark
701 PointsI have all of your coding comments and I've not copied and pasted anything except comments. Could it be safari?
Jon Major
3,531 PointsSafari's a modern browser and will render a simple site like this just fine. Robert pointed out a couple other potential issues, but it's still a missing bracket that you're after. Take a close look at the navigation area of your CSS.
Elonzo Clark
701 PointsThanks!!!
Jon Major
3,531 PointsHi Elonzo,
You're super-close. Leaving out something as simple as a closing bracket though can play havoc with all the CSS that follows it. Seek and ye shall find!
A couple other notes too - it may just be an incomplete copy-and-paste, but there should be a head element surrounding the title and link elements, a body element surrounding everything that follows the head, and an html element surrounding everything but the doctype.
Finally, remember that comments in CSS follow the format /* your comment */ . Just using the slashes without the asterisks isn't sufficient.
Good luck!
Elonzo Clark
701 PointsI have all of your coding comments and I've not copied and pasted anything except comments. Could it be safari?
Blake Johnson
4,812 PointsI am having exactly the same problem and have poured it all over looking for a missing piece and cannot find it. Whatever the issue is it also affected my nav links as they are no longer centered. I checked the area where this is dictated and I did not find a problem. Details like the font are different on mine, but the structure should be the same. I have the html below the CSS.
Could you guys lend a hand as I cannot move past this without understanding :) Huge Huge Thanks!
/********************
GENERAL
***********************/
body {
font-family: 'Inconsolata', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/********************
HEADING
***********************/
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Abel', 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;
}
/********************
FOOTER
***********************/
footer {
font-size: 0.75em;
text-align: center;
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;
}
/********************
COLORS
***********************/
/* Site Body */
body {
background-color: #fff;
color: #999;
}
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile devices*/
nav {
background: #599a68;
}
/*logo text*/
h1, h2 {
color: #fff;
}
a {
color: #6ab47b;
}
/*color for nav link*/
nav a, nav a:visited {
color: #fff;
}
/* selected nav link color */
nav a.selected, nav a:hover {
color: #32673f;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blake W Johnson | Photographer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Abel|Inconsolata:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Blake Johnson</h1>
<h2>Photographer</h2>
</a>
<nav>
<ul id="gallery">
<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>
<li>
<a href="img/Biopic.jpg">
<img src="img/Biopic.jpg" alt="">
<p>Thats me on a board in Bali!</p>
</a>
</li>
<li>
<a href="img/Coffee.jpg">
<img src="img/Coffee.jpg" alt="">
<p>Fuel.</p>
</a>
</li><li>
<a href="img/Indobridge.jpg">
<img src="img/Indobridge.jpg" alt="">
<p>Indonesian traffic jam.</p>
</a>
</li><li>
<a href="img/Indofarmer.jpg">
<img src="img/Indofarmer.jpg" alt="">
<p>A seasweed farmer in Lembongan Indonesia.</p>
</a>
</li><li>
<a href="img/lifeisgood.jpg">
<img src="img/lifeisgood.jpg" width="940" alt="">
<p>because it is, man.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/blackpeopletwitter"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo"> </a>
<p>© 2015 Blake W Johnson.</p>
</footer>
</div>
</body>
</html>
EDIT: AWWWW YEAH! Nevermind! I solved it! I had my gallery id in the wrong <li> element. It's a small victory but one that feels oh-so-good. I am leaving this comment here in case it helps a future student.
EDIT 2: to clarify my mistake, I had the gallery id in the nav ul instead of in the section ul which resulted in two columns of my navigation links.
Robert Richey
Courses Plus Student 16,352 PointsEdit: wow nice catch. I was testing your CSS against the project's HTML, so I totally missed the issue.
Cheers
Blake Johnson
4,812 PointsThanks for helping though! It is always amazing to me how much one little thing can hide from both my eyeballs
Robert Richey
Courses Plus Student 16,352 PointsRobert Richey
Courses Plus Student 16,352 PointsHi Elonzo,
I added markdown to help make the code more readable. If you're curious about how to add markdown like this on your own, checkout this thread on posting code to the forum . Also, there is a link at the bottom called Markdown Cheatsheet that gives a brief overview of how to add markdown to your posts.
Cheers!