title: Trying to put some text and a button on top of a slideshow from WOWSlider
body: <p>So I have this webpage template that I am trying to replicate for a class at school. A part of the webpage includes a slideshow, which I used WOWSlider to make, and I've got the text on top of the slideshow like I need. But for some reason, the button continues to stay behind the slideshow, even after trying to use z-index to fix it. If I replace the slideshow with an image, then the button will show up. But it doesn't like the slider. Below is my html and css for this section of the page. The commented out section below the slider is the image I was using to text.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/reset.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap-responsive.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="assets/vendor/WOWSlider/engine1/style.css" /&gt;
      &lt;script type="assets/vendor/WOWSlider/text/javascript" src="engine1/jquery.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/practiceStyle.css"&gt;
      &lt;title&gt;Cake Delights&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="row-fluid"&gt;
          &lt;div class="homepageSlideshow"&gt;
  
              &lt;div class="span8 slideshowAd"&gt;
  
                  &lt;!--slideshow--&gt;
                  &lt;div id="wowslider-container1"&gt;
                      &lt;div class="ws_images"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;img src="assets/images/headerCupcakeAd.jpg" alt="50% off pink frosted cupcakes!" id="wows1_0"/&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;img src="assets/images/bannerRainbowCake.jpg" alt="Rainbow cake" title="bannerRainbowCake" id="wows1_1"/&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;img src="assets/images/bannerIceCreamSandwichCake.jpg" alt="Ice Cream Sandwich Cake" id="wows1_2"/&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;img src="assets/images/bannerCookies.jpg" alt="Cookies" id="wows1_3"/&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;img src="assets/images/bannerCakePops.jpg" alt="Cake Pops" id="wows1_4"/&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;span class="wsl"&gt;&lt;a href="http://wowslider.com"&gt;Gallery Script&lt;/a&gt; by WOWSlider.com v4.2&lt;/span&gt;
                      &lt;div class="ws_shadow"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!--End slideshow--&gt;
  
                  &lt;!--img src="assets/images/headerCupcakeAd.jpg" class="span8 slideshowAd"/--&gt;
                  &lt;h3&gt;Wedding Cupcakes&lt;/h3&gt;
                  &lt;span&gt;the newest craze in town&lt;/span&gt;
                  &lt;button class="orderNowHome" type="button"&gt;
                      order now
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="assets/vendor/WOWSlider/engine1/wowslider.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="assets/vendor/WOWSlider/engine1/script.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/retina.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>And the CSS</p>
  
  <pre><code>h3 {
  color: #6f3f52;
  font-size: 2.7em;
  font-family: Arial, Helvetica, sans-serif;
  }
  
  .row-fluid {
  width: 960px;
  margin: 0 auto;
  }
  
  .homepageSlideshow {
  background: #a96580;
  height: 360px;
  }
  
  .span8.slideshowAd h3 {
  background: rgba(255, 255, 255, .5);
  width: 608px;
  height: 80px;
  position: absolute;
  top: 250px;
  padding-left: 15px;
  padding-top: 10px;
  z-index: 100;
  }
  
  .ws_images li{
  overflow:hidden;
  padding-right: -5px;
  }
  
  .span8.slideshowAd span {
  color: #c288a0;
  font-size: 1.9em;
  position: absolute;
  top: 300px;
  margin-left: 20px;
  z-index: 101;
  }
  
  .span8.slideshowAd button {
  float: right;
  margin-right: 50px;
  margin-top: -80px;
  border-radius: 5px;
  color: #64394a;
  font-size: 2em;
  padding: 10px 20px 10px 20px;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
  border: 1px solid #a96580;
  border-radius: 8px;
  z-index: 102;
  
  background: #fcacb5; /* Old browsers */
  background: -moz-linear-gradient(top,  #fcacb5 0%, #fee7ea 76%, #fee7ea 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcacb5), color-stop(76%,#fee7ea), color-stop(100%,#fee7ea)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #fcacb5 0%,#fee7ea 76%,#fee7ea 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #fcacb5 0%,#fee7ea 76%,#fee7ea 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #fcacb5 0%,#fee7ea 76%,#fee7ea 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #fcacb5 0%,#fee7ea 76%,#fee7ea 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcacb5', endColorstr='#fee7ea',GradientType=0 ); /* IE6-9 */
  }
  
  .span8.slideshowAd img {
  float: right;
  margin: 10px;
  width: 646px;
  }
  </code></pre>
  
  <p>And I know that there is extra space to the right of the slideshow. That was because I removed the buttons that were next to the slideshow for simplicity in order to get help. Any help offered is greatly appreciated! Please let me know if anything else is needed...</p>