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
Mary Nowak
1,441 PointsHow to Make a Website; Add a New Page. 4 minutes into the video
So at this point, Nick shows how hovering over the links for Portfolio, About and Contact, should change the color, but mine only Contact changes, the others stay white.
I keep checking over this section in my Index.html- example: <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul>
And also these sections of my main.css page - ex.:
nav a.selected, nav a:hover { color: #32673f; }
nav a, nav a:visited { color: #fff; }
But I'm just not catching where my error is. Can anyone help?
Thx! :-)
4 Answers
Francesca Canu
1,695 Pointshello Mary, yes, the css section marked "selected nav links" should come after the "nav link" (in the last line). your problem is here, whenever you define nav a, you are also overwriting all the pseudo classes :hover, :visited, :active etc. try and let me know if it works :)
Mary Nowak
1,441 PointsWow, that little error messed everything up- thank you so much for your help!!
Shows how green I am that it wasn't obvious to me just looking at the file I guess! :-)
Erick Kusnadi
21,615 PointsIt looks like in the html, all of the <a> links have the "selected" class.
'''html <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> '''
because of that this style below gets applied to all of the links, so when you hover over a link, they stay the same color, because the a.selected and a:hover, have the same color so it looks like it doesn't change
nav a.selected, nav a:hover { color: #32673f; }
Mary Nowak
1,441 PointsOH!! LOL, Erick, I'm so sorry, I was fooling around with the file, trying different things to see if I could fix it, and one of the things that I tried was adding [class="selected"] to each link to see if that helped (obviously not!).
I just reverted back to how it was in the file. I just tested it again in workplace, and Contact is the only one that turns green when I put the mouse over it, but the other 2 remain white. Here's the whole index.html - anything jump out at you?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mary Nowak | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Mary Nowak</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="contact.html">Contact</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>Trying to create and 80s style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/MaryXNowak"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<p>© 2015 Mary Nowak.</p>
</footer>
</div>
</body>
</html>
Francesca Canu
1,695 Pointsit is because of the cascade. the order matters in css. :) by defining a again after a:hover, you are overwriting the value. :)
the two lines should be in the following order: nav a { color: #fff; } nav a.selected, nav a:hover { color: #32673f; }
1 defines all a in a nav 2 defines the a inside of a nav with class .selected and the a with pseudoclass :hover
Mary Nowak
1,441 PointsHi Francesca, that makes total sense, and it's my fault for isolating those two lines instead of just including the whole file! :-) Here is how the whole file actually appears - is there something wrong about the order?
Thank you!! Mary
/**************************** 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%; }
/**************************** 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; }
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: 10; padding: 5%; font-size: 0.75em; color: #bcd3c7;
}
/**************************** COLORS *****************************/
/* site body */
body { background-color: #fff; color: #999; }
/* green header */ header { background: #6ab47b; border-color: #599a68; }
/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }
/* logo text */
h1, h2 { color: #fff; }
/* nav background on mobile */ nav { background: #599a68; }
/* links */ a { color: #6ab47b; }
/* nav link */ nav a, nav a:visited { color: #fff; }
Francesca Canu
1,695 Pointsdon't worry Mary it is a very common mistake. whenever something like this happens, always mind the cascade. cheers
Alex Dewey
5,944 PointsAlex Dewey
5,944 PointsPossibly in your HTML you haven't changed the selected link when you copy-pasted your code for the other pages? comment your full code and I'll look (: