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!
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
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 Pointsa.link - allows a change of the first 2 li items in a ul but not the last 4 li items.
I am building a personal website. On my contact page I have a list of links for contacting me. They are telephone, email Linkedin, etc. The default blue associated with links does not contrast enough with the background on the page.
CSS-Tricks turned me on the a solution that involves the use of an a:link selector. It works great on the first two li items but doesn't touch the final 4. I can find no reason in my code (though I'm sure there is one) that would explain the behavior.
I am providing snippets of the html and css:
<div class='column secondary standard'>
<h3>
Contact Details
</h3>
<ul class="listText contact">
<li class="phone"><a href="tel:206-910-3655">206-910-3655</a></li>
<li class="email"><a href="mailto:doug5solas@gmail.com">doug5solas@gmail.com</a></li>
<li class="linkedin"><a href="https://linkedin.com/in/doug5solas">linkedin</a></li>
<li class="facebook"><a href="https://facebook.com/doug5solas/">facebook page</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen-name=doug5solas">tweet me (@doug5solas)</a></li>
<li class="locpin"><a href="https://goo.gl/maps/PSqGFYiQWN62">seattle, wa</a></li>
</ul>
</div> <!-- end of secondary -->
.secondary ul.contact {
list-style: none;
display: block;
padding-left: 5%;
margin: 0;
line-height: 3rem;
}
.secondary a:link {
color: #212121;
padding-left: 5rem;
}
.secondary li.phone {
background-size: 20px;
background-image: url('../img/iphone.jpg');
background-repeat: no-repeat;
background-position: 0;
}
.secondary li.email {
background-size: 20px;
background-image: url('../img/email.jpg');
background-repeat: no-repeat;
background-position: 0;
}
.secondary li.linkedin {
background-size: 20px;
background-image: url('../img/linkedin.jpg');
background-repeat: no-repeat;
background-position: 0;
}
.secondary li.facebook {
background-size: 20px;
background-image: url('../img/facebook.jpg');
background-repeat: no-repeat;
background-position: 0;
}
.secondary li.twitter {
background-size: 20px;
background-image: url('../img/twitter.jpg');
background-repeat: no-repeat;
background-position: 0;
}
.secondary li.locpin {
background-size: 20px;
background-image: url('../img/locPin.png');
background-repeat: no-repeat;
background-position: 0;
}
5 Answers
Dave McFarland
Treehouse TeacherHave you tried changing this style .secondary a:link to .secondary a:link, .secondary a:visited? If you have already clicked a link and visited the page, an a:link selector won't style that link. a:link applies to links that have not yet been visited.
Neil Anuskiewicz
11,007 PointsDoes this work?
.secondary .contact {
list-style: none;
display: block;
padding-left: 5%;
margin: 0;
line-height: 3rem;
}
.secondary a:link {
color: #212121;
padding-left: 5rem;
}
.secondary .phone {
background-size: 20px;
background-image: url('../img/iphone.jpg');
background-repeat: no-repeat;
background-position: 0;
}
.secondary .email {
background-size: 20px;
background-image: url('../img/email.jpg');
background-repeat: no-repeat;
background-position: 0;
}
.secondary .linkedin {
background-size: 20px;
background-image: url('../img/linkedin.jpg');
background-repeat: no-repeat;
background-position: 0;
}
.secondary .facebook {
background-size: 20px;
background-image: url('../img/facebook.jpg');
background-repeat: no-repeat;
background-position: 0;
}
.secondary .twitter {
background-size: 20px;
background-image: url('../img/twitter.jpg');
background-repeat: no-repeat;
background-position: 0;
}
.secondary .locpin {
background-size: 20px;
background-image: url('../img/locPin.png');
background-repeat: no-repeat;
background-position: 0;
}
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsI'm sorry Neil. It is not apparent what you are suggesting. Can you tell me so I know what to look for?
Neil Anuskiewicz
11,007 PointsDoug, i don't think it's completely valid (borderline) to have li.linkedin, for example, so just .linkedin instead. I'm not sure but I thought that could cause it to break. It was late at night so I didn't explain it well or test it anywhere. I was just hoping it would help. I found some documentation that indicated that wasn't valid so I went with it.
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsOK, I'll give it a try. I sure have nothing but a few moments of time to lose. And, if it works I will be grateful.
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsNeil: It was a nice try but it didn't work. The behavior is the same. I am going to leave out the li tags until I find out if they are necessary.
Neil Anuskiewicz
11,007 PointsI just had a thought, often CSS problems are related to precedence in the cascade. I wonder if adding the !important: declaration to your styles could be sure that nothing else is trumping the styles you're trying to use? I realize I'm reaching here. As for yesterday, I learned a lesson, do not attempt to help people with things right before bed as might attempt was half assed. Sorry.
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsNeil: No problem, at least you answered.
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsDoug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsI have not tried that but will right now.
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsDoug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsThank you Dave. That was it. I should have remembered that from the exercise in removing text decoration from navigation.