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

HTML

Posted by Daniel Windley
Daniel Windley
656 Points

Navigation Links Unresponsive..

does anyone have a moment to look over my code and point out what i'v done wrong?

the navigation links don't seem to work

.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Daniel Windley | Gamer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door|Just+Me+Again+Down+Here|Bangers' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Daniel Windley</h1>
        <h2>Gamer</h2>
      </a>
      <nav>
        <ul>
          <li><a herf="index.html">Portfolio</a></li>
          <li><a herf="about.html">About</a></li>
          <li><a herf="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpeg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpeg">
              <img src="img/numbers-02.jpg" alt="">
              <p>playing with blending modes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpeg">
              <img src="img/numbers-06.jpg" alt="">
              <p>80's style.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpeg">
              <img src="img/numbers-09.jpg" alt="">
              <p>drips.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpeg">
              <img src="img/numbers-12.jpg" alt="">
              <p>shapes using repetition.</p>
            </a>
          </li> 
        </ul>
      </section>
      <footer>
        <a href="https://www.google.com/+DanielWindley"><img src="img/google.png" alt="Google+ Logo" class="social-icon"></a>
        <a href="http://www.youtube.com/user/WindleyDaniel"><img src="img/youtube.png" alt="Youtube Logo" class="social-icon"></a>
        <a href="http://us.playstation.com/playstation/psn/visit/profiles/wigatron82"><img src="http://fp.profiles.us.playstation.com/playstation/psn/pid/wigatron82.png" width="230" height="155" border="0" class="social-icon"/></a><br/>
      </footer>
    </div>
   </body>  
</html>

.css

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

body {
  font-family: 'The Girl Next Door', '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: 'Just Me Again Down Here', sans-serif;
  margin: 15px 0;
  font-size: 5em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-family: 'Bangers', sans-serif;
  font-size: 3em;
  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
}


/***************************
COLORS
***************************/

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

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

/* nav background on mobile */
nav {
  background: #777777;
}

/* logo text */
h1 {
  color: #777777;
}

h2 {
  color: #ff0000;
}

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

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

/* selected nav link */
nav a.selected, nav a:hover {
  color: #ff6600;
}

3 Answers

Stone Preston
Stone Preston
42,016 Points 
          <li><a herf="index.html">Portfolio</a></li>
          <li><a herf="about.html">About</a></li>
          <li><a herf="contact.html">Contact</a></li>

you misspelled href as herf. it should be

         <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
leo kamin
leo kamin
5,550 Points
leo kamin
leo kamin
5,550 Points

Yeah on your nav you actually typed herf as opposed to href

Daniel Windley
Daniel Windley
656 Points
Daniel Windley
Daniel Windley
656 Points

thanks guys...

all it took was a fresh pair of eyes..