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 trialChristopher Chavez
1,269 PointsWhy is my CSS code not working?
I have followed the instructions and nothing happended on my site.
Here is my css code:
.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'); }
And here is my HTML code:
<div id="wrapper"> <section> <h3>General Information</h3> <p>I am not looking for new design work.</p> <p>PLease only use phone contact for urgent issues.</p> </section> <section> <h3>Contact Details</h3> <ul cloass:"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> <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"> <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> <p>Ā© 2015 Christopher Chavez.</p> </footer> </div>
2 Answers
Ayoub AIT IKEN
12,314 Pointshey ! you wanna change this :
<ul cloass:"contact-info">
with this :
<ul class="contact-info">
Brynn Evans
4,705 PointsDoes he need a space after 'li' in his CSS? He has li.phone, li.mail, li.twitter all running together right now.
Liam Maclachlan
22,805 PointsHey Brynn,
A space would be needed if it was targeting a child element of the list item.
As they are joined, it will target the list item with the class of 'phone'.
The perfect example of this is below
.contact-info li.phone a { background-image: url('../img/phone.png'); }
the space after 'contact-info' and 'li' means it is looking for the child List item element of the element with the class of 'contact-info' :)
Kevin VanderWulp
5,180 PointsLooks like you made a typo in your ul tag. You typed cloass, should be class.
tracy
32,769 Pointstracy
32,769 PointsHi Christopher,
The's a tiny typo in the misspelling of "class" in the "ul" tag.
Update that and all should be good.