title: Trying to place bullets of the nivo slider on the image
body: <p>I'm working on a Nivo Slider for my website, and I'm facing a problem with the bullets of the slider. I want them on the images of the slider. Now they are on my menu.
  Like this:
  <img src="https://i.stack.imgur.com/NRmWg.jpg" alt="enter image description here"></p>
  
  <p>This is the nivo-slider.css file:</p>
  
  <pre><code>/*
   * jQuery Nivo Slider v3.2
   * http://nivo.dev7studios.com
   *
   * Copyright 2012, Dev7studios
   * Free to use and abuse under the MIT license.
   * http://www.opensource.org/licenses/mit-license.php
   */
  
  /* The Nivo Slider styles */
  .nivoSlider {
      position:relative;
      width:100%;
      height:auto;
      overflow: hidden;
  }
  .nivoSlider img {
      position:absolute;
      top:0px;
      left:0px;
      max-width: none;
  }
  .nivo-main-image {
      display: block !important;
      position: relative !important; 
      width: 100% !important;
  }
  
  /* If an image is wrapped in a link */
  .nivoSlider a.nivo-imageLink {
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
      border:0;
      padding:0;
      margin:0;
      z-index:6;
      display:none;
      background:white; 
      filter:alpha(opacity=0); 
      opacity:0;
  }
  /* The slices and boxes in the Slider */
  .nivo-slice {
      display:block;
      position:absolute;
      z-index:5;
      height:100%;
      top:0;
  }
  .nivo-box {
      display:block;
      position:absolute;
      z-index:5;
      overflow:hidden;
  }
  .nivo-box img { display:block; }
  
  /* Caption styles */
  .nivo-caption {
      position:absolute;
      left:0px;
      bottom:0px;
      background:#000;
      color:#fff;
      width:100%;
      z-index:8;
      padding: 5px 10px;
      opacity: 0.8;
      overflow: hidden;
      display: none;
      -moz-opacity: 0.8;
      filter:alpha(opacity=8);
      -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
      -moz-box-sizing: border-box;    /* Firefox, other Gecko */
      box-sizing: border-box;         /* Opera/IE 8+ */
  }
  .nivo-caption p {
      padding:5px;
      margin:0;
  }
  .nivo-caption a {
      display:inline !important;
  }
  .nivo-html-caption {
      display:none;
  }
  /* Direction nav styles (e.g. Next &amp; Prev) */
  .nivo-directionNav a {
      position:absolute;
      top:45%;
      z-index:9;
      cursor:pointer;
  }
  .nivo-prevNav {
      left:0px;
  }
  .nivo-nextNav {
      right:0px;
  }
  /* Control nav styles (e.g. 1,2,3...) */
  .nivo-controlNav {
      text-align:center;
      padding: 15px 0;
  }
  
  .nivo-controlNav a {
      position: relative;
      z-index:1000;
      cursor:pointer;
  }
  
  .nivo-controlNav a.active {
      font-weight:bold;
  }
  </code></pre>
  
  <p>And this is default.css</p>
  
  <pre><code>/*
  Skin Name: Nivo Slider Default Theme
  Skin URI: http://nivo.dev7studios.com
  Description: The default skin for the Nivo Slider.
  Version: 1.3
  Author: Gilbert Pellegrom
  Author URI: http://dev7studios.com
  Supports Thumbs: true
  */
  
  .theme-default .nivoSlider {
      position:relative;
      background:#fff url(images/loading.gif) no-repeat 50% 50%;
      margin-bottom:10px;
      /*-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
      -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
      box-shadow: 0px 1px 5px 0px #4a4a4a;*/
  }
  .theme-default .nivoSlider img {
      position:absolute;
      top:0px;
      left:0px;
      display:none;
  }
  .theme-default .nivoSlider a {
      border:0;
      display:block;
  }
  
  .theme-default .nivo-controlNav {
      text-align: center;
      padding: 20px 0;
  }
  .theme-default .nivo-controlNav a {
      display:inline-block;
      width:22px;
      height:22px;
      background:url(images/bullets.png) no-repeat;
      text-indent:-9999px;
      border:0;
      margin: 0;
  }
  .theme-default .nivo-controlNav a.active {
      background-position:0 -22px;
  }
  
  .theme-default .nivo-directionNav a {
      display:block;
      width:30px;
      height:30px;
      background:url(images/arrows.png) no-repeat;
      text-indent:-9999px;
      border:0;
      opacity: 0;
      -webkit-transition: all 200ms ease-in-out;
      -moz-transition: all 200ms ease-in-out;
      -o-transition: all 200ms ease-in-out;
      transition: all 200ms ease-in-out;
  }
  .theme-default:hover .nivo-directionNav a { opacity: 1; }
  .theme-default a.nivo-nextNav {
      background-position:-30px 0;
      right:15px;
  }
  .theme-default a.nivo-prevNav {
      left:15px;
  }
  
  .theme-default .nivo-caption {
      font-family: Helvetica, Arial, sans-serif;
  }
  .theme-default .nivo-caption a {
      color:#fff;
      border-bottom:1px dotted #fff;
  }
  .theme-default .nivo-caption a:hover {
      color:#fff;
  }
  
  .theme-default .nivo-controlNav.nivo-thumbs-enabled {
      width: 100%;
  }
  .theme-default .nivo-controlNav.nivo-thumbs-enabled a {
      width: auto;
      height: auto;
      background: none;
      margin-bottom: 5px;
  }
  .theme-default .nivo-controlNav.nivo-thumbs-enabled img {
      display: block;
      width: 120px;
      height: auto;
  }
  </code></pre>
  
  <p>I'd really appreciate your help.</p>
  
  <p>Thanks in advance.</p>