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 Bryston Deibel
Bryston Deibel
379 Points

Gallery doesn't appear exactly the same but similar

In the video Nick's pictures appear in two columns with three rows. Mine do that too. However, his picture are set up so it's 1 and 2 next to each other then 6 and 9 next to each other then 12 and a blank space next to it. Mine show up as 1 and 2 next to each other then a blank space next to 6 and 9 and 12 next to each other. Kind of like this: His: 1 2 6 9 12

Mine 1 2 6 9 12

What did I do wrong? Everything is the same except for the placement of the last 3 pictures

Bryston Deibel
Bryston Deibel
379 Points

html:

</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</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 by photoshop brushes</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p> Creating shapes using repitition</p> </a> </li> </ul> </section>

css:

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 }

4 Answers

Troy Hilse
PLUS
Troy Hilse
Courses Plus Student 2,435 Points
Troy Hilse
Troy Hilse
Courses Plus Student 2,435 Points

No, sorry. I'm certain I have everything down exactly as instructed in the video, but it just doesn't turn out right. I'm sure we aren't the only ones that have come across this. But I guess folks out there don't have an answer to this one.

Bryston Deibel
Bryston Deibel
379 Points

Ya, I've checked his code against mine and yours as well looks the exact same to me. Not sure what the problem is. I guess I'll just continue on with the course. I suppose it's not that important but would still like to know why it's not working before going on. Maybe later on it will be addressed like the bullet points. (I remember his were gone in a previous video then came back and he said how to remove them.) Best of luck man!

Troy Hilse
PLUS
Troy Hilse
Courses Plus Student 2,435 Points
Troy Hilse
Troy Hilse
Courses Plus Student 2,435 Points

I'm seeing the same thing. The 3rd image shifts over when the browser is resized small. So mine shows a blank space in the 1st column / 2nd row placement.

My CSS code looks like this;

gallery {

margin: 0; padding: 0; list-style: none; /* none gets rid of bullets */ }

gallery li {

float: left; /* Floats text around the image. / width: 45%; / images will take only 45% of the width of the page. 10% is remaining / margin: 2.5%; / creates the space between images. 2.5% around 2 pics adds to 10% */ background-color: f5f5f5; color: #bdc3c7; }

gallery li a p { /* select gallery list items, ankers, paragrphas */

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

Bryston Deibel
Bryston Deibel
379 Points

Troy did you figure this out? I was away for the weekend haven't had a chance to figure it out myself

Troy Hilse
PLUS
Troy Hilse
Courses Plus Student 2,435 Points
Troy Hilse
Troy Hilse
Courses Plus Student 2,435 Points

I downloaded Nick's docs and compared theme side by side, and found the very obscure reason for the weirdness.

Within the index.html file, I had used different text for the image captions. Instead of "Playing with blending modes in Photoshop.", I had just written "Blending Modes". All you have to do is add a few more words in there to lengthen the text, and magically the formatting works.

So there you have it. I have no idea why.

Oscar Mauricio Lancheros Murillo
Oscar Mauricio Lancheros Murillo
3,608 Points
Oscar Mauricio Lancheros Murillo
Oscar Mauricio Lancheros Murillo
3,608 Points

I have the same problem, still seing bullets and pictures are not floating one next to another in 2 columns, just one

#galeria {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

#galeria li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;  
}