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

CSS How to Make a Website Customizing Colors and Fonts Use Classes in CSS

Matthew Lehman
Matthew Lehman
5,282 Points

my hover feature isnt working on my website. everything else is working, just not the hover feature. please help?

/********************** GENERAL ***********************/

body { font-family: 'Open sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/********************** HEADING ***********************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/********************** NAVIGATION ***********************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

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

nav li { display: inline-block; }

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

/********************** FOOTER ***********************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/********************** PAGE: PORTFOLIO ***********************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

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

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

/*************** PAGE: ABOUT ****************/

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

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

/* site body */ body { background-color: #fff; color: #999; }

/* green header */ header { background: #6ab47b; border-color: #599a68; }

/* nav background on mobile */ nav { border-color: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* links */ a { color: #6ab47b; }

/* nav background on mobile */ nav { background: #599a68; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link*/ nav a.selcted, nav a:hover { color: #32673f; }

/* site body */ body { background-color: #fff; color: #999; }

Matthew Lehman
Matthew Lehman
5,282 Points

and this is my index.html as well

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Matthew Lehman | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Matthew Lehman</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contacts.html">Contacts</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers.01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers.02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in photoshop.</p> </a> </li> <li> <a href="img/numbers.06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Drips created photoshop brushes.</p> </a> </li> <li> <a href="img/numbers.09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Creating shaped repetition</p> </a> </li> <li> <a href="img/numbers.12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li>
</ul> </section> <footer> <a href="http://www.twitter.com/mattyind"><img src=img/twitter-wrap.png alt="Twitter Logo" class="social-icon"></a> <a href="http://www.facebook.com"><img src=img/facebook-wrap.png alt="Facebook Logo" class="social-icon"></a> <p>© 2015 Matthew Lehman</p> </footer> </div> </body> </html>

Matthew,

Can you please post a snapshot of your workspace? This is a simple link and is a lot friendlier than raw dumping the CSS and HTML onto the forums like this. If you don't know how to post one, here is how to do that: http://www.teamtreehouse.com/forum/workspace-snapshots

1 Answer

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points

You have a typo in you 2nd to last line in CSS. Fix to 'selected' -- you missed an 'e'. :)

Matthew Lehman
Matthew Lehman
5,282 Points

WOW thanks Jason, I can't believe I didn't catch that.

it worked and it did the job.

thanks again

Matthew Lehman
Matthew Lehman
5,282 Points

And thank you Marcus for helping me as well, and also the other questions too.

You've been very helpful with other forums as well.

No problemo, Matt! Just please, I beg of you, next time post a simple, little link to a snapshot of your workspace instead of posting all that code lol :P

Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

No problem... I've done that a few times. A second set of eyes usually does the trick. Glad I could help!

Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points

Thanks for your help Jason, I got the same issue except I had the HTML file.