title: Ordered Lists Html Page Tabs to Open Webpages in same page
body: <p>So I'm building a site and I want to have little tabs on the right hand side that will change the content on the main page without having to refresh the entire page, like an embedded page within the main page. I am working from a template (HTML and CS) and trying to modify the existing content. In the code you can notice that there is an ordered list which defines the buttons (Like Homepage and etc) and when hovered over they change background and look fancy, but they don't actually do anything. I've been reading up about how to make them change the page (by following a link) but I am confused and can't figure out how to do it. I was hoping you guys could help me. I'm very noobish to HTML and CSS and just trying to put something together and learn from example while also building a private site. Thank you for your help in advance!</p>
  
  <p><strong>INDEX.HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta name="keywords" content="" /&gt;
  &lt;meta name="description" content="" /&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;/rootbox&lt;/title&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'&gt;
  &lt;link href="style.css" rel="stylesheet" type="text/css" media="screen" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
      &lt;div id="header-wrapper"&gt;
          &lt;div id="header" class="container"&gt;
              &lt;div id="logo"&gt;
                  &lt;h1&gt;&lt;a href="#"&gt;Rootbox&lt;/a&gt;&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div id="menu"&gt;
                  &lt;ul&gt;
                      &lt;li class="current_page_item"&gt;&lt;a href="#"&gt;Homepage&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Distros&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Wifi&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Tools&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="banner"&gt;
              &lt;div class="content"&gt;&lt;img src="images/title.png" width="1000" height="300" alt="" /&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- end #header --&gt;
  
      &lt;div id="page"&gt;
          &lt;div id="content"&gt;
              &lt;div class="post"&gt;
                  &lt;h2 class="title"&gt;&lt;a href="#"&gt;Welcome to /rootbox&lt;/a&gt;&lt;/h2&gt;
                  &lt;div style="clear: both;"&gt;&amp;nbsp;&lt;/div&gt;
                  &lt;div class="entry"&gt;
                      &lt;p&gt;/rootbox is a collection of Security oriented Tools, Tutorials, Resources and Websites.This site offers a collection of well documented and freely available tools and resources for both a begginer pen-tester and the professional white-hat. Everything on this site is simply a collection, thus no original content is posted. All links have been tested and properly checked for security. All software published here is free and available directly from the author's site. Tutorials are often updated and deprecated software is removed.
                      &lt;/br&gt;&lt;/br&gt;
                      This site is hosted on Panckake.io - A web framework which allows for publishing websites directly from Dropbox. For more information go &lt;a href="http://pancake.io"&gt;here&lt;/a&gt;.If you need any additional help, or have any feedback or suggestions, send an email to rushone2010@gmail.com.
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
          &lt;!-- end #content --&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;
      &lt;p&gt;Copyright (c) 2012. All rights reserved. Design by &lt;a href="http://www.freecsstemplates.org"&gt;FCT&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;!-- end #footer --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>STYLE.CSS</strong></p>
  
  <pre><code>body {
      margin: 0;
      padding: 0;
      background: #050505 url(images/img01.jpg) repeat;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #5B5B5B;
  }
  
  h1, h2, h3 {
      margin: 0;
      padding: 0;
      text-transform: uppercase;
      font-weight: normal;
      font-family: 'Oswald', sans-serif;
      font-weight: 200;
      color: #222222;
  }
  
  h1 {
      font-size: 2em;
  }
  
  h2 {
      font-size: 2.8em;
  }
  
  h3 {
      font-size: 1.6em;
  }
  
  p, ul, ol {
      margin-top: 0;
      line-height: 180%;
  }
  
  ul, ol {
  }
  
  a {
      color: #5E5E5E;
  }
  
  a:hover {
  }
  
  #wrapper {
      background: #FFFFFF url(images/img05.jpg) repeat;
  }
  
  .container {
      width: 1000px;
      margin: 0px auto;
  }
  
  /* Header */
  
  #header-wrapper {
      overflow: hidden;
  }
  
  #header {
      width: 1000px;
      height: 150px;
      margin: 0 auto;
      padding: 0px 0px;
  }
  
  /* Logo */
  
  #logo {
      float: left;
      width: 300px;
      margin: 0;
      padding: 0;
      color: #FFFFFF;
  }
  
  #logo h1, #logo p {
  }
  
  #logo h1 {
      line-height: 120px;
      letter-spacing: -2px;
      font-size: 3.8em;
  }
  
  #logo h1 a {
      color: #1F1F1F;
      text-shadow: 1px 1px 0px rgba(0,0,0,.2);
  }
  
  #logo p {
      margin: 0;
      padding: 0px 0 0 0px;
      letter-spacing: -1px;
      font: normal 18px Georgia, "Times New Roman", Times, serif;
      font-style: italic;
      color: #8E8E8E;
  }
  
  #logo p a {
      color: #8E8E8E;
  }
  
  #logo a {
      border: none;
      background: none;
      text-decoration: none;
      color: #000000;
  }
  
  /* Splash */
  
  #splash {
      width: 960px;
      height: 300px;
      margin: 0px auto;
  }
  
  /* Search */
  
  #search {
      float: right;
      width: 280px;
      height: 60px;
      padding: 20px 0px 0px 0px;
  }
  
  #search form {
      height: 41px;
      margin: 0;
      padding: 10px 0 0 20px;
  }
  
  #search fieldset {
      margin: 0;
      padding: 0;
      border: none;
  }
  
  #search-text {
      width: 170px;
      padding: 6px 5px 2px 5px;
      border: 1px solid #E7EBED;
      background: #FFFFFF;
      text-transform: lowercase;
      font: normal 11px Arial, Helvetica, sans-serif;
      color: #5D781D;
  }
  
  #search-submit {
      width: 50px;
      height: 22px;
      border: none;
      background: #B9B9B9;
      color: #000000;
  }
  
  /* Menu */
  
  #menu {
      float: right;
      width: 500px;
      height: 90px;
      margin: 0 auto;
      padding: 0;
  }
  
  #menu ul {
      float: right;
      margin: 0;
      padding: 20px 0px 0px 0px;
      list-style: none;
      line-height: normal;
  }
  
  #menu li {
      float: right;
  }
  
  #menu a {
      display: block;
      line-height: 100px;
      margin-right: 1px;
      padding: 0px 20px 0px 20px;
      text-decoration: none;
      text-align: center;
      text-shadow: 1px 1px 0px rgba(0,0,0,.2);
      text-transform: uppercase;
      font-family: 'Oswald', sans-serif;
      font-size: 16px;
      font-weight: 300;
      color: #1F1F1F;
      border: none;
  }
  
  #menu a:hover, #menu .current_page_item a {
      background: url(images/img01.jpg) repeat;
      text-decoration: none;
      color: #FFFFFF;
  }
  
  #menu .current_page_item a {
  }
  
  /* Page */
  
  #page {
      width: 1000px;
      margin: 0 auto;
      padding: 30px 0px;
  }
  
  /* Content */
  
  #content {
  
  
      padding: 0px 0px 0px 0px;
  }
  
  .post {
      overflow: hidden;
      margin-bottom: 40px;
      border-bottom: 1px solid #E7EBED;
  }
  
  .post .title {
      padding: 0px 0px 0px 0px;
      letter-spacing: -1px;
  }
  
  .post .title a {
      border: none;
      text-decoration: none;
      color: #222222;
  }
  
  .post .meta {
      margin-bottom: 30px;
      padding: 10px 0px 0px 0px;
      text-align: left;
      font-family: 'Abel', sans-serif;
      font-size: 16px;
      font-weight: 300;
  }
  
  .post .meta .date {
      float: left;
  }
  
  .post .meta .posted {
      float: right;
  }
  
  .post .meta a {
  }
  
  .post .entry {
      padding: 0px 0px 40px 0px;
      text-align: justify;
  }
  
  .links {
      padding-top: 20px;
      margin-bottom: 30px;
  }
  
  .more {
      display: block;
      float: left;
      width: 88px;
      padding: 5px 5px;
      margin-right: 10px;
      background: #222222;
      color: #FFFFFF;
      text-align: center;
      text-decoration: none;
  }
  
  .comments {
      display: block;
      float: left;
      width: 88px;
      padding: 5px 5px;
      background: #222222;
      color: #FFFFFF;
      text-align: center;
      text-decoration: none;
  }
  
  /* Sidebar */
  
  #sidebar {
      float: left;
      width: 270px;
      margin: 0px;
      padding: 30px 0px 0px 0px;
  }
  
  #sidebar ul {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  #sidebar li {
      margin: 0;
      padding: 0;
  }
  
  #sidebar li ul {
      margin: 0px 0px;
      padding-bottom: 30px;
  }
  
  #sidebar li li {
      line-height: 40px;
      border-bottom: 1px solid #E7EBED;
      margin: 0px 0px;
      border-left: none;
  }
  
  #sidebar li li span {
      display: block;
      margin-top: -20px;
      padding: 0;
      font-size: 11px;
      font-style: italic;
  }
  
  #sidebar li li a {
      padding: 0px 0px 0px 20px;
      background: url(images/img04.jpg) no-repeat left 50%;
  }
  
  #sidebar h2 {
      height: 38px;
      padding: 0px 0px 30px 0px;
      letter-spacing: -.5px;
      font-size: 1.8em;
      color: #222222;
  }
  
  #sidebar p {
      margin: 0 0px;
      padding: 0px 30px 20px 30px;
      text-align: justify;
  }
  
  #sidebar a {
      border: none;
  }
  
  #sidebar a:hover {
      text-decoration: underline;
  }
  
  /* Calendar */
  
  #calendar {
  }
  
  #calendar_wrap {
      padding: 20px;
  }
  
  #calendar table {
      width: 100%;
  }
  
  #calendar tbody td {
      text-align: center;
  }
  
  #calendar #next {
      text-align: right;
  }
  
  /* Three Column Footer Content */
  
  #footer-content {
      overflow: hidden;
      width: 1000px;
      margin: 0px auto;
      color: #D6E2F0;
  }
  
  #footer-content a {
      color: #92A9B6;
  }
  
  #footer-bg {
      overflow: hidden;
      padding: 30px 0px;
      background: #E8E8E8;
  }
  
  #footer-content h2 {
      margin: 0px;
      padding: 0px 0px 20px 0px;
      letter-spacing: -1px;
      font-size: 26px;
      color: #262626;
  }
  
  
  #footer-content #fbox1 {
      float: left;
      width: 300px;
      margin-right: 50px;
  }
  
  #footer-content #fbox2 {
      float: left;
      width: 300px;
  }
  
  #footer-content #fbox3 {
      float: right;
      width: 300px;
  }
  
  #footer-content a {
  }
  
  #column1 {
      float: left;
      width: 290px;
      margin-right: 30px;
  }
  
  #column2 {
      float: left;
      width: 280px;
  }
  
  #column3 {
      float: right;
      width: 260px;
  }
  
  /* Footer */
  
  #footer {
      height: 140px;
      margin: 0 auto;
      padding: 50px 0 15px 0;
      font-family: 'Abel', sans-serif;
  }
  
  #footer p {
      margin: 0;
      padding-top: 10px;
      letter-spacing: 1px;
      line-height: normal;
      font-size: 14px;
      text-transform: uppercase;
      text-align: center;
      color: #5E5E5E;
  }
  
  #footer a {
      color: #5E5E5E;
  }
  
  #marketing {
      overflow: hidden;
      margin-bottom: 30px;
      padding: 20px 0px 10px 0px;
      border-top: 1px solid #E7EBED;
      border-bottom: 1px solid #E7EBED;
  }
  
  #marketing .text1 {
      float: left;
      margin: 0px;
      padding: 0px;
      letter-spacing: -2px;
      text-transform: lowercase;
      font-size: 34px;
      color: #345E9B;
  }
  
  #marketing .text2 {
      float: right;
  }
  
  #marketing .text2 a {
      display: block;
      width: 252px;
      height: 38px;
      padding: 15px 0px 0px 0px;
      background: url(images/img07.jpg) no-repeat left top;
      letter-spacing: -2px;
      text-align: center;
      text-transform: lowercase;
      font-size: 30px;
      color: #FFFFFF;
  }
  
  #banner {
      margin: 0px auto;
      width: 1000px;
      height: 340px;
      background: url(images/img03.png) no-repeat left bottom;
  }
  
  #banner .content {
  }
  
  
  .list-style1 {
      margin: 0px;
      padding: 0px;
      list-style: none;
  }
  
  .list-style1 a {
      color: #7F7F7F;
  }
  </code></pre>