Printable Version of Topic

Posted by: khobo Aug 14 2017, 09:27 AM

i'm using a javascript slide show and i want text to display underneath.. however the div box is collapsing and making the text underneath go up under the images.. how can i fix this? i've tried float clearing.. defining a specific height but that loses it's responsiveness. also i can't seem to center the slide show either.. it doesn't see how big the image is and puts the leading edge of the image in the center instead of the middle. is this too confusing?

ultimately.. i want a slide show that i can center in the page.. that's responsive and that holds its height so i can put text underneath it


java script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){ $('.fadein img:gt(0)').hide(); setInterval(function(){ $('.fadein :first-child').fadeOut() .next('img').fadeIn() .end().appendTo('.fadein');}, 3250);});

$(function(){ $('.fadein-bottom img:gt(0)').hide(); setInterval(function(){ $('.fadein-bottom :first-child').fadeOut() .next('img').fadeIn() .end().appendTo('.fadein-bottom');}, 3250);});
</script>

css:

.fadein { position:relative; max-width:100%;}
.fadein img {position:absolute; max-width:100%; margin-right:auto; margin-left:auto;}

html:
<div class="fadein">
<img src="zimgs-books/archive/prostatitis/01.jpg" style="max-width:100%;>
<img src="zimgs-books/archive/prostatitis/02.jpg" style="max-width:100%;>
<img src="zimgs-books/archive/prostatitis/03.jpg" style="max-width:100%;>
<img src="zimgs-books/archive/prostatitis/04.jpg" style="max-width:100%;>
</div>

Posted by: Christian J Aug 14 2017, 02:21 PM

That might be because the images are "position: absolute", which prevents them from affecting the page flow.

Posted by: pandy Aug 14 2017, 10:40 PM

Yes.

Not really confusing, but a little thin. We can be of more help if you show us the whole thing. Can you link to a sample page? With the troublesome text in it.