Welcome to the Treehouse Community
Looking to learn something new?
Jonthue Michel1,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>
Senad Redzic4,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.)
Senad Redzic4,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:
- 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:
- your image path is wrong
- permissions on folders or files are wrong (common for Wordpress or Magento for example)
- you forgot some of these : " ; /> etc.
your HTML structure contains general error.
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.