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

Posted by Younes Zoughbi
Younes Zoughbi
6,233 Points

Gallery images not displaying on webpage.

Hi, I'm currently having trouble figuring out how to display my images on my webpage. They currently display only when I click on the link.

What am I missing out here?

Any feedback would be greatly appreciated.

Thank you in advance!

Code below:

HTML:

<!DOCTYPE html> <html> <body> <div class="wrapper">
<head> <title>YZ | Gallery</title> <link href="main.css" type="text/css" rel="stylesheet"/> </head>
<h1>Gallery</h1>
<ul class="nav"> <li><a href="index.html">Home</a></li> <li id="current"><a href="gallery.html">Gallery</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> <div class="gallery"> <a target="_blank" href="Gallery/BCN.jpg"> <img src="BCN.jpg" alt="BCN" width="300" height="200"> </a> <div class="desc">Barcelona by sunset.</div> </div>

        <div class="gallery">
          <a target="_blank" href="Gallery/boeing.jpg">
            <img src="boeing.jpg" alt="Boeing" width="300" height="200">
          </a>
          <div class="desc">Japan Air Defence, Boeing 747-400.</div>
        </div>

        <div class="gallery">
          <a target="_blank" href="Gallery/castle.jpg">
            <img src="castle.jpg" alt="Nagoya Castle" width="300" height="200">
          </a>
          <div class="desc">Nagoya Castle.</div>
        </div>

        <div class="gallery">
          <a target="_blank" href="Gallery/shrine.jpg">
            <img src="shrine.jpg" alt="Shrine" width="300" height="200">
          </a>
          <div class="desc">Takayama, Shrine.</div>
        </div>

     </div>
    <div class="footer">All images &#169; Younes Zoughbi 2017</div>
</body>

</html>

CSS:

.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; }

.gallery:hover { border: 1px solid #777; }

.gallery img { width: 100%; height: auto; }

.desc { padding: 15px; text-align: center; font-family: sans-serif, monospace; color: rgb(100,100,90); padding: 10px; font-weight: lighter; font-size: 0.95em; text-align: center; background-color: #e6e6e6; }

End of code.

Aidan Palmer
Aidan Palmer
5,844 Points

Are your images located in a separate folder?

Also what exactly are you trying to accomplish? Are you trying to make it so that whenever a user clicks on one of your images, it takes them to another tab displaying that image?

Matthew Potter
Matthew Potter
8,718 Points

<div class="gallery"> <a target="_blank" href="Gallery/boeing.jpg"> <img src="img/boeing.jpg" alt="Boeing" width="300" height="200"> </a> <div class="desc">Japan Air Defence, Boeing 747-400.</div> </div>

    <div class="gallery">
      <a target="_blank" href="Gallery/castle.jpg">
        <img src="img/castle.jpg" alt="Nagoya Castle" width="300" height="200">
      </a>
      <div class="desc">Nagoya Castle.</div>
    </div>

    <div class="gallery">
      <a target="_blank" href="Gallery/shrine.jpg">
        <img src="img/shrine.jpg" alt="Shrine" width="300" height="200">
      </a>
      <div class="desc">Takayama, Shrine.</div>
    </div>

 </div>
<div class="footer">All images &#169; Younes Zoughbi 2017</div>

</body>

1 Answer

Younes Zoughbi
Younes Zoughbi
6,233 Points
Younes Zoughbi
Younes Zoughbi
6,233 Points

Thank you, both for your support. Figured it out. As Mathew Potter added the img src="img/shrine.jpg". The actual file was located in my Gallery folder: <img src="Gallery/shrine.jpg". Working perfectly now.

Thank you again!