title: CSS Jquery Easy Slider 1.7 plugin
body: <p>Been trying to get  the Jquery plugin Easy Slider 1.7 working. been messing about with it and got the content area the way i want it but the buttons for next/prev are floating at top of page.</p>
  
  <p>Heres the code: HTML Slider </p>
  
  <pre><code>&lt;div id="slider_container"&gt;
                  &lt;div  id="slider"&gt;
                      &lt;ul&gt;                
                          &lt;li&gt;
                              &lt;h4&gt;Google Adwords&lt;/h4&gt;
                              &lt;p&gt;Lorem ipsum dolar sit ami....&lt;/p&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;h4&gt;Domain Name&lt;/h4&gt;
                              &lt;p&gt;Lorem ipsum dolar sit ami....&lt;/p&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){   
      $("#slider").easySlider({
          auto: true,
          continuous: true,
          prevId: 'prevBtn',
          prevText: 'Previous',
          nextId: 'nextBtn',  
          nextText: 'Next' 
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> #slider_container{
          width: 450px;
          height: 210px;
          margin: 10px auto;
          background: url(../img/sliderweb_bg.png) no-repeat;
      }
  
          #slider ul, #slider li,
          #slider2 ul, #slider2 li{
              margin:0;
              padding:0;
              list-style:none;
              }
          #slider2{margin-top:1em;}
  
          #slider li, #slider2 li{ 
              /* 
                  define width and height of list item (slide)
                  entire slider area will adjust according to the parameters provided here
              */ 
              width:524px;
              height:200px;
              overflow:hidden; 
  
              }   
          #prevBtn, #nextBtn,
          #slider1next, #slider1prev{ 
              display:block;
              width:77px;
              height:69px;
              position:absolute;
              left:-30px;
              top:71px;
              z-index:1000;
              }   
          #nextBtn, #slider1next{ 
              left:696px;
              }                                                       
          #prevBtn a, #nextBtn a,
          #slider1next a, #slider1prev a{  
              display:block;
              position:relative;
              width:77px;
              height:69px;
              background:url(../img/sliderweb_left.png) no-repeat 0 0;    
              }   
          #nextBtn a, #slider1next a{ 
              background:url(../img/sliderweb_right.png) no-repeat 0 0;   
              }   
  
          /* numeric controls */  
  
          ol#controls{
              margin:1em 0;
              padding:0;
              height:28px;    
              }
          ol#controls li{
              margin:0 10px 0 0; 
              padding:0;
              float:left;
              list-style:none;
              height:28px;
              line-height:28px;
              }
          ol#controls li a{
              float:left;
              height:28px;
              line-height:28px;
              border:1px solid #ccc;
              background:#DAF3F8;
              color:#555;
              padding:0 10px;
              text-decoration:none;
              }
          ol#controls li.current a{
              background:#5DC9E1;
              color:#fff;
              }
          ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
  </code></pre>
  
  <p>Hope I can get this sorted want this to work :) </p>
  
  <p>Speak soon and thanks in advance :) 
  Joe<br>
          /* // Easy Slider */</p>