Position content after absolute positioned divs
I have an relative
positioned div that contains three more absolute
positioned divs that I use as a slider. Each of the three placed divs absolute
contains an image with a width:100%
.
The problem is that when I want to position content under my slider, the content overlaps with slide r (because the divs are absolutized and I don't know the actual height - it changes because the image width is 100%).
How to place a position under the slider?
I am currently using a javascript function that fetches the height of an image and adds that height as a complement to the content at the bottom, but I would rather use pure css.
Is it possible? (I would rather NOT use media queries for this because there would be no permissions to take care of).
Here is the code: (for a live example, check this fiddle: https://jsfiddle.net/g6ppqxLf/5/ )
HTML:
<div id="slideshow" class="latime_100">
<img src="poze/sageata_st.png" class="navigare" id="navigare_st" onclick="go_prev();"></img>
<div id="slider_1" class="slider" >
<img src="http://www.freestockphotos.name/wallpaper-original/wallpapers/download-images-of-gentle-dogs-6866.jpg"></img>
</div>
<div id="slider_2" class="slider">
<img src="http://3.bp.blogspot.com/-rZmCIp0C-hQ/Tx6aCFeweoI/AAAAAAAAAnQ/WqIEVBTIzRk/s1600/Cool-Tiger-Wallpaper-1920x1080-HD.jpg"></img>
</div>
<div id="slider_3" class="slider">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwazmPOPcUTK1AmVSPQjH7YLlBywxTpkQi4LEQ40HJOg6_8Qyw"></img>
</div>
<img src="poze/sageata_dr.png" class="navigare" id="navigare_dr" onclick="go_next();"></img>
</div>
CSS (navigare_st and navigare_dr are slider arrows) :
.slider{
width:100%;
position:absolute;
}
.slider img{
display: block;
margin: 0 auto;
width:100%;
min-width: 1024px;
}
#slideshow{
position: relative;
background-color: white;
z-index:100;
}
#navigare_st{
position: absolute;
z-index:1000;
left:0px;
top:45%;
cursor: pointer;
width:2.5%;
}
#navigare_dr {
z-index: 1000;
position: absolute;
right: 0px;
top: 45%;
cursor: pointer;
width:2.5%;
}
source to share
I don't quite understand what the problem is.
But here's my attempt at adding extra content to the bottom of the images without overlapping.
(ignore javascript just for demo)
var curslide = 0;
var elements;
$(document).ready(function() {
elements = $('.slider');
elements.hide();
elements.first().show();
$('#navigare_st').click(function() {
if (curslide > 0) {
curslide--;
elements.hide();
elements.eq(curslide).show();
}
});
$('#navigare_dr').click(function() {
if (curslide < elements.length) {
curslide++;
elements.hide();
elements.eq(curslide).show();
}
});
});
.slider {
width: 100%;
//position: absolute;
}
.slider img {
display: block;
margin: 0 auto;
width: 100%;
min-width: 100px;
}
#slideshow {
position: relative;
background-color: white;
z-index: 100;
}
#navigare_st {
position: absolute;
width: 50px;
height: 50px;
z-index: 1000;
left: 0px;
top: 45%;
cursor: pointer;
border-radius: 50%;
background-color: white;
}
#navigare_dr {
z-index: 1000;
width: 50px;
height: 50px;
position: absolute;
transform: rotate(180deg);
right: 0px;
top: 45%;
cursor: pointer;
border-radius: 50%;
background-color: white;
}
.extra {
width: 100%;
height: 50px;
top: 100%;
background-color: firebrick;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
line-height: 24px;
text-indent: 5px;
font-size: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow" class="latime_100">
<img src="https://cdn4.iconfinder.com/data/icons/miu/22/circle_back_arrow-128.png" class="navigare" id="navigare_st" />
<div id="slider_1" class="slider">
<img src="http://lorempixel.com/400/200/" />
</div>
<div id="slider_2" class="slider">
<img src="http://lorempixel.com/400/200/sports" />
</div>
<div id="slider_3" class="slider">
<img src="http://lorempixel.com/400/200/food" />
</div>
<img src="https://cdn4.iconfinder.com/data/icons/miu/22/circle_back_arrow-128.png" class="navigare" id="navigare_dr" />
<div class="extra">
Here comes the extra content?
</div>
</div>
source to share
You shouldn't use it position: absolute
for this task. What for? Because usage position: absolute
removes elements from the document flow so browsers think they don't take up space on the page.
Use float:left
or instead float:right
. It will accomplish the same task, but make the parent div grow to fit the content.
Same:
.slider {
width:100%;
float: left;
}
I have an updated version of your jfiddle that shows it in action: https://jsfiddle.net/udfjm089/3/
To be frank with you, though, unless it's essential to your layout, I wouldn't recommend it. Setting a fixed height for the wrapper div s overflow: hidden
will look much nicer and won't bounce your page content.
source to share
It is not good practice to create an element on a page with dynamic height. Either try to keep your images the same height, or give the slideshow container the height of the "tallest" image.
Typically, fade float: left;
slideshows are used for slides and then clear:both
after the last slide.
But if you insist on keeping this configuration and want to quickly fix the error, this code will do the trick:
$('#slideshow').css('height', $('#slider_'+i+' img').height());
Copy it inside your slider_init and go_slide functions.
Cordially
source to share