title: Nivo Slider - Position navigation bullets at bottom of slider, rather than underneath
body: <p>I'm making a website and have used Nivo Slider to create a jQuery slider.</p>
  
  <p>I'm having an issue with the bullets used to show which slide the user is viewing. I would like the bullets to appear on the images of the slider, rather than below.</p>
  
  <p>I managed to move the bullets to the location using the following CSS code:</p>
  
  <pre><code>.nivo-controlNav {
      text-align:center;
      padding: 15px 0;
      position: absolute;
      left: 50%;
      margin-left: -50px;
      top: 365px;
      z-index:3000 !important;
  }
  .nivo-controlNav a {
      display:block;
      width:22px;
      height:22px;
      background:url(../images/banner/dots.png) no-repeat;
      text-indent:-9999px;
      border:0;
      margin-right:0px;
      float:left;
  }
  </code></pre>
  
  <p>Here's a screenshot of how they should look:
  <a href="http://i41.tinypic.com/mt59gi.png" rel="nofollow">http://i41.tinypic.com/mt59gi.png</a></p>
  
  <p>But once I resize the browser window, the bullets move off the slider, like this: <a href="http://i40.tinypic.com/2ldtus8.png" rel="nofollow">http://i40.tinypic.com/2ldtus8.png</a></p>
  
  <p>I've changed top: 365px; to a percentage too, but that seemed to produce the same result.</p>
  
  <p>Is there any way to keep the bullets on the slider, even when the browser window is resized? The slider width is 100%, so the slider will also resize with the browser window. Preferably, I'd like to keep it that way, if possible.</p>
  
  <p>Any help is greatly appreciated.</p>
  
  <p><strong>EDIT: I've posted a test version to www.fearless-music.net/test/</strong> </p>