title: JavaScript slide, text disappear and center fix
body: <p>I have a few problems with my code:
  HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;script class="jsbin" src="js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;link href="css/stylesheet.css" rel="stylesheet" type="text/css" /&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;title&gt;Bellevue&lt;/title&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="gallery"&gt;
              &lt;center&gt;
              &lt;div id="slider"&gt;
                &lt;img src="images/1.jpg"&gt;
                &lt;img src="images/2.jpg"&gt;
                &lt;img src="images/1.jpg"&gt;
              &lt;/div&gt;
              &lt;/center&gt;
              &lt;div id="nav"&gt;
              &lt;ul&gt;
                &lt;li class="active"&gt;Go to slide 1&lt;/li&gt;
                &lt;li&gt;Go to slide 2&lt;/li&gt;
                &lt;li&gt;Go to slide 3&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;div id="info"&gt;
                &lt;div class="info"&gt;&lt;h3&gt;Info panel 1&lt;/h3&gt;&lt;/div&gt;
                &lt;div class="info"&gt;&lt;h3&gt;Info panel 2&lt;/h3&gt;&lt;/div&gt;
                &lt;div class="info"&gt;&lt;h3&gt;Info panel 3&lt;/h3&gt;&lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="lengte"&gt;&lt;/div&gt;
      &lt;script&gt;
      var imgN = "95%";
      var galW = $('#gallery').outerWidth(true);
      var galL = $('#lengte').outerWidth(true);
  
      $('#slider, #info').width(galW*imgN);
  
      $('#nav li').click(function(){
        var ind = $(this).index();
        $('#slider').stop(1).animate({top: '-'+galL*ind },1500);
        $('#info').stop(1).animate({left: '-'+galW*ind },1500);
        $(this).addClass('active').siblings('li').removeClass('active');
      });
      &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  *{
      margin:0px;
  }
  
    body{
      font-family:Arial, Verdana, Helvetica, sans-serif;
      background-color: #FFF;
      margin:0px;
      padding:0px;
    }
  
  #container{
      margin-left:5%;
      margin-right:5%;
  }
  
  /*slider*/
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; }
  
  
    #gallery{
      width:100%;
      height:490px;
      position:relative;
      margin:20px auto;
      background:#eee;
      overflow:hidden;
    }
    #slider{
        width:680px;
        margin-left:auto;
        margin-right:auto;
        position:absolute;
    }
    #slider img{
      position:relative;
      float:left;
    }
    #lengte{
        width:350px;
    }
    #nav{
      width:100%;
      z-index:2;
      position:absolute;
      top:305px;
      text-align:center;
    }
    #nav li{
      cursor:pointer;
      display:inline;
      background:#ddd;
      padding:10px;
      margin:1px;
      border-bottom:1px solid #999;
      -moz-border-radius-topleft: 6px;
      -moz-border-radius-topright: 6px;
      -moz-border-radius-bottomright: 0px;
      -moz-border-radius-bottomleft: 0px;
      -webkit-border-radius: 6px 6px 0px 0px;
      border-radius: 6px 6px 0px 0px; 
    }
    #nav li.active{
      background:#eee;
      border-bottom:1px solid #eee;
    }
  
    #info{
      position:absolute;
      top:350px;
      height:140px;
      width:100%;
      background:#eee;
    }
  
    div.info{
      position:relative;
      float:left;
      padding:10px 25px;
      height:120px;
      width:100%;
    }
  </code></pre>
  
  <p>Problems:</p>
  
  <ol>
  <li>The images slide nicely up and down, but they are not centred</li>
  <li>The text disappears have slide form right to left, but i can't them. I see the next picture</li>
  <li>The whole page isn't at top. You see some white space on top</li>
  </ol>
  
  <p>Can someone help me with (one of these) problems?</p>
  
  <p>Links:
  <a href="http://jsfiddle.net/FYgE5/" rel="nofollow">http://jsfiddle.net/FYgE5/</a>
  <a href="http://www.wouterschaeffer.nl/bellevue/poging3" rel="nofollow">http://www.wouterschaeffer.nl/bellevue/poging3</a></p>