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

CSS

Posted by Jonathan Derain
Jonathan Derain
Courses Plus Student 4,646 Points

Problem with the gallery

Hi,

I have a problem with the gallery, Did I do something wrong in the code?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jonathan Derain | 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="Untitled.html" id="logo"> <h1> Jonathan Derain</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">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/JonathanDerain"><img src="img/facebook-wrap.png" alt="Facebook logo"></a> <p>© 2014 Jonathan Derain.</p> </footer> </div> </body> </html>

Or in the main CSS?

/************** 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 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; }

2 Answers

Matthew Greenberg
Matthew Greenberg
8,173 Points

Well, to start...Looks like you forgot the html, head, and body tag in the html markup.

In your css you have a bunch of errors. The most noticeable is that your leaving the # symbol off your class id selectors. You are missing a bunch of semicolons at the end of your css value pairs as well.

I also added a list-style-type:none; to a nav ul selector to get rid of your bullet points on the main navigation. I went through it quickly so you might still have things you have to change. Don't get discouraged. 

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Jonathan Derain | 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'>

<style>
/************** 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; 
}
nav ul {
  list-style-type: none;
}

 /************** 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 */ 
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; 
}


</style>

</html>
<body>
<header>
  <a href="Untitled.html" id="logo">
<h1> Jonathan Derain</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">Contact</a></li>
    </ul>
  </nav>
</header>
<div id="wrapper"> 

<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>


<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter logo"></a>
<a href="http://facebook.com/JonathanDerain"><img src="img/facebook-wrap.png" alt="Facebook logo"></a>
<p>&copy; 2014 Jonathan Derain.</p>
</body>
Jonathan Derain
PLUS
Jonathan Derain
Courses Plus Student 4,646 Points
Jonathan Derain
Jonathan Derain
Courses Plus Student 4,646 Points

Thank you for your precious help. Problems solved :p