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 How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Posted by nicolai kristensen
nicolai kristensen
2,316 Points

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>
Rich Bagley
Rich Bagley
25,869 Points

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

nicolai kristensen
nicolai kristensen
2,316 Points
nicolai kristensen
nicolai kristensen
2,316 Points

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

Rich Bagley
Rich Bagley
25,869 Points

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

nicolai kristensen
nicolai kristensen
2,316 Points
nicolai kristensen
nicolai kristensen
2,316 Points

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

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

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

nicolai kristensen
nicolai kristensen
2,316 Points
nicolai kristensen
nicolai kristensen
2,316 Points

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