about.html is the same as index.html

Question

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>

Answer 1 · 2014-12-30T17:11:47Z

December 30, 2014 5:11pm

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>

Answer 2 · 2014-12-30T17:14:17Z

December 30, 2014 5:14pm

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>

Answer 3 · 2014-12-30T17:14:57Z

December 30, 2014 5:14pm

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>

Answer 4 · 2014-12-30T17:33:28Z

December 30, 2014 5:33pm

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

Answer 5 · 2014-12-30T18:06:05Z

December 30, 2014 6:06pm

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

Answer 6 · 2014-12-30T18:34:31Z

December 30, 2014 6:34pm

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.

Answer 7 · 2015-01-16T00:49:47Z

January 16, 2015 12:49am

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

Answer 8 · 2015-03-30T15:37:07Z

March 30, 2015 3:37pm

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?

Welcome to the Treehouse Community

Looking to learn something new?

Morgan Hondros

Morgan Hondros

about.html is the same as index.html

Craig Schlegel

Craig Schlegel

8 Answers

Morgan Hondros

Morgan Hondros

Morgan Hondros

Morgan Hondros

Morgan Hondros

Morgan Hondros

Craig Schlegel

Craig Schlegel

Morgan Hondros

Morgan Hondros

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

Morgan Hondros

Morgan Hondros

Marko Kranjac

Marko Kranjac

aaron Leighton

aaron Leighton