Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Adding Pages to a Website Build the Contact Page

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

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.

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.

<!-- <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

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

```(html) without parentheses and space

--insert code here--

(```) without parentheses and space

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

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>

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.