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

Posted by Whitey McCracker
Whitey McCracker
2,029 Points

Neither My Code NOR Nick's Code Displays the Phone Img

I can post the HTML and CSS if you would like, but it's the exact same code as Nick's. First I thought I must have made a mistake, and that's why the Twitter and Phone images were displaying, but not the mail.png because I messed something up either in the HTML or CSS file. However, before asking a question I figured I'd save my work in files on my desktop, then cut-and-paste Nick's code into my Workspace HTML and CSS files.

STILL no dice. Twitter and Phone images are displaying; the e-mail image is not.

I have not changed the title of the image. Everything else is working flawlessly. What is wrong with the mail.png picture?

I have everything setup exactly the same as Nick has it. It isn't working.

Matthew Newman
Matthew Newman
8,741 Points

If you could post your code, ill take a look at it. Thanks!

5 Answers

anthony crowell
PLUS
anthony crowell
Courses Plus Student 10,953 Points
anthony crowell
anthony crowell
Courses Plus Student 10,953 Points

Hi it really would help to see your code, sometimes just an outside look can help. You can always use http://codepen.io/ and pass the link.

Whitey McCracker
Whitey McCracker
2,029 Points

Alright guys, no problem. I've never used CodePen, and I know Markdown, so I'll just post it here.

Here's the Main CSS page: (It is cut-and-pasted from Nick's .css document)

/**********************************
GENERAL
***********************************/

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}



/**********************************
HEADING
***********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/**********************************
NAVIGATION
***********************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}



/**********************************
FOOTER
***********************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/**********************************
PAGE: PORTFOLIO
***********************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7
}



/**********************************
PAGE: ABOUT
***********************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}



/**********************************
PAGE: CONTACT
***********************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}



/**********************************
COLORS
***********************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

...and here's the contact.html code: (...once again I cut-and-pasted it from Nick's Downloads into Workspaces)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</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 not currently looking for new design work, but I am available for speaking gigs and similar engagements. If you have any questions, please don't hesitate to contact me!</p>
        <p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me.</p>
      </section>
      <section>
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:555-6425">555-6425</a></li>
          <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>

Also, something I'm willing to try but would rather not (...because I wanna know why this isn't working) - I could change the image type from .png to like .jpg or .gif or whatever, and see if that works.

Thanks for taking an interest! I really appreciate it. :-)

anthony crowell
PLUS
anthony crowell
Courses Plus Student 10,953 Points
anthony crowell
anthony crowell
Courses Plus Student 10,953 Points

Hi, I noticed on ----

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7 } your missing a semi colon. Other then that it looks good. Have you looked at it from developers tools "CTRL+SHIFT+I" from windows?

Whitey McCracker
Whitey McCracker
2,029 Points

Thanks for pointing that out, Anthony. That's funny. That means there is a semi-colon missing in the included documents from this lesson. I didn't type this out. It's Nick's code.

I'll need to read up on Dev Tools. That's not something I've used before.

Matthew Newman
Matthew Newman
8,741 Points
Matthew Newman
Matthew Newman
8,741 Points

I just saved both your html and css files and view them both locally. Interestingly it looks perfect on my end. The phone, mail and twitter icon images show up. I am wondering if the problem has to do with your file structure or image name? But the code does work on my end.

Whitey McCracker
Whitey McCracker
2,029 Points

Oh yeah. Viewing it locally is a great idea! Didn't think out that.

Well it seems to me this is just a bug. My file structure is the same as Nick has it in the video. Is there a way for me to post a picture of my file structure?

anthony crowell
PLUS
anthony crowell
Courses Plus Student 10,953 Points
anthony crowell
anthony crowell
Courses Plus Student 10,953 Points

Hi I think your code is fine, I found if you rename the mail icon and change the reference in your css to match the name it works. But if you rename it back to mail.png it doesn't, not sure why but try renaming it.

anthony crowell
PLUS
anthony crowell
Courses Plus Student 10,953 Points
anthony crowell
anthony crowell
Courses Plus Student 10,953 Points

As a note the semi colon was for the text color under the image one, it really didn't fix much.