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 Style the Image Captions

My pictures doesnt separate as wanted

Hello, my problem is not that i cant divide it into 2 columns, the problem is that i cant make every seperate photo to not go in to each other. So between picture 1 and 2 there is no space inbetween they are kinda just "melted" together.. i dont know where i make the mistake because i really cant make them separated and get that little bit of a smoother look..¨

CSS:

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

my html:

 <div id="wrapper">
    <section>
    <ul id="GALLERY">
      <li>
        <a href="img/numbers-01.jpg" >
          <img src="img/numbers-01.jpg" alt="">
          <p> Experimenting 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</p>
        </a>
    </li>
       <li>
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p> Trying to create an 80s style </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 shades </p>
        </a>
    </li>   
      </ul>
    </section>

Hi,

I've just edited your question to format the HTML and CSS code so it's a little easier to read :)

If you add 3 back ticks (```) on the line before and after the code it'll format it.

You can then also assign the language on the first set of backticks (e.g. ```html)

-Rich

4 Answers

Before and after what code to be more specific Rich:) thanks though! :)

Hi Nicolai,

It wasn't an answer to your question but was just referring to the formatting of your question as it will help others to answer easier.

If you add 3 back ticks (```) on the line before you paste your code and 3 back ticks on the line after you'll see it formatted like this:

p {color: #000;}

You can also include a language on the first set of back ticks, e.g. ```css and it will display like this:

p {color: #000;}

Hope that helps :)

-Rich

And also the problem is that the photos, arent separated so lets say from image 1 to 2 there is no "space" in between them, so the 2 pictures lays just up against each other but i want it to be some kind of space between the two pictures like the video illustrates..

Hi Nicolai,

Just found the issue. In the following style you're missing a colon:

#GALLERY li {
   float: left;
  width: 45%;
  margin 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
  }

The following line:

  margin 2.5%;

should be:

  margin: 2.5%;

Hope that helps :)

-Rich

You are a GOD, Rich!! Thanks, that was exactly what i was looking for the whole time. Im an idiot :) TYTY