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 trialJoshua Jones
4,756 PointsIcons are sitting on the far left.
Hi every one! After adding the icons they are placed on the far left of the screen. Everything looks good other than that!
Here's my css and html.
.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');
}
and HTML
</section>
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href"tel: 555-222-111">555-222-111</a></li>
<li class="mail"><a href="mailto:Joshjones@mail.com">Joshujones@mail.com</a></li>
</ul>
</section>
2 Answers
Zachary Green
16,359 Pointsand im guessing you want then on the right. you can use float: right; on th ul element and there will be on the right then just make sure you use display: inline;
Joshua Jones
4,756 PointsI've tried inline and clear: both;. it somewhat fixes the issue. When i apply it it makes the space for the icons and text crunched together.
Zachary Green
16,359 Pointsmaybe add some padding to the li them selves and add the background image and styles together in the same rule so its easier to find problems later.
Wayne Priestley
19,579 PointsHi Joshua,
Having the section with the closing bracket instead of an opening bracket was causing a problem.
I made a note of the things i changed in the code i copied from you, if you make those changes to the code below everything should be fine.
Just ask if you need a hand.
</section class="contact"> <!-- you have a closing bracket instead of opening + add a class -->
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href"tel: 555-222-111">555-222-111</a></li> <!-- added = to href -->
<li class="mail"><a href="mailto:Joshjones@mail.com">Joshujones@mail.com</a></li>
</ul>
</section>
.contact-info {
list-style: none;
padding: 0; /* You should remove this */
margin: 0; /* You should remove this */
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 { /* you can add this class and use it to position your info */
margin-left: 25%;
}
Hope this helps.
Wayne Priestley
19,579 PointsWayne Priestley
19,579 PointsHey Joshua,
I'll take a proper look when I get back to my laptop, but I can see that the href for the phone has a missing =