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.


Styling Web Pages and Navigation HELP!

Text All In Wrong Places!

http://codepen.io/anon/pen/tpeja is all my code and what it looks like in a browser. The text under the images is for the wrong image. F.E. Truffle Parmasean is where healthy hepps is supposed to be and logemans carmel is where double cheddar should be. (You have to look at my page to understand). Any help is appreciated! THANKS!

2 Answers

Hi Ollie,

You have some invalid html in your page which I would fix first and then see where you're at.

You can't have links as direct children of the unordered list. The li elements should be directly under the ul

Change this:

<a href="Exotic Popcorns/carmel2_compact.png">
            <li><img src="Exotic Popcorns/carmel2_compact.png" alt=""></li>
            <p>Logemann’s Caramel</p>

To this:

    <a href="Exotic Popcorns/carmel2_compact.png">
        <img src="Exotic Popcorns/carmel2_compact.png" alt="">
        <p>Logemann’s Caramel</p>

So you have to move the link inside the list item and have the image and paragraph within the link for all of them.

Thanks, but how do I change the other things?

Well, what results are you getting now after fixing the html? I don't think you updated your codepen. Did you update your local copies to see the results?

I fixed the html for the first two items in your codepen and the captions were side by side in the first row like they should be. I can't see the images in the codepen but only the captions. Your images would have to be hosted somewhere in order to see them.

IT WORKS! At first I thought it was just a small error you were correcting, so I took longer to change it but it works well.

Also, can you tell me how to make it so the orangish colored header reaches the top? Sorry, I'm just starting. I'll update codepen here's link: http://codepen.io/anon/pen/fdxiB