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.

CSS How to Make a Website Adding Pages to a Website Add a New Page

about.html is the same as index.html

This is the code for my about page. As you can see, I've changed the class="selected" to the about icon and I've deleted the code in between the section elements.

For some reason the section material is still there as well as the portfolio is still marked as selected.

Could use some help. Thanks!

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit | Designer</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.html" id="logo"> <h1>Nick Pettit</h1> <h2>Designer</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"> <section> </section> <footer> <a href="http://twitter/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com.nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2013 Nick Pettit.</p> </footer> </div> </body> </html>

Craig Schlegel
Craig Schlegel
12,268 Points

The only thing I could think of is that you are still linking to the "index.html" page when you try to navigate to about.html.

I would check your anchor tags '<a>' tags in your index.html file to see if they are set up correctly. You might have something like this

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

notice that even though the second link still says "About" it is directing you back to index.html due to the href having the value that it does.

8 Answers

Thanks, I did think of that and here is what I have on the index page:

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

Here is what I have on the about page:

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

Below you can see ALL of my index page. I'll make another post with the about page.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit | Designer</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.html" id="logo"> <h1>Nick Pettit</h1> <h2>Designer</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/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com.nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2013 Nick Pettit.</p> </footer> </div> </body> </html>

Below is the about page: (thanks for any assistance)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit | Designer</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.html" id="logo"> <h1>Nick Pettit</h1> <h2>Designer</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"> <section> </section> <footer> <a href="http://twitter/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com.nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2013 Nick Pettit.</p> </footer> </div> </body> </html>

Craig Schlegel
Craig Schlegel
12,268 Points

Hmm. I thought of some other things that might be the issue...

Is there any chance that the width of the anchor tag for the selected class stretches over the about link so that when you click it still hits the index.html anchor tag? (this is unlikely unless you did something really funky in the css). If you right click on the link and select inspect element it will show you exactly where the anchor tag starts and ends.

Otherwise, do you have all of your files in the same folder and are they all files and not folders? If one of your files is accidentally placed in another folder it will mess up how they link and in some circumstances, index.html will display by default.

That's about all I can think of. Hopefully someone else chimes in if this doesnt work

here's the CSS, I don't think there is any overlap. with the links. I'm deleting everything and repasting to see if that helps.

Thanks for you help.

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

body { font-family: 'Open Sans', 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: 'Changa One', sans-serif; margin: 15px 0; font-size; 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: .075em; 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: #6ab47b; border-color: #599a68; }

/nav background on mobile/ nav { background: #599a68 }

/logo text/ h1, h2 { color: #fff; }

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

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

/* selected and hover*/ nav a.selected, nav a:hover { color: #32673f; }

I think this might be some kind of workspace bug. even after I delete the page files, and after I refresh, the pages are still there.

I think I'm going to email customer support.

Marko Kranjac
Marko Kranjac
1,674 Points

man i got this same exact bug whatsa going on???

I have a bug that will not allow me to place paragraphs in my about page under <section> tag and my index file links to about and contact but not on a web server?