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 trialJustin Alejandro
3,648 PointsI see how the padding pushed the text to the right 30px, but why didn't it push the icons as well?
Can someone clarify this for me?
5 Answers
Emeka Okoye
2,489 PointsYou are right Justin. You have added the images as a background so they are not part of your HTML.
If you really wanted to add padding to the background image you will need to do a hack and add a thick border on the side with the same colour as the background.
Jason Anello
Courses Plus Student 94,610 PointsHi Justin,
It may help to look at a diagram of the css box model: https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
When you apply the 30px of left padding you're moving the content box 30px to the right. Since the text resides in the content box, it goes with it.
The position of background images is determined by the background-origin and background-position properties.
Since these properties were not specified in this project the browser will use the initial values:
background-origin: padding-box;
background-position: 0% 0%;
By default, the origin is the top left corner of the padding box. This is why the background image stays in the padding area.
If you were to add to your css:
.contact-info a {
background-origin: content-box;
}
Then you should see the icons move to the content box area and be under the text again because now the origin is the top left corner of the content box.
Aurelian Spodarec
7,369 PointsHello,
Maybe the icons are in position absolute or something? The text is with the same box if you know what i mean so it pushed 30px away and you may jus push only that div , that paragraph ( p ).
Paste your code so we can have look at it and know because its like impossible to tell you why things goes wrong if we don't know what you did.
Adin Jesuha
Full Stack JavaScript Techdegree Student 7,914 Pointspaste the code in order to help!!!!
Justin Alejandro
3,648 Points<section>
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:555-5454">555-5454</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>
.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');
}
My guess is that since these images aren't actually in the html file, all the declarations under .contact-info a
doesn't apply to these images (except for background-repeat and background-size), which can explain why the icons don't behave like the links (i.e. push right 30px). Is this correct? I hope that made sense.