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 Build the Contact Page

Posted by Lou Pelagalli
Lou Pelagalli
1,979 Points

Contact images not displaying

On contact.html the contact images: phone, email, twitter, are not displaying at all.

Here's my code

contact.html

<h3>Contact Details</h3>
<ul class="contact-info">
  <li class="phone"><a href="tel:555-642<j5>555-6425">555-6425</a></li>
  <li class="mailto"><a href="Lou@bogus.com">Lou@bogus.com</a></li>
  <li class="twitter"><a href="http://Twitter.com/intent/tweet?screen_name=CrazyWare">@CrazyWare</a></li>
</ul>

main.css

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

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

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

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

7 Answers

Lou Pelagalli
Lou Pelagalli
1,979 Points

Well after revisiting this a few times I found the spelling error.

.conact-info li.phone a {

should actually be

.contact-info li.phone a {

Naturally I mispelled contact for phone and then copy/pasted the error twice so the email and twitter images would not display either.

Thanks to all who helped.

I have a question into support on how to post html code here.

Catherine Brooks
Catherine Brooks
2,799 Points

I can see no difference between the first code posted and the second which is supposed to be different from the first; I must be blind.

Lou Pelagalli
Lou Pelagalli
1,979 Points
Lou Pelagalli
Lou Pelagalli
1,979 Points

<!-- <section id="secondary"> <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:Lou@bogus.com">Lou@bogus.com</a></li> <li class="twitter"><a href="http://Twitter.com/intent/tweet?screen_name=CrazyWare">@CrazyWare</a></li> </ul> </section> -->

Bill Hinostroza
Bill Hinostroza
19,273 Points
Bill Hinostroza
Bill Hinostroza
19,273 Points

I can't see your html code but check to see if the url path is correct.

Your telling it to go back to the root and then go to the image folder and then finally use the respective images.

If the path isn't at fault it must be your html code. which we can't see on here.

type in

```(html) without the parentheses and no space

insert code here

Bill Hinostroza
Bill Hinostroza
19,273 Points
Bill Hinostroza
Bill Hinostroza
19,273 Points

```(html) without parentheses and space

--insert code here--

(```) without parentheses and space

Lou Pelagalli
Lou Pelagalli
1,979 Points
Lou Pelagalli
Lou Pelagalli
1,979 Points

The path is correct. I cannot get the html code to post.

Lou Pelagalli
Lou Pelagalli
1,979 Points
Lou Pelagalli
Lou Pelagalli
1,979 Points

Here's my html I hope

'''html<h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:555-6425">555-6425</a></li> <li class="mailto"><a href="Lou@bogus.com">Lou@bogus.com</a></li> <li class="twitter"><a href="http://Twitter.com/intent/tweet?screen_name=CrazyWare">@CrazyWare</a></li> </ul>

Lou Pelagalli
Lou Pelagalli
1,979 Points
Lou Pelagalli
Lou Pelagalli
1,979 Points

Well after reviewing my code for a couple of hours, in testing I noticed that there are blank links to the left of my link text, so I am going to assume those are the images and move on.