This is an example of

Here's the html code

<div id="buttons">
<div class="btn" id="btn1"><a href="#section1">Button 1</a></div>
<div class="btn" id="btn2"><a href="#section2">Button 2</a></div>
<div class="btn" id="btn3"><a href="#section3">Button 3</a></div>
<div class="btn" id="btn4"><a href="#section4">Button 4</a></div>
<div class="btn" id="btn5"><a href="#section5">Button 5</a></div>
<div class="btn" id="btn6"><a href="#section6">Button 6</a></div>
<section id="section1">
<article id="article1">Content for id "article3" Goes Here</article>
<section id="section2">
<article id="article2">Content for id "article3" Goes Here</article>
<section id="section3">
<article id="article3">Content for id "article3" Goes Here</article>
<section id="section4">
<article id="article4">Content for id "article4" Goes Here</article>
<section id="section5">
<article id="article5">Content for id "article5" Goes Here</article>
<section id="section6">
<article id="article6">Content for id "article6" Goes Here</article>
<section id="section7">
<footer>Copyright 201x © Freestyle Academy. All rights reserved</footer>

Here's the CSS

nav {
width: 100%;
height: 20px;
position: fixed;/*Fixes the nav elements to top of page and will not scroll with content*/
z-index: 99999;/*This LARGE number ensures nav elements will be on TOP of sections and article*/
#buttons {
width: 980px;
height: 20px;
margin: 0 auto;/*centers all buttons to browser*/
#btn1 {
margin-left: 374px;/*used to shift all buttons to the right inside #buttons*/
.btn {/*styling for all the buttons*/
width: 100px;
height: 20px;/*Same as #buttons above*/
float: left;
cursor: pointer;
text-align: center;
color: #0000FF;
background-color: rgba(255,255,0,0.5);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
section {
width: 100%;
height: auto;
position: relative;
z-index: 100;/*Must be smaller than z-index for nav above*/
article, footer {
width: 970px;
margin-right: auto;
margin-left: auto;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 50px;/*Used to push article content down from top to prevent overlap with top buttons*/
/*Set the background images for each section*/
#section1 {
background-image: url(images/bg1.jpg);
#section2 {
background-image: url(images/bg2.jpg);
#section3 {
background-image: url(images/bg3.jpg);
#section4 {
background-image: url(images/bg4.jpg);
#section5 {
background-image: url(images/bg5.jpg);
#section6 {
background-image: url(images/bg6.jpg);
#section7 {
background-image: url(images/bg7.jpg);
#article1 {
background-color: rgba(255,153,102,0.5);/*The 0.5 at the end makes the solid color 50% transparent*/
height: auto;/*Allows article to grow vertically as needed from content*/
color: #FFFFFF;/*Text color*/
#article2 {
background-color: rgba(153,204,102,0.5);
height: auto;
#article3 {
background-color: rgba(51,255,153,0.5);
height: 700px;/*Article has specific height independent from content*/
#article4 {
background-color: rgba(102,204,255,0.5);
height: 400px;
#article5 {
background-color: rgba(204,204,255,0.5);
height: 300px;
#article6 {
background-color: rgba(51,255,153,0.5);
height: 600px;
footer {
background-color: rgba(51,51,51,0.5);
color: #FFF;
height: 600px;/*Makes this tall so that #article6 can be allowed to go all the way to the top*/
text-align: center;
font-size: 0.8em;
Content for id "article4" Goes Here
Content for id "article5" Goes Here
Content for id "article6" Goes Here