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
Matthew Lehman
5,282 Pointsmy 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; }
Marcus Parsons
15,719 PointsMatthew,
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
Treehouse Moderator 145,860 PointsYou have a typo in you 2nd to last line in CSS. Fix to 'selected' -- you missed an 'e'. :)
Matthew Lehman
5,282 PointsWOW thanks Jason, I can't believe I didn't catch that.
it worked and it did the job.
thanks again
Matthew Lehman
5,282 PointsAnd thank you Marcus for helping me as well, and also the other questions too.
You've been very helpful with other forums as well.
Marcus Parsons
15,719 PointsNo 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
Treehouse Moderator 145,860 PointsNo problem... I've done that a few times. A second set of eyes usually does the trick. Glad I could help!
Caleb Kleveter
Treehouse Moderator 37,862 PointsThanks for your help Jason, I got the same issue except I had the HTML file.
Matthew Lehman
5,282 PointsMatthew Lehman
5,282 Pointsand 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>