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

CSS How to Make a Website Adding Pages to a Website Add Iconography

Justin Alejandro
Justin Alejandro
3,648 Points

I 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
Emeka Okoye
2,489 Points

You 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.

Hi 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.

Hello,

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.

paste the code in order to help!!!!

Justin Alejandro
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.