is it possible to clear ap elements?
I know they are removed from the document flow, but so are floats and they can be cleared.
I have this markup, I added some class names to make more clear what I’m doing.
<div id="slides">
<div id='slidewrap'>
<div class='slide'>
<img>
<p>text</p>
</div>
<div class='slide'>
<img>
<p>text</p>
</div>
</div>
<h2>Dependable Lawn Maintenance <span>And Outdoor Services</span></h2>
</div>
<div id="theNextDiv"></div>
#slides is wrapping #slidewrap and h2 because they will be side by side.
#slidewrap is floated left, the the .slide div’s inside of that are absolutly positioned because they are a slideshow so I need them to sit on top of each other.
so because the floated div, contains ap elements, that are removed from the document flow, #theNextDiv goes up behind #slides.
So how can I clear a floated element that contains ap elements?
HI,
You can’t clear absolute elements because as you rightly mention they are removed from the flow. However if the absolute elements inside your floated #slidewrap are all the same height then just give the same height to #slidewrap and the space in the flow will be reserved.
If the absolute elements are all varying height then you are stuck unless you know the height of the largest element and just set #slidewrap to that height. If you don’t know any of the heights of the absolute elements then you can’t compensate for them I’m afraid.
they are the same height. the images are 384px height. But, they are fluid images in a responsive design. So initially the height of #slidewrap will be 384, can i make the height change with a shrinking image inside of it?
You could place one real image in the html as a placeholder and and set it to visibility:hidden and it will hold the float open. Then just place your other images on top.
Do you have a live example we can look at and test?
I’ll put it up now, should be up within the hour
I’m redesigning an existing site, so this is just a piece of the code, it’s a bit messy, I’ve edited many times trying to get it right. The slides do not rotate, but you’ll see #tagline slid up behind the 1 large image.
I’m trying to keep #tagline under the image.
http://phpby.me/test/index.html
Hi,
I was thinking of something like this.
<div id="slides">
[B]<img class="placeholder" src="http://phpby.me/test/img/lawn.jpg" alt="Lawn Maintenance" height="384" width="682">[/B]
<div>
<div> <!-- image dimensions were 682 x 384 -->
<img src="http://phpby.me/test/img/lawn.jpg" alt="Lawn Maintenance" height="" width="">
<p><span>Lawn Maintenance</span></p>
</div>
<div> <img src="http://phpby.me/test/img/lawn2.jpg" alt="Lawn Maintenance" height="" width="">
<p><span>Lawn Maintenance</span></p>
</div>
<div> <img src="http://phpby.me/test/img/mulch.jpg" alt="Mulching" height="" width="">
<p><span>Mulching</span></p>
</div>
<div> <img src="http://phpby.me/test/img/mulch2.jpg" alt="Mulching" height="" width="">
<p><span>Mulching</span></p>
</div>
<div> <img src="http://phpby.me/test/img/hedge.jpg" alt="Hedge Trimming" height="" width="">
<p><span>Hedge Trimming</span></p>
</div>
<div> <img src="http://phpby.me/test/img/hedge2.jpg" alt="Hedge Trimming" height="" width="">
<p><span>Hedge Trimming</span></p>
</div>
<div> <img src="http://phpby.me/test/img/fall_cleanup.jpg" alt="Fall Clean Ups" height="" width="">
<p><span>Fall Clean Ups</span></p>
</div>
<div> <img src="http://phpby.me/test/img/snow.jpg" alt="Residential Snow Removal" height="" width="">
<p><span>Residential Snow Removal</span></p>
</div>
<div> <img src="http://phpby.me/test/img/tree.jpg" alt="Small Tree Removal" height="" width="">
<p><span>Small Tree Removal</span></p>
</div>
</div>
#slides .placeholder{
max-width: 72.5532%;
height:auto;
visibility:hidden;
position:relative;
z-index:-1;
}
thanks for looking at it. it does work! but how?
also, the h2 is now misbehaving. the h2, was next to the image, but now it’s pushed below. can you tell me why?
http://phpby.me/test/index.html
oh wait, i think i know.
because it’s not absolutly positioned, it simply flows with the document?
Hi,
The h2 is dropping because there’s not really enough room for it as the screen gets smaller with the widths and margins that you have set. If you remove the margin-right it should stay put and indeed look better.
#slides h2 {
margin-right:0;
}
You can’t really mix percentage widths and px margins and still expect them to match up to 100%. It as half working before because the heading was riding over the absolute images.
it does work! but how?
The placeholder image holds the space open where you are absolutely placing your other images. Because its an image it scales at the same rate that your other images do and hence keeps the page intact. Your slideshow images are in effect just sitting on top of this normal flow image.
(You could probably have done this without a placeholder image and just swap the images with js as required. They don’t really need to be absolutely placed if you are going to hide all except one at a time.)
correct about the H2. can’t believe I missed that.
good call about the slideshow. I didn’t even think about changing the slideshow js so the ap images would not be an issue.
thanks!