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 Adding Pages to a Website Add Iconography

Posted by stevencooper
stevencooper
5,755 Points

I'm missing an img, what am i doing wrong?

I am writing css for my 'contact' page. I'm trying to add .png images to the page. I have 2 of 3 images working correctly, but am missing the third. I have checked, and the .png image IS in my img folder, named correctly & everything.

here are the css code lines in question:

```.contact-info li.phone a { background-image: url('../img/phone.png'); } /* this line of code presents the proper icon on my contact page */

.contact-info li.mail a { background-image: url('../img/mail.png'); } /* this line of code presents the proper icon on my contact page */

.contact-info li.twitter a { background-image: url('../img/twitter.png'); } /* this line of code does NOT present the proper icon - in fact NO icon - despite being identical to the two lines of code above. */

I have the phone.png image & mail.png images properly placed on my contact page, but the twitter.png doesn't show up. I copied the code directly from Nick Pettit's example, and don't know why 2 lines of identical code work while the 3d line of identical code doesn't.

What am I missing here?

dylan goddard
dylan goddard
12,752 Points
dylan goddard
dylan goddard
12,752 Points

Since the CSS looks good, could you post the HTML as well?

5 Answers

dylan goddard
dylan goddard
12,752 Points
dylan goddard
dylan goddard
12,752 Points

you have an extra "t" in list class for twitter

stevencooper
stevencooper
5,755 Points

That seems to have been the problem! Thanks for the excellent proof-reading!

All images are showing up where they're supposed to.

Thanks to everyone for your help.

jase richards
jase richards
10,379 Points
jase richards
jase richards
10,379 Points

I am assuming it's in workspace, I would try removing the twitter.png and re-adding it maybe it just needs a refresh. It doesn't look like there is any coding issues so maybe it's just a workspace issue, so I would also try closing down the browser and reopening maybe that will help.

Let me know if that helps at all, I remember someone having to open the rar/zip file from their desktop for the img to be accepted, workspace can be a bit finicky at times.

stevencooper
stevencooper
5,755 Points

Thanks for your suggestion that i close my browser & restart the workspace. I gave it a try and, unfortunately, didn't work.

Sjors Theuns
Sjors Theuns
6,091 Points
Sjors Theuns
Sjors Theuns
6,091 Points

Hi Steven,

can you post the HTML part as well?

Ps. don't forget to also "close" your code on the forums with 3 back ticks. You are now only putting them in the beginning.

stevencooper
stevencooper
5,755 Points

Here's the html for the 'contact' page. I hope this helps you figure out what it is that I'm not doing right.

<!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8">
    <title> Steven Cooper  | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href=“index.html" id="logo"> 
          <h1>Steven Cooper</h1>
          <h2>Designer</h2>
      </a>
        <nav>
          <ul>
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html" class="selected">Contact</a></li>
          </ul>
        </nav>
    </header>
    <div id="wrapper">
        <section>
          <h3>General Information</h3>
          <p>I am currently learning html and css coding languages so that I will eventually be able to find work in the field of coding, making websites and smartphone apps. If you know of any entry-level openings making websites, don't hesitate to contact me.</p>
          <p>Please only use phone contact for urgent inquiries or messages. Otherwise, Twitter and e-mail are the best ways to reach me.</p>
        </section>

        <section>
        <h3>Contact Details</h3>
            <ul class="contact-info">
              <li class="phone"><a href="tel:(503)933-8981">(503) 933-8981</a></li>
              <li class="mail"><a href="mailto:smcooperco@gmail.com">smcooperco@gmail.com</a></li> 
              <li class="twittter"><a href="http://twitter.com/intent/tweet? screen_name=smcooper1956">@smcooper1956</a></li>
            </ul>
       </section>

    <footer>
      <a href="https://facebook.com/steven.m.cooper.79"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      <a href="https://twitter.com/@SMCooper1956"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
         <p>&copy; 2014 Steven M. Cooper.</p>
    </footer>
  </div>
 </body>
</html>
Oliver Payne
Oliver Payne
3,751 Points
Oliver Payne
Oliver Payne
3,751 Points

PNG files can be transparent. Could the logo that you're using be white and being placed on a white background?

stevencooper
stevencooper
5,755 Points

no, the .png images are gray in color, on a white background.

dylan goddard
dylan goddard
12,752 Points
dylan goddard
dylan goddard
12,752 Points

I would check to make sure the the image is in your IMG folder. Also double check your HTML to make sure it is correct.

stevencooper
stevencooper
5,755 Points

Yes, my .png images are in my img folder. The first 2 .png ( telephone handset, envelope) for phone & email contacts work properly. The 3d line, which is supposed to put up the twitter.png, doesn't work although it was copy/pasted from the first line of css code, that uses the phone handset icon. Hope this helps.