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 Mark Brady
Mark Brady
6,239 Points

I have three pages on my site, but the contact page won't appear.. Any thoughts on why this is?

I have a nav with three page links. *Home - This works *About - This works ****Contact - This won't show when I try to preview it. (This is the problem)

Can someone help me out with this bug? Thanks

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Palawan Aid International Foundation Inc.</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>

  <body>

    <header>
     <a href="index.html">
     <h1>Palawan Aid International Foundation Inc.</h1>
     <h2>Learn. Grow. Serve.</h2>
     </a>
     <nav>
      <ul>
       <li><a href="index.html" class="selected">Home</a></li>
       <li><a href="about.html">About</a></li>
       <li><a href="contact.html">Contact</a></li> 


      </ul>
     </nav>
     </header>



   <section>
     <h3>Pictures from the Mountians of Palawan</h3> 
     <ul id="gallery">
      <li><a href="img/river.jpg">
        <img src="img/river.jpg" alt="River in Palawan">
        <p>Where many Palawanos swim and get water.</p></a></li>
      <li><a href="img/rupid.jpg">
        <img src="img/rupid.jpg" alt="A Palawano holding bananas">
        <p>A Palawano happy to sell his wares.</p></a></li> 
      <li><a href="img/Palawan.trail">
        <img src="img/Palawan.trail.jpg" alt="Trail in Palawan">
        <p>A missionary walking to carry gravel from the river.</p></a></li>  

     </ul>
   </section>

    <div id="my-footer"></div>

    <footer>
      <a href="#"><img src="img/facebook-wrap.png" class="facebook-icon" alt="facebook-icon"></a>
      <p>&copy; 2016 Mark Brady.</p>
    </footer>

  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Palawan Aid International Foundation Inc.</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>

  <body>

    <header>
     <a href="index.html">
     <h1>Palawan Aid International Foundation Inc.</h1>
     <h2>Learn. Grow. Serve.</h2>
     </a>
     <nav>
      <ul>
       <li><a href="index.html">Home</a></li>
       <li><a href="about.html" class="selected">About</a></li>
       <li><a href="contact.html">Contact</a></li> 
      </ul>
     </nav>
     </header>



   <section>

   </section>

    <div id="my-footer"></div>

    <footer>
      <a href="#"><img src="img/facebook-wrap.png" class="facebook-icon" alt="facebook-icon"></a>
      <p>&copy; 2016 Mark Brady.</p>
    </footer>

  </body>


</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Palawan Aid International Foundation Inc.</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>

  <body>

    <header>
     <a href="index.html">
     <h1>Palawan Aid International Foundation Inc.</h1>
     <h2>Learn. Grow. Serve.</h2>
     </a>
     <nav>
      <ul>
       <li><a href="index.html">Home</a></li>
       <li><a href="about.html">About</a></li>
       <li><a href="contact.html" class="selected">Contact</a></li> 
      </ul>
     </nav>
     </header>



   <section>
    <p>This is my contact page.</p>
   </section>

    <div id="my-footer"></div>

    <footer>
      <a href="#"><img src="img/facebook-wrap.png" class="facebook-icon" alt="facebook-icon"></a>
      <p>&copy; 2016 Mark Brady.</p>
    </footer>

  </body>


</html>

/****************
General Styling
****************/

body {
  font-family: cursive;
  background: lightgray;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: 500px;
  width: 500px;

}


/****************
Header
****************/

header {
 padding: 5px 0 0 0;
 width: 100%;
 height: 50%
 float: left;
}

h1, h2 {
  padding: 0 0 0 15px;

}

h1 {
  font-weight: 700;
  font-size: 2.5em;
}

h2 {
  font-weight: 400;
  font-size: 1.25em;
}


/****************
Navigation
****************/

nav ul {
 padding: 0 35px 0 0;
 float: right;
}

nav {

 float: right;
 margin: -20px 0px 25px 0;
 width: 100%
}

nav li {
 float: left;
 letter-spacing: .10em;
 list-style: none;
 padding: 0 20px 0 0;
 font-weight: bold;
}

.selected {
  color: lightgray;
}

/****************
Puesdo
****************/

nav li a:hover {
   color: white;
}


/****************
Blue Header
****************/

header {
  background: lightskyblue;
}

header a {
  color: forestgreen;
}
nav {
  background: lightskyblue;
}




/****************
Page: Home
****************/


section h3 {
  text-align: center;
}

#gallery {
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 28.3333%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 1em;
  color: black;
  text-align: center;
}



/****************
Footer
****************/

footer {
  margin: 0 0 0 0;
  padding: 30px 0 35px 0;
  background: lightskyblue; 
  text-align: center;
  clear: both;
  width: 100%;
  height: 50px;

}

.facebook-icon {
  width: 25px;
  height: 25px;
}

#my-footer {
  clear: both;
  height: 50px;
  width: 100%;
  background: lightgray;
}

```css
Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points

Can you post your html?

Michael Caveney
Michael Caveney
50,144 Points

Looks like your doctype, and other vital elements are declared more than once. Cleaning that up should fix the issue.

Mark Brady
Mark Brady
6,239 Points

Where the Doctype starts again that actually starts a new .html page and of course the last one is a css file. I didn't post them separate, because I didn't know how to.

Steven Parker
Steven Parker
244,115 Points
Steven Parker
Steven Parker
244,115 Points

To separate your files, the code marks (```) must be on lines by themselves, optionally with the language but only if it's the starting one.

A better way to share large and/or multiple files is by making a snapshot of your workspace and posting the link to it.

Ethan Rivas
Ethan Rivas
9,979 Points

He means that why are you declaring two htmls tags?*

<!DOCTYPE html>
<html>
Michael Caveney
Michael Caveney
50,144 Points

Ok, it seems clearer that it's three different pages. I don't see any egregious errors. What are you testing this in? Are all files properly named and in the same folder?

1 Answer

Steven Parker
Steven Parker
244,115 Points
Steven Parker
Steven Parker
244,115 Points

I loaded all these pages into a workspace and they all appear as expected.

I can switch from home to contact or from about to contact with no problems.

There may be some other issue that might be seen only on a snapshot of your own workspace.

Mark Brady
Mark Brady
6,239 Points

https://w.trhou.se/b3k13aclj6

Thanks for your help. I hope this is what you're looking for.

Mark Brady
Mark Brady
6,239 Points

I logged in today and tested the site again and it's working! I don't understand what the issue was, but it's not there anymore.

Thank you for you help and willingness.