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 trialWilliam Jones
Courses Plus Student 2,154 PointsStill 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');
}
3 Answers
chrisp
13,686 PointsHi 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
Treehouse Project ReviewerIt 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
Courses Plus Student 2,154 PointsThanks so much guys! I fixed the error. I appreciate your great advice!
Ken Alger
Treehouse TeacherKen Alger
Treehouse TeacherEdited for markup.
Please see this post for instructions on how to post code samples.