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

William Jones
PLUS
William Jones
Courses Plus Student 2,154 Points
Posted by William Jones
William Jones
Courses Plus Student 2,154 Points

Still getting the pictures stuck on the contact details. How do you move the 3 images to the left of the contact text?

I've followed all of the steps and am still getting the 3 images for the contact page stuck on the text and can't get it to move to the left of the text.

Here is the code I entered. Is there anything that looks faulty here?

.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');
}
Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Edited for markup.

Please see this post for instructions on how to post code samples.

3 Answers

chrisp
chrisp
13,686 Points
chrisp
chrisp
13,686 Points

Hi William,

Just for future references when posting codes use 3 tickers ` with the language type ex. html, css, javascript,etc.. and close with the 3 tickers. This will separate text from codes.

I notice you used background image to your output your image. 

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

There probably different ways you can do this.. Anyway for this maybe case, you can place left or right by using

float: left;

Or if you absolute auto placement

position: absolute;
left: 0;  /* however many pixel u want*/

Relative positioning works to and using define margins.

position: relative;
margin-left: 10px;

That is some approach. I would probably use html img tag, put it in div and assign a class to it and define the position in css. Again, it is up to you on however you like. Hope this helps.

Best of lick with your css journey.

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

It looks like you are missing the . before the contact-info a

Besides that, everything looks exactly like I have, so that should fix it for you. 

.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;
William Jones
PLUS
William Jones
Courses Plus Student 2,154 Points
William Jones
William Jones
Courses Plus Student 2,154 Points

Thanks so much guys! I fixed the error. I appreciate your great advice!