Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Styling Web Pages and Navigation Make a CSS Image Gallery

olivier david
olivier david
417 Points

completely lost

in my workspace my code has no effect and in my code challenge I have changes when I change values. But I cant seem to figure what values to put to make it look good. The gray box is not the same sixe as my image and my images are way too big. Thank you so much for helping me.

css/main.css
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: Changa One, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}
/***********************************************
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
}

10 Answers

Sage Elliott
Sage Elliott
30,003 Points

got it! All or most of you list item tags "li" are revered. they are "il". I reversed with google crome dev tool and it made a big difference on your site! See if that fixes teh changes you were looking for!

Sage Elliott
Sage Elliott
30,003 Points

One error in your code is there is an extra colon: in your css img styling

img {
  max-width:: 100%;
}

It should only have one, like this.

img {
  max-width: 100%;
}

Your border color also has a double colon:

go through your code and remove all the doubles!

Sage Elliott
Sage Elliott
30,003 Points
/***********************************************
GENERAL
***********************************************/

body {
  font-family: 'Open Sans', sans-serif;
}
a {
  text-decoration:none
}

#wrapper {
 max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}
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;
}

/***********************************************
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
***********************************************/
a {
    color: #6ab47b;
}

/***********************************************
header
***********************************************/
header {
  background:#6ab47b;
  border-color: #599a68;
}

h1, h2 {
  color:  #fff;
}
nav {
  background:#599a68;
}

nav a, nav a:visited {
  color: #fff;
}
/*slected nav link*/
nav a.selected, nav a:hover {
 color: #32673f; 
}



/***********************************************
SITE BODY
***********************************************/
body {
  background-color: #fff;
  color: #999;
}
Sage Elliott
Sage Elliott
30,003 Points

Hey, no problem! If you're feeling frustrated don't worry, it gets easier as you go and you'll learn what to look for when you run into problems! We've all made errors like this and it get be really annoying when you're starting out, but don't let it discourage you. :)

Sage Elliott
Sage Elliott
30,003 Points

In your workspace file is the css under a folder? If it is make sure the HTML matches up to import it in. Could you post your HTML as well? If your CSS is in a css folder the html would look similar to this. Make sure there are no caps or other differences in your folder/file names.

<link rel="stylesheet" type="text/css" href="css/main.css">
olivier david
olivier david
417 Points

My full HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Olivier David | 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>Olivier David</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">
      <il> 
        <a href="img/numbers-01.jpg">
        <img src="img/numbers-01.jpg" alt="">
        <p>Experimentation with color and texture.</p>
          </a>
        </il>
              <il> 
        <a href="img/numbers-02.jpg">
        <img src="img/numbers-02.jpg" alt="">
        <p>Playing with blending modes in Photoshop.</p>
          </a>
        </il>
        <il> 
        <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>
        </il>
        <il> 
        <a href="img/numbers-09.jpg">
        <img src="img/numbers-09.jpg" alt="">
        <p>Drips created using photoshop brushes.</p>
          </a>
        </il>
        <il> 
        <a href="img/numbers-12.jpg">
        <img src="img/numbers-12.jpg" alt="">
        <p>Creating shape using repetition.</p>
          </a>
        </il>
      </ul>
    </section>
    <footer>
      <a href="http://twitter.com"><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>&copy; 2015 Olivier David.</p>
    </footer>
      </div>
  </body>
</html>

css

/***********************************************
GENERAL
***********************************************/

body {
  font-family: 'Open Sans', sans-serif;
}
a {
  text-decoration:none
}

#wrapper {
 max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}
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;
}

/***********************************************
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
***********************************************/
a {
    color: #6ab47b;
}

/***********************************************
header
***********************************************/
header {
  background:#6ab47b;
  border-color:: #599a68;
}

h1, h2 {
  color:  #fff;
}
nav {
  background:#599a68;
}

nav a, nav a:visited {
  color: #fff;
}
/*slected nav link*/
nav a.selected, nav a:hover {
 color: #32673f; 
}



/***********************************************
SITE BODY
***********************************************/
body {
  background-color: #fff;
  color: #999;
}

And yes my Main.css is in my css folder.

Sage Elliott
Sage Elliott
30,003 Points

Does it use a capital "M" in the file name?

olivier david
olivier david
417 Points

Yes I just noticed I had a few double-colons. That's weird lol. Now it's removed. But my code still didn't change anything.

olivier david
olivier david
417 Points

Whoa! Thanks alot my friend it changed everything. :)

olivier david
olivier david
417 Points

Thanks, Just started yesterday. I had never written a line of code in my life before. It's a continuous puzzle and I love it!

Sage Elliott
Sage Elliott
30,003 Points

Awesome! Welcome to the programming world! Treehouse is a great place to start and the forums are great to get your questions answered! Have fun!!!