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

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

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

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>

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