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

Posted by SABCD ABCD
SABCD ABCD
3,414 Points

Can someone take a look at this and let me know what I've done wrong?

My gallery doesn't look right at all. They grey boxes are all wrong. The boxes are not aligned properly and the words are on the left side of the page instead of inside the grey box. I am not sure whether it is the arrangement of the css or whether the code itself is wrong.

http://web-yz608u045m.treehouse-app.com/index.html

3 Answers

Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

You have a few empty <li> that are broken, check your HTML file and see if you are opening and closing everything right.

Look your HTML:

          <a href="img/numbers-06.jpg" alt="">
            </a></li><li><a href="img/numbers-06.jpg" alt=""><img src="img/numbers-06.jpg"></a></li><a href="img/numbers-06.jpg" alt="">
            <p>80's glow.</p>
          </a>```

You open the ```<li>``` then open the ```<a>``` then close him and put the image, this is against the semanthic rule, the image had to be inside the ```<a>``` tag and the ```<a>``` tag inside the list item ```<li>```


Sorry bad english, not my native.
Sreng Hong
Sreng Hong
15,083 Points
Sreng Hong
Sreng Hong
15,083 Points

As I see your html code, you don't need the li tag to wrap img tag and alt attribute should be in img tag and not in a tag.

<section>
      <ul id="gallery">
        <li>
          <a href="img/numbers-01.jpg" alt=""> <!--alt attribute should be in <img>-->
            <img src="img/numbers-01.jpg">
            <p>Experimentation with color and texture.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-02.jpg" alt="">
            <li><img src="img/numbers-02.jpg"></li>  <!--make this line like the first image (without li)-->
            <p>Blending modes in Photoshop.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-06.jpg" alt="">
            <li><img src="img/numbers-06.jpg"></li>
            <p>80's glow.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-09.jpg" alt="">
            <li><img src="img/numbers-09.jpg"></li>
            <p>Drips using Photoshop brushes.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-12.jpg" alt="">
            <li><img src="img/numbers-12.jpg"></li>
            <p>Creating shapes.</p>
          </a>
        </li>
      </ul>
    </section>
SABCD ABCD
SABCD ABCD
3,414 Points
SABCD ABCD
SABCD ABCD
3,414 Points

Thanks guys. Both your answers really helped. I managed to get it right.