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 trialnicolai kristensen
2,316 PointsMy 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>
4 Answers
nicolai kristensen
2,316 PointsBefore and after what code to be more specific Rich:) thanks though! :)
Rich Bagley
25,869 PointsHi 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
2,316 PointsAnd 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
25,869 PointsHi 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
2,316 PointsYou are a GOD, Rich!! Thanks, that was exactly what i was looking for the whole time. Im an idiot :) TYTY
Rich Bagley
25,869 PointsRich Bagley
25,869 PointsHi,
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