CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Optimus Prime
Optimus Prime

Reputation: 499

Absolute position divs with javascript/css

I got this PSD design I need to code to HTML and it has a slideshow with navigation buttons next and previous in the sides of browser window (left and right), so I guess you could just do CSS position: absolute for both divs, one to left: 0; and other to right: 0; but they would stay in the sides at the top of the browser screen and according to the design they have to be in the middle of the browser's screen vertical height. So what I mean is basically e.g using jsfiddle: http://jsfiddle.net/ZVL8W/ Take these blocks: enter image description here

And position them like this: enter image description here

So I was wondering there would be probably javascript included since those divs would be inside some deep div structure that has set width, so the slideshow control divs would somehow need to be able to move out from the set width of parent containers.

Upvotes: 0

Views: 122

Answers (2)

Amin Jafari
Amin Jafari

Reputation: 7207

you can do it all by CSS: http://jsfiddle.net/ZVL8W/7/

.left-box {
    width: 100px;
    height: 100px;
    background-color: red;
    display: block;
    position:absolute;
    top:50%;
    margin-top:-50px;
    left:0;
}
.right-box {
    width: 100px;
    height: 100px;
    background-color: blue;
    display: block;
    position:absolute;
    left:100%;
    margin-left:-100px;
    top:50%;
    margin-top:-50px;
}

Upvotes: 2

Yannick Y
Yannick Y

Reputation: 2846

Check this out: http://jsfiddle.net/ZVL8W/3/
This has equal height no matter what the screen size is.

 .left-box {
        width: 100px;
        height: 100px;
        background-color: red;
        display: block;
        position:absolute;
        top:50%;
        left:0px;
        margin-top:-50px;
    }
    .right-box {
        width: 100px;
        height: 100px;
        background-color: blue;
        display: block;
        position:absolute;
        top:50%;
        right:0px;
        margin-top:-50px;
    }

Upvotes: 6

Related Questions