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!

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

HTML

Ernest Son
Ernest Son
13,532 Points

nav 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
Aimee Ault
29,193 Points

Looks 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!

Ernest Son
Ernest Son
13,532 Points

thank you! and no spaces between the equal sign and quotes! got it!

Hey 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
Ernest Son
13,532 Points

i 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>&copy; 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
Atanas Sqnkov
14,981 Points

Hey 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!