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 trialAnna Parker
Courses Plus Student 4,399 Pointschallenge 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...
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é
23,204 PointsHi 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
Courses Plus Student 4,399 PointsThank 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é
23,204 PointsHi 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
Courses Plus Student 4,399 PointsThanks 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. :-)