Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Adding Pages to a Website Build the Contact Page

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

Is your Contact page called contact.html?

2 Answers

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

You actually helped me solve TWO problems! Thank you!

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