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 trialLou Pelagalli
1,979 PointsContact 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
1,979 PointsWell 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.
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
19,273 PointsI 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
19,273 Points```(html) without parentheses and space
--insert code here--
(```) without parentheses and space
Lou Pelagalli
1,979 PointsThe path is correct. I cannot get the html code to post.
Lou Pelagalli
1,979 PointsHere'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
1,979 PointsWell 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.
Catherine Brooks
2,799 PointsCatherine Brooks
2,799 PointsI 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.