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 Stephanie Roberts
Stephanie Roberts
16,757 Points

Index changes slightly compared to other pages

I have created a 4 page website and I have applied the same styles to the main nav and header to every page, however when I am on a page and click to return to the index the header and nav decreases in size. I changed index.html to home.html instead to see if it would change anything and now the code is somehow the same on every page now and main nav and header are perfect. Could someone help me and explain why this is doing this? I find this really strange. When i change home.html to index.html the header and nav change is size!

9 Answers

lovell
lovell
7,882 Points
lovell
lovell
7,882 Points

Sure. Either paste your HTML and CSS on here. Alternatively paste them here http://www.codepen.io and ill take a look

Juan Aviles
Juan Aviles
12,795 Points
Juan Aviles
Juan Aviles
12,795 Points

Do you have extra content on the index.html page that would cause a side scrollbar to appear when viewing it? This would cause a change in your screen width, and could have an effect on the CSS controlling your nav and header elements. However, that does not explain why it works when you change the name to home.html. Is your site online somewhere that we can view it?

Stephanie Roberts
Stephanie Roberts
16,757 Points
Stephanie Roberts
Stephanie Roberts
16,757 Points

<!DOCTYPE html> <html> <head> <title>Stephanie Roberts | Portfolio</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/grid.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="main-header"> <div class="grid-container">
<h1 class="grid-2 main-logo hide-mobile"><a href="home.html"><img src="img/logo.png"></a></h1> <ul class="grid-8 main-nav"> <li><a href="home.html">HOME</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="portfolio.html">PORTFOLIO</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </div> </header>

<div class="main-banner hide-mobile">
<img src="img/texture3.png">

</div>

    <div class="grid-container">
    <div class="grid-4">
    <img src="img/front_end.png">
        <h3>Ease of Use</h3>
    <p> My websites are very user friendly <br> and easily navigated.</p>
    </div>
    <div class="grid-4">
    <img src="img/designs.png">
        <h3>Efficency</h3>
    <p> My designs and creations are<br> completed efficently.</p>
    </div>
    <div class="grid-4">
    <img src="img/responsive_design.png">
    <h3>Responsive Design</h3>
    <p> I create websites that work<br> on every device!</p>

    </div>
</div>




<footer class="main-footer">
<img src="img/texture2.png">
    <p>&copy;2014 Designed by Stephanie Roberts</p>
</footer>

</body> </html>

Stephanie Roberts
Stephanie Roberts
16,757 Points
Stephanie Roberts
Stephanie Roberts
16,757 Points

  • Page Styles ================================ */

  • { -moz-box-sizing: border-box; box-sizing: border-box; } body { font: normal 1em/1.5 'Droid Sans', sans-serif; color: #222;

}

/* Layout Element Colors ================================ */ .main-header {background-color: #fff;}

.main-nav a {color:#414a50;} .main-nav a:hover { color:#DD4B4C; } .main-footer p { color:#fff;} .grid-4 h3 {color:#414a50;} .grid-4 p {color:#414a50;} h1 {color:#414a50;} p {color:#414a50;}

/* Main Layout Styles ================================ */

.main-logo { margin-top: 0; margin-bottom: 0; font-size: 1.5em;

} .main-logo a, .main-nav a { display: block; text-align: center; text-decoration: none; padding: 10px 20px; }

.main-logo img { width: 60px; height: 60px; margin-top: 14px; float: left; }

.main-footer { text-align: center; margin-top: 30px; padding-top: 5px; padding-bottom: 0px; margin-bottom: 0px; }

.grid-4 img { width: 130px; height: 130px; margin-left: 96px; }

.grid-4 img:hover { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier*/ }

.grid-4 p, .main-footer p { font-family: 'Droid Sans', sans-serif; font-size: 1em; -webkit-font-smoothing:antialiased; text-align: center; }

h3 { font-size: 1.4em; -webkit-font-smoothing:antialiased; text-align: center; }

@media (min-width: 768px) { 

/* Media Queries
================================ */

body {
    padding-top: 75px;
}

.main-header {
padding-top: 10px;
padding-bottom: 10px;

} .main-header { position: fixed; top: 0; width: 100%; } .main-nav { text-align: right; margin-top: 38px; } .main-nav li { margin-top: 6px; margin-left: 10px; display: inline-block; } .main-banner { text-align: center; padding: 50px 0px; margin-bottom: 20px; }

.background {
    background-color: #F8F6F5;
    line-height: 1.8em;
    margin-top: 50px;
    margin-bottom: 20px;
    padding-top: 20px;  
}

.background h1, p {
    margin-left: 30px;
    padding-bottom: 10px;
    padding-top: 10px;
    -webkit-font-smoothing:antialiased;
}

.main-footer img {
margin-bottom: -84px;
}

.map {
    margin-bottom: 90px;
    margin-top: 30px;
}




/* Imagery
================================ */
.photo {
    width: 250px;
    height: 250px;
    border: 5px solid #fff;
    float: right;
    margin-right: 20px;
    margin-top: 26px;
}

}

@media (min-width: 1px) and (max-width: 767px) { .main-nav li { margin-top: 12px; background-color:#EBE6E8; border-radius: 10px; }

.grid-4 img {
    margin-left: 244px;
}

.photo {
    width: 200px;
    height: 200px;
    margin-left: 170px;

}

}

Stephanie Roberts
Stephanie Roberts
16,757 Points
Stephanie Roberts
Stephanie Roberts
16,757 Points

No I haven't got in online yet

lovell
lovell
7,882 Points
lovell
lovell
7,882 Points

Thanks for the code...I cant see the head section. Have you checked that the CSS section is all correct. Is the rest of the CSS working correctly on the index page?

Stephanie Roberts
Stephanie Roberts
16,757 Points
Stephanie Roberts
Stephanie Roberts
16,757 Points

Its very strange, I changed the about.html page to index.html to see if it would change and it does! It seems to be whenever I call it index.html the nav and header become smaller.

Stephanie Roberts
Stephanie Roberts
16,757 Points
Stephanie Roberts
Stephanie Roberts
16,757 Points

```<header class="main-header"> <div class="grid-container">
<h1 class="grid-2 main-logo hide-mobile"><a href="home.html"><img src="img/logo.png"></a></h1> <ul class="grid-8 main-nav"> <li><a href="home.html">HOME</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="portfolio.html">PORTFOLIO</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </div> </header>

Stephanie Roberts
Stephanie Roberts
16,757 Points
Stephanie Roberts
Stephanie Roberts
16,757 Points

That is the code for my header