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
Shane Wiltsey
Courses Plus Student 1,969 PointsFormatting instructions not being passed to child objects within a class ID
I'm following along with Nick Pettit's How to Build a Web Site series of videos, but have had some issues passing formatting instructions to child objects through a class ID. If I take the formatting instructions and pass them directly to the objects themselves, they work fine, but if I try to say format all anchor elements within a parent class, the instructions seem to be ignored/blocked/never carried out.
I believe this may be where my problem lies.
.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 { background-image: url('../img/phone.png'); }
.contact-info li.mail { background-image: url('../img/mail.png'); }
.contact-info li.twitter { background-image: url('../img/twitter.png'); }
I know this is probably a simple issue, but I have been beating my head against it for days now. I really need some help here.
Shane Wiltsey
Courses Plus Student 1,969 Points<ul class="contact-info">
<li class="phone"><a href="tel:555-555-1234>">555-555-1234</a></li>
<li class="mail"><a href="mailto:shane@example.com">shane@example.com</a></li>
<li class="twitter"><a href="htt[://twitter.com/intent/tweet?screen_name=shanewiltsey">@shanewiltsey</a></li>
</ul>
4 Answers
Erik Nuber
20,629 Pointshtml
<ul class="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>
css
.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');
}
That is the code from the video. I typed it up real quick. It looks like it matches what you have and, he did select the <a> tag. He even explains that it is specifically grabbing the <a> tag in the html. Maybe to test it you could add something outrageious to that like a huge margin or padding. Maybe a background color of pink or red...
Erik Nuber
20,629 PointsI believe the problem here is what you are actually selecting here you are selecting the child li tag that is specifically of class phone.
.contact-info li.phone { background-image: url('../img/phone.png'); }
should be where you are targeting the <a> tag that is a child of contact-info and is specifically the <a> tag that is associated with the li child that has class phone. This is where you want the actual background image.
.contact-info li.phone a { background-image: url('../img/phone.png'); }
and so forth...
Shane Wiltsey
Courses Plus Student 1,969 PointsI tried applying those changes, saved, and refreshed my preview. It's still not displaying the phone, mail, and twitter images correctly. Different, but still not right.
If I take this section of code
.contact-info li {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
and paste it on each list item like so
.contact-info li.phone {
background-image: url('../img/phone.png');
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
Then it works fine.
Erik Nuber
20,629 PointsLet me go find the video and see, maybe I'm missing something as well.
Shane Wiltsey
Courses Plus Student 1,969 PointsOh jeez, yeah. that fixed it. I feel like an idiot now. I didn't quite understand what you were saying the first time. Sorry and thank you.
Erik Nuber
20,629 PointsErik Nuber
20,629 PointsCould you share the html for this part as well. You can place your code when asking a question by putting three tick marks above and below it. The tick mark is found under the tidle key on thekeyboard next to the the one key.