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

General Discussion

Posted by A. S.
A. S.
1,300 Points

Troubleshooting my website?

Hello! I am working on the website building tutorial, and there are two pieces I somehow missed.

  1. In my menu, when I hover over my menu links (Portfolio, About, Contact) they don't change color. This is a nice feature-- can you please help me figure out what the code is for this and where it was supposed to go?

  2. In my "contact details" section, the iconography is not showing up, just bullet points still. I am wanting the phone, mail and twitter icons to show up and I thought the below code in my CSS file would do that. Is the problem maybe in my HTML file. Halp!

/**************************************
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-size: 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');
}

5 Answers

Andreas cormack
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andreas cormack
Python Web Development Techdegree Graduate 33,011 Points
Andreas cormack
.a{fill-rule:evenodd;}techdegree seal-36
Andreas cormack
Python Web Development Techdegree Graduate 33,011 Points

.contact-info a:hover{

color:red;// the links will change color on hover }

Travis Joyner
Travis Joyner
14,553 Points
Travis Joyner
Travis Joyner
14,553 Points

For the hover effect, you need to include code like this:

.contact-info a:hover { color:blue; }

A. S.
A. S.
1,300 Points
A. S.
A. S.
1,300 Points

Thanks for your responses, y'all. This was unclear from my original posting, but the menu I was talking about in question #1 is not the contact menu but the main nav menu for the site. I found where in my code I attempted to do this already: 

/**************************************
COLORS
**************************************/

/* nav link */

nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */

nav a .selected, nav a:hover {
  color: #32673f:
}

I'm trying to figure out my mistake. Any thoughts? The colors section comes at the end of my CSS file.

Cheers! Annalee

Travis Joyner
Travis Joyner
14,553 Points
Travis Joyner
Travis Joyner
14,553 Points

There's a colon after your color. Should be a semicolon.

A. S.
A. S.
1,300 Points

thanks! That was actually the long and short of what was wrong, duh!

Jacob Miranda
Jacob Miranda
19,392 Points
Jacob Miranda
Jacob Miranda
19,392 Points

For the 2nd part, I think you have to define a size since they are a background image vs an image as content and since there isn't any content then the background won't show because there is nothing in the foreground. I would suggest adding an img in the HTML rather than pulling them into the site as a background in the list items.