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 Joshua Jones
Joshua Jones
4,756 Points

Icons 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>
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey 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 =

2 Answers

Zachary Green
Zachary Green
16,359 Points
Zachary Green
Zachary Green
16,359 Points

and 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
Joshua Jones
4,756 Points

I'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
Zachary Green
16,359 Points
Zachary Green
Zachary Green
16,359 Points

maybe 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
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi 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.