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 trialErnest Son
13,532 Pointsnav elements are not darkening when they are selected...why? hovering works
here is the excerpt from index.html:
<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>
and from main.css:
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
3 Answers
Aimee Ault
29,193 PointsLooks like you're using a colon, like this
class: "selected"
In HTML, you should assign values to attributes using an "=", like this, however:
class="selected"
Hope that helps!
Neal Gist
8,438 PointsHey Ernest, are you sure a.selected is the correct selector? Please post all the code you have available (following the Markdown Cheatsheet por favor) so we can help assist you!
Ernest Son
13,532 Pointsi followed Nick P's code and double checked....maybe i missed something...
from index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ernest Son | 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>Ernest Son</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 PS</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Using 80's style glows</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created with brushes</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repitition</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/ernleeson"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
<a href="http://facebook.com/ernest.son.9"><img src="img/facebook-wrap.png" alt="Facebook logo"class="social-icon"></a>
<p>© 2014 Ernest Son.</p>
</footer>
</div>
</body>
</html>
from main.css...
```/*********************************
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 {
margin: -5px 0 0;
font-size: 0.75em;
font-weight: normal;
}
/***********************************
NAVIGATION
*************************************/
nav {
text-align:center;
padding:10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10 px;
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;
}
/***********************************
COLORS
*************************************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile*/
nav {
background: #599a68
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #6ab47b;
}
/* nav link */
nav a , nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
Atanas Sqnkov
14,981 PointsHey Ernest!
You can achieve your goal in two ways.
- Using jQuery and adding the class dynamically
- Or.. simply by using a small workaround, because for now it is best for You to stay focused on HTML/CSS rather than jQuery because of its complexity for You at this time.
You have a class of
a.selected {
color: #32673f;
}
What you have to do is, copy the class="selected" and simply put it in the html of each separate *.html page of yours.
Little clarification here - in your index.html, the ul for the menu should look like this
<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>
And the ul for your about.html page should look like this
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
And for contact.html
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
I think this is the best way to do it for your project, because of its size. If it was a larger-scale project, I would advice using jQuery, but first you will have to learn some back-end development. I think you get my point.
Cheers!
Ernest Son
13,532 PointsErnest Son
13,532 Pointsthank you! and no spaces between the equal sign and quotes! got it!