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 Creating HTML Content Build the Footer

Posted by William Gee
William Gee
Courses Plus Student 452 Points

Pictures wont display in broswer

I'm very new to coding - and I'm doing one of the first video challenges - creating a portfolio, and the images on my browser are not showing - they are simply displaying little icons where the images should be. Any help??

1 Answer

Laura Cressman
Laura Cressman
12,548 Points
Laura Cressman
Laura Cressman
12,548 Points

Hi William, Without seeing your code, my best guess is that you either did not download the images into your workspace, or you didn't link to them properly. Did you make sure to download the project files (there is a link to the right of the videos to the Project Files), and then drag them into your workspace so that you can use them? If you did, did you make sure that you link to them properly in the HTML? This could be as simple as making sure that your link refers to a folder first if you put your images in a folder. If you would like more help, please send the HTML code so I can take a look. Welcome to Treehouse! Smile, Laura:)

William Gee
William Gee
Courses Plus Student 452 Points

I didn't use the project file! Stupid, I know - I wish I had done now! It's only the facebook and twitter icons that are not being displayed now and I cannot figure out why! How do I send you my code?

Thanks Laura!!

Laura Cressman
Laura Cressman
12,548 Points
Laura Cressman
Laura Cressman
12,548 Points

Until Treehouse adds some sort of messaging file, could you just copy and paste it from your workspace? Also, you now added a folder for the downloaded images to your workspace, correct? Hopefully we can fix this issue:)

William Gee
William Gee
Courses Plus Student 452 Points

Yeah I created a folder of my own with the images i needed and have successfully added normalize.css to my workspace. 

<section>
 <ul>

   <li>
     <a href="img/1.jpg" alt="">
       <img src="img/1.jpg">
       <p>Geoger Best dribbles past defenders to sore.</p>
     </a>
  </li>

   <li>
     <a href="img/2.jpg" alt="">
       <img src="img/2.jpg">
       <p>Teenagers fashion is changing fast.</p>
     </a>
  </li>

   <li>
     <a href="img/3.jpg" alt="">
       <img src="img/3.jpg">
       <p>Sailor kisses his wife after 5 years at sea.</p>
     </a>
  </li>

   <li>
     <a href="img/4.jpg" alt="">
       <img src="img/4.jpg">
       <p>Lost Boys of Sudan walk 100s of miles to safety.</p>
     </a>
  </li>

   <li>
     <a href="img/5.jpg" alt="">
       <img src="img/5.jpg">
       <p>Albert Einstein proves his Theory of Relativity.</p>
     </a>
  </li>

 </ul>
</section>
<footer>
  <a href="http://twitter.com/willgee2"><img src="img/twitter.png" alt="twitter logo"></a>
  <a href="http://facebook.com/will.gee.9"><img src="img/facebook.png" alt="Facebook logo"></a>
  <p>&copy; 2014 Will Gee.</p>
</footer>

</body> </hmtl>

Laura Cressman
Laura Cressman
12,548 Points
Laura Cressman
Laura Cressman
12,548 Points

The links look good at first glance. So you made sure to download the twitter and Facebook images, as well as place them in the same folder as your other images (the img folder)? Are the other images showing up OK?

William Gee
William Gee
Courses Plus Student 452 Points

Ahh that was it - i imported my img folder prior to saving the Facebook and Twitter images into the folder - thus meaning only the images in the img folder before i imported it into my workspace were available using the src="img"! Thank you - wouldnt have managed that without you! Many thanks!!

William Gee
William Gee
Courses Plus Student 452 Points

Also just a quick querry - I have added the normalize.css stylesheet to the html, but the bullet points in my unordered list are still there. Do you know why this is?

Laura Cressman
Laura Cressman
12,548 Points
Laura Cressman
Laura Cressman
12,548 Points

I just looked at the normalize.css file, and it didn't seem to do any styling for the unordered list. The normalize.css file gets rid of some default browser styling to even out the playing field, but you still need to deal with other default styling yourself in the CSS that you write. If you want to get rid of the bullet points, simply target the unordered list in your style.css file and set the list-style to none. Try this, hope that helps!

ul {
  list-style: none;
}