Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 slider - Absolute positioning inside relative div for responsive slideshow

CSS3 slider - Absolute positioning inside relative div for responsive slideshow

Problem

I am modifying some CSS code that I got from http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/. It is a parallax CSS3 slider.

I have tried nearly everything and my issue is that I can not center the sliding div (da.slide) with a fixed max-width in the browser. The max-width is 970px and will scale down when the browser resizes. I have tried using margin: 0 auto and left:50% and it is still now working - it just hangs to the left.

I think the possible issue is the positioning of the slider div. When I change it from absolute to relative it works for the first slide but the remaining slides disappear/slide underneath each other. Any chance of centering the sliding div?

Here is the CSS3 code:

.da-slider{
    width: 100%;
    min-width: 320px;
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    background: transparent url(../images/waves.png);
    background-repeat:repeat-x;
    -webkit-transition: background-position 1s ease-out 0.3s;
    -moz-transition: background-position 1s ease-out 0.3s;
    -o-transition: background-position 1s ease-out 0.3s;
    -ms-transition: background-position 1s ease-out 0.3s;
    transition: background-position 1s ease-out 0.3s;
}

.da-slide{
    position: absolute;
    max-width: 970px;
    width:100%; 
    height: 100%;
    top: 0px;
    left: 0px;  
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align: left;

}
.da-slide-current{
    z-index: 1000;
}
.da-slider-fb .da-slide{
    left: 100%;
}
.da-slider-fb  .da-slide.da-slide-current{
    left: 0px;
}
.da-slide h2,
.da-slide p,
.da-slide .da-link,
.da-slide .da-img{
    position: absolute;
    opacity: 0;
    left: 110%;
}
.da-slider-fb .da-slide h2,
.da-slider-fb .da-slide p,
.da-slider-fb .da-slide .da-link{
    left: 10%;
    opacity: 1;
}

The HTML is:

Easy management

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Read more
image01

Revolution

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Read more
image01

Warm welcome

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.

Read more
image01

Quality Control

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.

Read more
image01

Any help will be highly appreciated!

Problem courtesy of: Raja

Solution

.da-slide{
    position: relative;
    margin: 0 auto;
    max-width: 970px;  
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align: left;

}

This seemed to work for me. Not sure exactly what your trying to do though.

Absolute positioning takes an element out of the page flow. The top, left, right, bottom attributes refer to its positioning in respect to its parent element. By expanding it to 100% width and 100% height, the element will expand to the size of the container it's in, disabling is ability to be centered.

You should give the element a min-width so the browser knows how large to expand/retract the box. The sizing of these should be given flexible measurement such as percentages. Giving it a width 100% means that the element will expand to the size of the container its in. Max and min allow the element to stop expanding at that set size.

Hope that helps, B

Solution courtesy of: im_benton

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 slider - Absolute positioning inside relative div for responsive slideshow

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×