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

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

Posted by Felix Johansson
Felix Johansson
3,341 Points

Contact info won´t work :(

Hey does anyone know why my .contact-info won´t work? The problem is that they won´t display correctly on my webpage they merge into the text.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Felix Johansson Web Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,700,800,400' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
    <a href="index.html" id="logo">
      <h1>Felix Johansson</h1>
      <h2>Web Designer</h2>
    </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html"> About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <h3>General information</h3>
        <p>I am currently looking for new design work, don't hesitate to contact me if you need help with your website or have questions about my design.</p>
        <p>Send me a mail or contact me on linkedin if you are instested in my help.</p>
      </section>

      <section>
        <h3>Contact Details</h3>
        <ul class="contact-info">
        <li class="linkedin"><a href="https://www.linkedin.com/profile/view?id=376735337&trk=nav_responsive_tab_profile">LinkedIn</a></li>
        <li class="mail"> <a href="mailto:felix.difjohansson@hotmail.com">felix.difjohansson@hotmail.com</a></li>
        </ul>
      </section>
      <footer>
        <a href="https://www.linkedin.com/profile/view?id=376735337&trk=nav_responsive_tab_profile_pic"><img src="img/linkedin.png" alt="LinkedIn Logo" class="social-icon"></a>
        <a href="http://facebook.com/felix.d.johansson"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Felix Johansson.</p>
      </footer>
    </div>
  </body>
</html>

CSS 

.contact-info {

 list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.cotact-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.linkedin a {
  background-image: url('../img/linkedin.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}
Felix Johansson
Felix Johansson
3,341 Points

Also if a MOD can help me with the text.

Jeff Busch
Jeff Busch
19,287 Points

If you look just below the text box area you will see something that says Markdown Cheetsheet. Also, there is a post here titled: Posting Code to the Forum by Dave McFarland. If you don't understand that maybe this will make sense: How to display code at Treehouse.

Holt Hunter
Holt Hunter
4,629 Points
Holt Hunter
Holt Hunter
4,629 Points

The reason your code is not formatting correctly on the post is because you need to put the language type after the tick marks, like this: "'css, not like this: CSS"' . (I am not using the real tick marks because I want you to be able to see it.)

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Fixed the formatting for you on the code. Holt Hunter explains how above.

1 Answer

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Hi Felix, you have a typo in the CSS:

.cotact-info a {
  code: here;
}

The class is missing an n, cotact-info rather than contact-info.

Does that sort it?

Felix Johansson
Felix Johansson
3,341 Points

Haha yes! Good eye there!