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

Posted by Kyle Papili
Kyle Papili
9,112 Points

Not sure where I went wrong...

I have the following for my contact page and contact info CSS. Why do my background images continue to repeat and not move to the left even though the anchor tags are margined 30 px to the left?

contact.html'''

<section> <h3>General Information</h3> <p>I am not currently looking for new design work, but I am available for speaking gigs and similar engagements. if you have any questions, please don't hesitate to contact me!</p> <p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best ways to contact me.</p> </section> <section> <h3>Contact Details</h3> <ul class = "contact-info"> <!--PHONE--> <li class = "phone"> <a href = "tel:555-6425">555-6425</a> </li>

  <!--EMAIL-->
  <li class = "mail">
    <a href = "mailto:kylexy32@gmail.com">kylexy32@gmail.com</a>
  </li>
  <!--TWITTER-->
  <li class = "twitter">
    <a href = "http://twitter.com/intent/tweet?screen_name=kylexy32">@kylexy32</a>
  </li>
</ul>

</section>

<!--BELOW IS CONTACT CSS SECTION-->

/**************** Page: CONTACT ****************/

.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 { 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'); }```

1 Answer

Micheal Allen
Micheal Allen
19,311 Points

Hey Kyle

// your current code is targeting your "li" elements with a specific class eg:
.contact-info li.phone { background-image: url('../img/phone.png'); }; 

// To get these background images to work the way you want
// You need to be selecting '.contact-info li' instead of '.contact-info a' and set the 
// background position like this:
.contact-info li { 
    display: block; 
    min-height: 20px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position:left center; // <- add this
    padding: 0 0 0 30px;
    margin: 0 0 10px; 
}

Your final CSS file should look something like this:

.contact-info { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    font-size: 0.9em;
}

.contact-info li { 
    display: block; 
    min-height: 20px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position:left center;
    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'); }

Hope this helps!

EDIT: I've noticed you've got spaces in between your class tags in your html aswell

<!--remove spaces on both sides of the = sign -->
<!-- eg: -->
 <li class = "phone">
<!-- to: -->
<li class="phone">
Kyle Papili
Kyle Papili
9,112 Points

Yes, thank you very much for your assistance. That seems to have been my problem, THANK YOU!