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

Class don't work

 <section>
        <h3>General Info</h3>
        <p>Contact me!</p>
        <p>Please only use phone contact for urgent inquires. Twitter and email are the best way to contact me.</p>
      </section>
      <section> 
        <h3>Contact Details</h3>
          <li> class="phone"><a href="tel:555-6425">555-6425</a></li>
          <li> class="mail"><a href="mailto:bamsef@me.com">bamse@me.com</a></li>
          <li> class="twitter"><a href="http://twitter.com/intent/tweet?screen_=andreasferber">@andreasferber</a></li>
      </section> 
      <footer>
        <a href="http://twitter.com/andreasferber"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icons"></a>
        <a href="http://facebook.com/andreasferb"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icons"></a>
        <p>&copy; 2014 Andreas Ferber.</p>
      </footer>
    </div>
   </body>
</html>

The class in my list don't work properly but it's working on all other pages and even in the footer but not on the Section...Why?

 <section> 
        <h3>Contact Details</h3>
          <li> class="phone"><a href="tel:555-6425">555-6425</a></li>
          <li> class="mail"><a href="mailto:bamsef@me.com">bamse@me.com</a></li>
          <li> class="twitter"><a href="http://twitter.com/intent/tweet?screen_=andreasferber">@andreasferber</a></li>
      </section> 

The class don't work here but it works in my footer...

5 Answers

geoffrey
geoffrey
28,736 Points

Because you didn't type the class where you had to type it. At the moment the class isn't assigned to the '<li>' tags, look closely... Here is the correction. In fact there is an extra '>' in your code.

<section> 
        <h3>Contact Details</h3>
          <li class="phone"><a href="tel:555-6425">555-6425</a></li>
          <li class="mail"><a href="mailto:bamsef@me.com">bamse@me.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_=andreasferber">@andreasferber</a></li>

Ahh..i see!

totally missed that!

Thanks!

Hugo Ballesteros
Hugo Ballesteros
15,945 Points
<li> class="phone">
<li> class="mail">
<li> class="twitter">

are wrong, the correct way is as follows

<li class="phone">
<li class="mail">
<li class="twitter">
Kazimierz Matan
Kazimierz Matan
13,257 Points

You didn't show your CSS code. Which exact class doesn't work?

Simon Sørensen
Simon Sørensen
17,304 Points

Maybe you should do this:

            <section class="section"> 
        <h3>Contact Details</h3>
          <li> class="phone"><a href="tel:555-6425">555-6425</a></li>
          <li> class="mail"><a href="mailto:bamsef@me.com">bamse@me.com</a></li>
          <li> class="twitter"><a href="http://twitter.com/intent/tweet?screen_=andreasferber">@andreasferber</a></li>
      </section> 
            ``` 

and select like:
 ```css 
.section {
}
geoffrey
geoffrey
28,736 Points

No, this is not good, you do the same mistake. You don't assign correctly the class, look your code, It can't be.

<!-- As exemple THIS IS NOT GOOD!-->

            <li> class="phone"><a href="tel:555-6425">555-6425</a></li>

<!-- But THIS IS GOOD, just delete the extra '>' after '<li' -->

          <li class="phone"><a href="tel:555-6425">555-6425</a></li>
geoffrey
geoffrey
28,736 Points

No, this is not good, you do the same mistake. You don't assign correctly the class, look your code, It can't be.

<!-- As exemple THIS IS NOT GOOD!-->

            <li> class="phone"><a href="tel:555-6425">555-6425</a></li>

<!-- But THIS IS GOOD, just delete the extra '>' after '<li' -->

          <li class="phone"><a href="tel:555-6425">555-6425</a></li>
geoffrey
geoffrey
28,736 Points

double post sorry.

Simon Sørensen
Simon Sørensen
17,304 Points

Easy, I overlooked. I usally do PHP, so that's way.