Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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">

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