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

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

Posted by Morgan Hondros
Morgan Hondros
Courses Plus Student 1,450 Points

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

Morgan Hondros
PLUS
Morgan Hondros
Courses Plus Student 1,450 Points
Morgan Hondros
Morgan Hondros
Courses Plus Student 1,450 Points

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>
Morgan Hondros
PLUS
Morgan Hondros
Courses Plus Student 1,450 Points
Morgan Hondros
Morgan Hondros
Courses Plus Student 1,450 Points

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>

Morgan Hondros
PLUS
Morgan Hondros
Courses Plus Student 1,450 Points
Morgan Hondros
Morgan Hondros
Courses Plus Student 1,450 Points

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

Morgan Hondros
PLUS
Morgan Hondros
Courses Plus Student 1,450 Points
Morgan Hondros
Morgan Hondros
Courses Plus Student 1,450 Points

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

Morgan Hondros
PLUS
Morgan Hondros
Courses Plus Student 1,450 Points
Morgan Hondros
Morgan Hondros
Courses Plus Student 1,450 Points

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
Marko Kranjac
Marko Kranjac
1,674 Points

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

aaron Leighton
seal-mask
.a{fill-rule:evenodd;}techdegree
aaron Leighton
Full Stack JavaScript Techdegree Student 1,267 Points
aaron Leighton
.a{fill-rule:evenodd;}techdegree
aaron Leighton
Full Stack JavaScript Techdegree Student 1,267 Points

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?