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 Add a New Page

Posted by journeyhahn
journeyhahn
6,178 Points

The about page doesn't show up "blank", it still has the same appearance as the portfolio.

When I switch from the portfolio page and the about page, the about page still has the same content as the portfolio page. Even though the preview shows it's on the about page based on the URL. I've been trying to fix this for the past couple days and I haven't found the solution.

Here's my code for the about.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>We Shall Live 4eva | Peanutbutter</title>
    <link rel="stylesheet" href="Css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,700,800,400' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="Css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Peanutbutter</h1>
        <h2>Journey Hahn</h2>
      </a>
       <nav>
        <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>
      </nav>
    </header>
      <div id="wrapper">
        <footer>
          <p>&copy; 2014 Journey Hahn.</p>
        </footer>
      </div>
  </body>
</html>

Please help.

Here is the Index coding:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Journey Hahn | Peanutbutter</title>
    <link rel="stylesheet" href="Css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,700,800,400' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="Css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Peanutbutter</h1>
        <h2>Journey Hahn</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/Koala.jpg">
                <img src="img/Koala.jpg" alt="">
                <p>Koalas Are Boss</p>
              </a>
            </li>
            <li>
              <a href="img/Chrysanthemum.jpg">
                <img src="img/Chrysanthemum.jpg" alt="">
                <p>Flower Power!</p>
              </a>
            </li>
            <li>
              <a href="img/Jellyfish.jpg">
                <img src="img/Jellyfish.jpg" alt="">
                <p>This is Completely Relevant</p>
              </a>
            </li>
            <li>
              <a href="img/Penguins.jpg">
                <img src="img/Penguins.jpg" alt="">
                <p>Dance Party, Dance!</p>
              </a>
            </li>
            <li>
              <a href="img/Tulips.jpg">
                <img src="img/Tulips.jpg" alt="">
                <p>Tulips, Nough Said</p>
              </a>
            </li>
         </ul>
        </section>
        <footer>
          <p>&copy; 2014 Journey Hahn.</p>
        </footer>
      </div>
  </body>
</html>

2 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

If you take your about.html and contact.html files out of their folder so they are on the same level as your index.html folder they will work.

But the better option is to correct the file path in your navigation to include the folder your about and contact file are in, for example the first part of doing this would look like this:

Below is the actual navigation from one of my websites, the index.html file.
All my html pages apart from index.html are in a folder called content.
Notice how i have the folder path they are in in the nav li

<nav id="bt-menu" class="bt-menu">
    <div class="row">
        <div class="small-2 small-centered columns">
            <a href="#" class="bt-menu-trigger"><span>Menu</span></a>
        </div>
    </div>
    <ul>
        <li class='current'><a class='current' href="index.html">Home</a></li>
        <li><a href="content/pricing.html">Pricing</a></li>
        <li><a href="content/about.html">About</a></li>
        <li><a href="content/contact.html">Contact</a></li>
        <li><a href="content/hire.html">Work with me</a></li>
        <li><a href="content/work.html">Portfolio</a></li>
        <li><a href="content/business-identity.html">Business Identity</a></li>
    </ul>
</nav>

Below is the nav from the about.html file.
Notice how the li for the index.html file has ../ this means that you have to come out of the content folder to get back to the index.html file.
Also you can see that the rest of the pages have a normal file path because they are all in the content folder.

<nav id="bt-menu" class="bt-menu">
    <div class="row">
        <div class="small-2 small-centered columns">
            <a href="#" class="bt-menu-trigger"><span>Menu</span></a>
        </div>
    </div>
    <ul>
        <li><a href="../index.html">Home</a></li>
        <li><a href="pricing.html">Pricing</a></li>
        <li class='current'><a class='current' href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="hire.html">Work with me</a></li>
        <li><a href="work.html">Portfolio</a></li>
        <li><a href="business-identity.html">Business Identity</a></li>
    </ul>
</nav>

I hope that makes it all clear to you.
just ask if you need more help.

journeyhahn
journeyhahn
6,178 Points

Okay. Thank you so much!

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi,

Is your about.html at the same level as your index.html file? or are they in their own folder?

journeyhahn
journeyhahn
6,178 Points

They are in their own separate folders. Sorry, I didn't think to including the coding for the index. I've edited my question so that the index coding is included. I'm sorry for replying so late. Thank you.