mardi 22 mars 2016

slider carousel - place text under img not on top

I just purchased Master Slider - and I'm trying to place text UNDERNEATH the images of each slide - however the paragraphs keep appearing above the image.

Any ideas?

I've tried floating, clearing, and inspecting all the elements + randomly deactivating them all to try figure out why this order is being reversed.

enter image description here

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />

  <title>Master Slider Filters Template</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <!-- Base MasterSlider style sheet -->
  <link rel="stylesheet" href="http://ift.tt/1S4rlsH" />

  <!-- Master Slider Skin -->
  <link href="http://ift.tt/1VBHXxn" rel='stylesheet' type='text/css'>

  <!-- jQuery -->
  <script src="http://ift.tt/1S4rlsJ"></script>
  <script src="http://ift.tt/1VBHXxr"></script>

  <!-- Master Slider -->
  <script src="http://ift.tt/1S4rlsL"></script>
  <style>
    <style> .words {
      text-align: center;
    }
  </style>


</head>

<body>
  <!-- template -->
  <div class="ms-filters-template">
    <!-- masterslider -->
    <div class="master-slider ms-skin-default" id="masterslider">
      <div class="ms-slide">


        <img src="http://ift.tt/1VBHZW8" alt="lorem ipsum dolor sit" />
        <p class="words">View All Articles DIY: How to Make a Dreamcatcher There’s something so effortlessly chic about a DIY dreamcatcher! From their flowing feathers to their ethereal origins, dreamcatchers have a free-spirit that encourages us to embrace our dreamy
          inclinations. Want to create your own? Explore your bohemian side with this step-by-step DIY Dreamcatcher guide! More
        </p>


      </div>

      <div class="ms-slide">

        <img src="http://ift.tt/1S4rlsP" alt="lorem ipsum dolor sit" />
      </div>
      <div class="ms-slide">
        <img src="http://ift.tt/1VBHXxt" alt="lorem ipsum dolor sit" />
      </div>
      <div class="ms-slide">
        <img src="http://ift.tt/1S4rnAJ" data-src="img/4.jpg" alt="lorem ipsum dolor sit" />
      </div>
      <div class="ms-slide">
        <img src="http://ift.tt/1S4rnAJ" data-src="img/5.jpg" alt="lorem ipsum dolor sit" />
      </div>
      <div class="ms-slide">
        <img src="http://ift.tt/1S4rnAJ" data-src="img/6.jpg" alt="lorem ipsum dolor sit" />
      </div>
      <div class="ms-slide">
        <img src="http://ift.tt/1S4rnAJ" data-src="img/7.jpg" alt="lorem ipsum dolor sit" />
      </div>
    </div>
    <!-- end of masterslider -->
  </div>
  <!-- end of template -->

</body>

<script type="text/javascript">
  var slider = new MasterSlider();

  slider.control('arrows');
  slider.control('bullets', {
    autohide: false,
    align: 'bottom',
    margin: 10
  });

  slider.setup('masterslider', {
    width: 750,
    height: 430,
    layout: 'partialview',
    space: 5,
    view: 'basic',
    loop: true,
    filters: {
      grayscale: 1,
      contrast: 1.5
    }
  });
</script>

</html>


slider carousel - place text under img not on top

Aucun commentaire:

Enregistrer un commentaire