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 and Style Icons

Anna Parker
PLUS
Anna Parker
Courses Plus Student 4,399 Points
Posted by Anna Parker
Anna Parker
Courses Plus Student 4,399 Points

challenge task - anchor elements inside unordered list with class contact-list

I can't get this challenge task right. Here's my wrong answer:

.contact-info a { display: block; font-size: 0.9em; margin: 0; padding: 0; list-style: none; }

This is exactly what I have on my project website, which is likely why it isn't displaying correctly...

css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

.profile-photo {
  display: block;
  margin: 0 auto 30px;
  max-width: 150px;
  border-radius: 100%;
}

.contact-info ul a {
  display: block;
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}

3 Answers

Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points
Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points

Hi Anna,

You're very close. try only targeting just the class.

Remember the challenge is to: select the unordered list with the class contact-info

Also remember selectors work in reverse: .contact-info ul a {…} --> selects/applies the class attributes to an <a> anchor inside a <ul> unordered list inside a parent object with the class .contact-info, thus only selecting/styling anchor tags (see example below):

<div class="contact-info">
    <ul>
        <li>
            <a>your link</a>
        </li>
    </ul>
</div>
Anna Parker
PLUS
Anna Parker
Courses Plus Student 4,399 Points
Anna Parker
Anna Parker
Courses Plus Student 4,399 Points

Thank you! But I still don't get it. :( The challenge question, or the project.

I watched the video again, but that didn't help. My project code looks exactly like his project code (I've checked countless times), but it doesn't work - on the challenge, or on my site.

Here's my code for the project:

/************************** PAGE: CONTACT **************************/

.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-style: 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'); }

On my site, it looks like this:

Contact Details

class="phone"> 559-978-4250 class="mail"> ynotanna@hotmail.com class="twitter"> @ynot_anna

Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points
Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points

Hi Anna,

No worries, this use to get me confused too: your CSS code is targeting the wrong order of elements The <ul> has the class of .contact-info, so to properly target it you would write your code like below:

ul.contact-info {}

You also need to remove the <a> from your code as it specifies to only target (and apply your style attributes) anchor tags, which won't apply to any other tags in your <ul>.

Read more about (specificity here)[https://developer.mozilla.org/en/docs/Web/CSS/Specificity].

Head scratch moments like these are the best teachers. You're doing great. Keep it up!!

Anna Parker
PLUS
Anna Parker
Courses Plus Student 4,399 Points
Anna Parker
Anna Parker
Courses Plus Student 4,399 Points

Thanks again! I got through the challenge, and realized that my project issue was coming from the html, not the css. Other than an extra Twitter bird flying around, everything seems fine now. :-)