Forum Moderators: not2easy
[edited by: tedster at 7:48 pm (utc) on May 29, 2010]
[edit reason] removed personal URL [/edit]
How do I make this absolute so it 'floats' above everything but also relative to the parent div that triggers itVery easily ;) The trouble isn't getting the effect, as you have discovered, the challenge is to deal with the flow-on isues when asking the browser to do something very complicated ;)
The problem is that the parent div then magically becomes the same height as the the popup div. This will not change no matter how many different 'height:20px;' or 'max-height:20px;' I add or where I add them.No, height is unlikely to be a solution.
Tried to search for those posts you said but no results or too many unrelated results
.box1' magically becomes 270px high as well as the popup box appearing centered and 350px above the #box1 div. I have tried to fix the parent .footer to a height of 15px but no luck. max-height is no help either..box1 is probably stretching to contain the inner div that you have directed to expand on :hover, although only a guess as I don't have the css for it.
I put html { overflow-y: scroll; } in my css document to overcome the whole 'popping' left that has been occuring.Good thinking ;} However, that would stop scrolling for documents that extend beyond the "fold", and as you figured, doesn't get rid of the source of the trouble - which is the height of the contents (h3 and p) of the div. That height (and width) has to be addressed explicitly: in this code diplay:none does it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Title</title>
<style type="text/css">
/*for the example*/
body { text-align:center;}
.footer {
background:url(images/disc_bg.gif) repeat-y;
position:relative;
/*height and width must be large enough to contain the trigger text - for the example;*/
/*height:15px;*/
height:30px;
width:80px;
/*left:350px; not require if you only need to centre the footer*/
font-family:Arial,Helvetica,sans-serif;
padding:0;
margin:0 auto;
text-align:left;
/* for the example*/
top:800px; /*duplicates page with content below the fold */
}
/*redundant
#box1 div {
... styles..
}
*/
/* hide the contents - and this is the key to losing the "white-space"/jump */
#box1 div * {
display:none;
}
/* now display on :hover (adjust top/left to suit) */
#box1:hover div {
display:block;
width:670px;
height:270px;
padding:15px;
border: 5px solid #000;
top:-400px;
left:-335px;
position:absolute;
}
/*also tell the contents to display and to position themselves according to the normal flow inside the div */
#box1:hover div * {
display:block;
position:relative;
}
/*create the "hover box", and draw the h2 inside the footer "box" * Note size is the same as the footer - amend to taste */
h2 {
margin:0;
height:30px;
width:80px;
}
</style>
</head>
<body>
<div class="footer">
<div id='box1'>
<h2>Disclaimer</h2>
<div>
<h3>POPUP TEXT</h3>
<p>My text</p>
</div>
</div> <!--box1-->
</div> <!--footer-->
</body>
</html>
[edited by: tedster at 7:52 pm (utc) on May 29, 2010]
... try setting #box1 div to position:static ... something I found helped with the "jump" issues...What rubbish - it was position:fixed.
... what was I thinking ... ;) Overflow-y:scroll enables scrolling. It was a good thinking, but the cause of the issue here meant it would not stop the scroll/"jump" for documents that extended beyond the fold. Sheesh ...I put html { overflow-y: scroll; } ...... that would stop scrolling for documents that extend beyond the "fold" ...
