CODEWITHSUNDEEP
htmlcss
Jithin Varghese
Jithin Varghese

Reputation: 2228

placing a div below another div containing slider

I have two div's, first div contains slider images and test and second one contains only text. Now i want to place the second div below first div.

I have tried but the second div is placed at the top of first div.

Here is my code,

<div class="slider">
    <div class="slider_below">
        <img src="assets/img/slider/slider1.jpg" alt="Slider 1" title="Slider 1" id="slider1" />
        <div class="text" id="text1" align="center">
            <h1>Clearence Sale</h1>
            <h1>Get upto 50% Off</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>

        <img src="assets/img/slider/slider2.jpg" alt="Slider 2" title="Slider 1" id="slider2" style="display:none" />
        <div class="text" id="text2" align="center" style="display:none">
            <h1>Clearence Sale</h1>
            <h1>Get upto 51% Off</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
    </div>
</div>
<div class="before_footer">
    fhfg
</div>

/* Slider */
.slider {
    width:100%;
    height:auto;
    overflow:hidden;
}
.slider .slider_below {
    list-style-type:none;
}
.slider .slider_below img {
    width:100%;
}
.slider .slider_below .text {
    width: 100%;
    left: 0;
    position:absolute;
    top: 50%;
    font-size:20px;
}

/* Before footer */
.before_footer {
    width:100%;
    height:auto;
    background:#fb725f;
    z-index:1;
    position:absolute;
}

Current result,

Current result

Required result,

Required result

Upvotes: 0

Views: 71

Answers (1)

Renuka CE
Renuka CE

Reputation: 686

Image path you have given is not correct. please provide the proper image path you will get the desired output

Here i have tried in my local its giving desired output.

    <html>
    <head>
       <style type="text/css">
    /* Slider */
     .slider {
        width:100%;
        height:auto;
        overflow:hidden;
    }
    .slider .slider_below {
        list-style-type:none;
    }
    .slider .slider_below img {
        width:100%;
    }
    .slider .slider_below .text {
        width: 100%;
        left: 0;
        position:absolute;
        top: 20%;
        font-size:20px;
    }

    /* Before footer */
    .before_footer {
        width:100%;
        height:auto;
        background:#fb725f;
        z-index:1;
        position:absolute;
    }
   </style>
   </head>
   <body>
      <div class="slider">
        <div class="slider_below">
            <img src="http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/sea-gull-100219122.jpg" alt="Kartshopy Slider 1" title="kartshopy Slider 1" id="slider1" />
           <div class="text" id="text1" align="center">
              <h1>Clearence Sale</h1>
              <h1>Get upto 50% Off</h1>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          </div>
       </div>
       <div class="before_footer">
           fhfg
      </div>
     </div>
   </body>
   </html>

Upvotes: 2

Related Questions