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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Jonthue Michel
Jonthue Michel
1,462 Points
Posted by Jonthue Michel
Jonthue Michel
1,462 Points

Pictures not showing

Decide to make some re adjustments by reducing the number of pictures to 4 after trying to add some more pictures that didn't really look good after all.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Jonthue | Designer</title> <link rel="stylesheet" href="CSS/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Lobster+Two:700italic|Arvo' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="CSS/alpha.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Jonthue Michel</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href ="index.html"class="selected">Portfilo</a></li> <li><a href="About.html">About</a></li> <li><a href="Contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href= "img/IMG_20150505_100103.jpg"> <img src= "img/IMG_20150505_100103.jpg" alt=""> <p>Taking a short of the church, Triangle SDA Mission</p> </a> </li> <li> <a href= "img/IMG_20150505_100026.jpg"> <img src= "img/IMG_20150505_100026.jpg" alt=""> <p>2nd shot of church</p> </a> </li> <li> <a href= "img/Capture1111.PNG"> <img src= "img/Capture1111.PNG" alt=""> <p>SDA logo revived 2nd verison</p> </a> </li>s <li> <a href= "img/pointlandp1.jpg"> <img src= "img/pointlandp1.jpg" alt=""> <p>Taking a short ouring a walk</p> </a> </li> </ul> </section> <footer> <a href ="https://www.facebook.com/jonthue.michel"><img src="img/facebook-wrap.png" alt="Facebook Logo"> </a> <a href ="http://www.google.com/+JonthueMichel"><img src="img/circle-google-plus.png" alt"Google Plus Logo"> </a> <p>Ā© 2015 Jonthue Michel.</p> </footer> </div> </body> </html>

2 Answers

Senad Redzic
Senad Redzic
4,474 Points
Senad Redzic
Senad Redzic
4,474 Points

Remove this unnecessary space: https://sc-cdn.scaleengine.net/i/7991a86b5a722e2d50318fcf846c9eb5.png After you do that and problem still exists, please check the path to your images (/images/yourimage.jpg for example).

Note: For future reference if you want to figure out if your link is the problem or some other part of the code, try external URL (like some of these: https://placehold.it/) and if it works, it means that something is wrong with your path or permission to access the image.
If it does not work, bug is related to something else, like unnecessary space or forgotten things (usually: ; "" etc.)

Jonthue Michel
Jonthue Michel
1,462 Points
Jonthue Michel
Jonthue Michel
1,462 Points

So for future reference this would be the ideal way right? i.e. <a href =:"whatever/whater.jpg"> </a> rather than <a href= "whaterever"> </a>

Senad Redzic
Senad Redzic
4,474 Points
Senad Redzic
Senad Redzic
4,474 Points

Yes, I would say that 60% of solving the problem is how you approach to the problem (preparation, research and organizing). I will use your example since it is simple:

  1. When having problem with images, you list causes that could be the reason. Some people will list more and some less depending on experience. I would say it could be:
  2. your image path is wrong
  3. permissions on folders or files are wrong (common for Wordpress or Magento for example)
  4. you forgot some of these : " ; /> etc.

  5. your HTML structure contains general error.

  6. When you make the list, start with process of elimination. Once you are done and it still doesn't work, make another research and another list (this is how you learn).

Some developers will argue that this is time consuming and that you should immediately narrow your list following your instinct and assumptions. For example, in this case we probably don't have problems with permissions. BUT one thing you need to remember. As an professional developer DON'T assume , guess or leave things unexplained to yourself. It can cause more problems in the future that you had it before.