CODEWITHSUNDEEP
javascripthtmlcss
anuseranother
anuseranother

Reputation: 277

Position: absolute making the image take the whole page

I got a slider banner, it works perfectly, but i need to put an posiiton:absolute to put one div above another, and when i do it, it just ignore the width and height i designed for the img, and make the img occupate the whole screen. Could someone help me ?

HTML:

<div class="row">
<div class="eight columns all">
    <img src="img/slide_1.jpg" class="hide" id="img-slide">
    <img src="img/slide_2.jpg" class="hide" id="img-slide">
    <img src="img/slide_3.jpg" class="hide" id="img-slide">
    <!--<p>>></p> -->
</div>

CSS:

.all img{
    margin:15px;
    height: 95%;
    width:95%;
    border-radius:5px;
    position:absolute;
}

    .all img.show{
        opacity:1;
        left: 0px;
        -webkit-transition:all 1.0s ease-in-out;
        -moz-transition:all 1.0s ease-in-out;
        -o-transition:all 1.0s ease-in-out;
        transition:all 1.0s ease-in-out;

    }

    .all img.hide{
        left: -1000px;
        opacity: 0;
        -webkit-transition:all 1.0s ease-in-out;
        -moz-transition:all 1.0s ease-in-out;
        -o-transition:all 1.0s ease-in-out;
        transition:all 1.0s ease-in-out;
    }

And the JS:

function loop() {
    var listPict = document.getElementsByClassName('all')[0].children;

    var old = listPict.length - 1;

    var current = 0;

    listPict[current].setAttribute('class', 'show');

    listPict[old].setAttribute('class', 'hide');

    old = current;
    current++;

    if (current === listPict.length)
        current = 0;

    setTimeout(loop, 3000);
}

Upvotes: 0

Views: 71

Answers (1)

Paul S.
Paul S.

Reputation: 66334

In absolute positioning, the percentages for the height and width will reflect the size of the offsetParent, which in your case is probably <body>. This means e.g. width: 95%; is 95% of the width of the page.

You will either need to define the sizes in pixels or give some ancestor node, e.g. div.all, relative positioning to make this into the offsetParent, so that the sizes are bound to that instead of <body>

div.all {
    position: relative;
}

Upvotes: 1

Related Questions