title: Resizing Slidder using css
body: <p>I want to keep the size of my images in my slider but i would also like to reduce the large space between my slider and my menu bar. This is being a real tool and i would appreciate it if someone guided me in the right direction. My slider leaves a huge gap between itself and the menu bar. Do i resize the image in photoshop and then place it in the slider or is there any other way around this?</p>
  
  <p>Here is a <a href="http://jsbin.com/cuvumoreze/1/edit?html,css,output" rel="nofollow">Demo</a></p>
  
  <p>Here is my css </p>
  
  <pre><code>  div#slider { 
    overflow: hidden;
    min-height: 100px;
    line-height: 100px;
     margin: 25px auto -52px;
  
     }
          div#slider figure img { 
          width: 20%; 
          float: left;
          margin: 25px auto -52px; 
           }
    `            
          @-webkit-keyframes slidy {
          0% { left: 0%; }
          20% { left: 0%; }
          25% { left: -100%; }
          45% { left: -100%; }
          50% { left: -200%; }
          70% { left: -200%; }
          75% { left: -300%; }
          95% { left: -300%; }
          100% { left: -200%; }
           }
  
  
  
  
     div#slider figure { 
     position: relative; 
     width: 500%;
     margin: 0;
     top: 0;
     left: 0;
    -webkit-animation: 30s slidy ease-in-out infinite;
     animation: 30s slidy ease-in-out infinite;   
     margin: 25px auto -52px;
     }`div#slider figure { 
     position: relative; 
     width: 500%;
     margin: 0;
     top: 0;
     left: 0;
    -webkit-animation: 30s slidy ease-in-out infinite;
    animation: 30s slidy ease-in-out infinite; 
    margin: 25px auto -52px;
     }
  
  
  #header {
    margin-right: 10px;
    margin-left: 10px;
    width: 940px;
  }
  #navigation {
    padding-bottom: 25px;
    margin-top: 26px;
    margin-left: -1.0416667%; 
    padding-right: 1.0416667%; 
    padding-left: 1.0416667%; 
    width: 97.9166667%; 
    background-repeat: repeat-x;
    border-bottom-color: #bfbfbf;
    border-bottom-style: double; border-bottom-width: 4px;
  }
  #navigation ul li {
    display: inline-block;
  }
  #navigation ul li a {
    height: 42px;
    line-height: 42px;
    margin-right: 15px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Arial, "Lucida Grande", Verdana, sans-serif;
    font-size: 15px;
    color: black;
  }
  </code></pre>
  
  <p>and my HTML:</p>
  
  <pre><code>&lt;div id="slider"&gt;
      &lt;figure&gt;
          &lt;img src="images/reciepescover.jpg" alt=""&gt;
          &lt;img src="images/history_chocolate.jpg" alt=""&gt; 
          &lt;img src="images/cocoa.jpg" alt=""&gt;
          &lt;img src="images/lays.jpg" alt=""&gt;
          &lt;img src="images/cocoa.jpg" alt=""&gt;
      &lt;/figure&gt;
  &lt;/div&gt;
  &lt;center&gt;
      &lt;div id="header"&gt;
          &lt;div id="navigation"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="pages/history.html"&gt;History&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="pages/producers.html"&gt;Producers&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="pages/companies.html"&gt;Companies&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="pages/reciepes.html"&gt;Reciepes &lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>