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

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Rosemary Chao
Rosemary Chao
4,828 Points

can't make images side by side with text under them

I wrote codes under my editor, so please ignore the different relative paths from the video. I just copied and pasted my codes on the workspace for questions. When I started styling the id of gallery part, just can't make images side by side with texts under each image. Those texts will partly go upper right of another image. Help, please. Thank you very much :D

html & CSS code here: https://w.trhou.se/5dc5a334mr

2 Answers

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

I forked your workspace and there seem to be a few errors. Not sure if you have updated however, from the version of your files you uploaded to fork, your link elements have invalid href paths that are not set up correctly.

Your code:

 <link rel="stylesheet" href="css/normalize.css/normalize.css">
 <link rel="stylesheet" href="css/normalize.css/main.css">

Your paths are incorrect, on the forked workspace you don't have a css folder, only one folder that holds all your files (index.html and main.css) the directory path followed by your css folder is not a valid path either (normalize.css) in this case.

Correct code:

 <link rel="stylesheet" href="normalize.css">
 <link rel="stylesheet" href="main.css">

Even though the above code is correct, there is also a missing normalize.css file so you aren't making use of that CSS in your project.

The reason why your paragraph elements float to the right around the list elements instead is that you haven't nested them inside the list element tags.

Your code:

 <li>
  <img src="img/img/numbers-01.jpg" alt="">           
 </li>
<p>Experimentation with color and texture.</p>

Correct Code:

<li>
  <img src="img/img/numbers-01.jpg" alt="">
  <p>Experimentation with color and texture.</p>
</li>
Rosemary Chao
Rosemary Chao
4,828 Points

Hi Jamie Reardon , thank you so much. It works now :)

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

You are welcome! If you think my answer helped solve your problem l, you can kindly mark it as best answer! :)