title: Body overlaps fixed, horizontal nav bar up top - CSS/HTML
body: <p>I have to make a website for an assignment, and I'm having a bit of trouble. I've created a navbar up the top, and it's in a fixed position. However, when I scroll, everything shows through it. What I want, is essentially for the webpage to start under the navbar, so it's there at the top, and when I click 'About Me', it doesn't have the title under the navbar, like in the second image. </p>
  
  <p><a href="http://i.imgur.com/oTkXlWx.png" rel="nofollow">http://i.imgur.com/oTkXlWx.png</a></p>
  
  <p>Does anyone know how to do this? Thanks.</p>
  
  <pre><code>#top-bar
      {   
          border-top:#fff dashed 1px;
          width:100%;
          height:32px;
          background:black;
          opacity:0.8;
          text-align:center;
          position:fixed;
          top:0;
          padding-bottom:12px;
  
      }
  
  #top-nav li
  {
      display: inline-block;
      line-height: 49px;
      padding: 0px 14px;
  
  
  }
  
  #top-nav li a
  {
      display:block;
      color: #ddd;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-decoration: none;
      text-transform: uppercase;
  }
  
  #top-nav li:hover, #top-nav li:hover a
  {
      background-color:#333;
      color:#fff;
  }
  </code></pre>
  
  <p>and the html:</p>
  
  <pre><code>    &lt;nav id="top-bar"&gt;
          &lt;ul id="top-nav"&gt;
              &lt;li&gt;
                  &lt;a href="#about-text"&gt;About Me&lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
                  &lt;a href="#programming-text"&gt;Programming&lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
                  &lt;a href="#home-text"&gt;Hometown&lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
                  &lt;a href="#swinburne-text"&gt;Swinburne&lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
                  &lt;a href="#achievement-text"&gt;Acheivements&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>Basically, I don't want the webpage to 'scroll through' the nav bar.
  Also, my class hasn't done javascript yet, so if there is a solution not using javascript that would be great.</p>
  
  <p>Thanks guys. </p>
  
  <p>P.S. Here is the code for the div for the about:</p>
  
  <pre><code>&lt;div id="about-text" class="box"&gt;
      &lt;h3&gt;About Me&lt;/h3&gt; 
      &lt;p&gt;My name is   , I'm 18 years old, and a Computer
      Science student at Swinburne University of Technology, Hawthorn.
      I've always been interested in computers, there is something
      beautiful about technology working to do so many things the human
      brain cannot possibly do.&lt;/p&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>and the css:</p>
  
  <pre><code>#about-text, #programming-text, #home-text, #achievement-text
  {
  
      border-style : solid;
      border-width:0.2em;
      opacity:0.5;
      width : 70%;    
      transition: opacity 0.2s;
      -webkit-transition: opacity 0.2s;
  
  }
  </code></pre>