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 trialPete Buechler
1,659 PointsHow do I get Add-Iconography section CSS to work? Following Nick's CSS verbatim, the icons still overlay the text.
Here's the css: .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'); }
2 Answers
Thomas Horner
11,185 PointsI couldn't get it to work Nick's way either. I ended up having to duplicate the code. I took the contact-info a out and put the code from that block into each individual li.class; like this :
.contact-info li.phone { background-image: url('../img/phone.png'); background-repeat: no-repeat; 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.mail { background-image: url('../img/mail.png'); background-repeat: no-repeat; 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.twitter { background-image: url('../img/twitter.png'); background-repeat: no-repeat; display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }
It's not right since you're duplicating code, but it works.
Thomas Horner
11,185 PointsActually, I just figured it out so you don't duplicate your code. Instead of using .contact-info a use .contact-info li
Pete Buechler
1,659 PointsPete Buechler
1,659 PointsThis works, though as you say it's redundant. The other suggestion, applying the styling to the li, produced some strange results in my page. Thanks for your comment.