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 How to Make a Website Adding Pages to a Website Build the Contact Page

Deborah Williamson
Deborah Williamson
2,997 Points
Posted by Deborah Williamson
Deborah Williamson
2,997 Points

Contact page won't appear

when i click on the contact page all i see is the gallery. i think maybe the class="selected" function isn't responding or something :/ i don't know. here is my code so far

Deborah Williamson
Deborah Williamson
2,997 Points
Deborah Williamson
Deborah Williamson
2,997 Points 
<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8">
     <title>Deborah Williamson</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.htm" id="logo">
    <h1>Deborah Williamson</h1>
    <h2>Designer</h2>
        </a>
      <nav>
      <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>
      </nav>
      </header>
    <div id="wraper">
      <section>
        <h3> General Information</h3>
        <p> This is just a project</p>
    </section>
      <h3> Contact Details</h3>
      <ul class="contact-info"></ul>
      <li class="phone"><a href="tel:000-000">000-0000</a></li>
      <li class="mail"><a href="mailto:dtwill95@example.com"> dtwill95@example.com</a></li>
      <section>
              </section>
      <footer>
        <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
         <img src="img/facebook-wrap.png" alt="FacebookS Logo" class="social-icon">
      <p>&copy; Deborah Williamson.</p>
    </footer>
      </div>
    </body>
  </html>
Holt Hunter
Holt Hunter
4,629 Points
Holt Hunter
Holt Hunter
4,629 Points

Is your Contact page called contact.html?

2 Answers

Jerilyn P
Jerilyn P
8,788 Points

This looks like the code for your contact page. Make sure that on your index.html and about.html pages, your nav list has the correct link to "contact.html" under the third item, like this:

  <nav>
  <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>
  </nav>

That is what you have on your contact page currently, but please check to make sure it is the same (except for you "selected" class) on the Index and About pages.

All adding the "selected" class does is allow you to create different styling for that link in the CSS, for instance, making it a different color. It should not affect the actual navigation in your HTML.

Also, you have a broken link under your <header>: please correct the link to "index.html" (you currently have it as index.htm).

Finally, you spelled your div ID "wrapper" as "wraper". You'll probably want to correct that so you don't have any trouble getting it to match up with your CSS later.

Good luck and let us know if that doesn't work.

Deborah Williamson
Deborah Williamson
2,997 Points
Deborah Williamson
Deborah Williamson
2,997 Points

You actually helped me solve TWO problems! Thank you!

Austin Goodrich
Austin Goodrich
5,221 Points
Austin Goodrich
Austin Goodrich
5,221 Points

<li><a href="contact.html" class="selected">Contact</a></li>

you should have under your css file a class called "selected"

I would rearrange it to

li.selected { CSS Code }

and your code to

<li class="selected"><a href="contact.html">Contact</a></li>

Example from my site

HTML Code <li class="active"><a href="index.html">Home</a></li>

CSS Code active { color: #fff; background-color: #080808; }

http://www.sherwoodgaming.com/