homepage Welcome to WebmasterWorld Guest from 54.204.142.143
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
"advanced" div positioning for popup div
My brain hurts......
Aussie Nuf Man




msg:4143285
 10:36 pm on May 28, 2010 (gmt 0)

I have uploaded the "beta" version of my page. The problem I'm having is this; When the 'popup <div>' I have created gets it's positioning it is to the initial position of the page relative to the browsers whole "visible only" area. If the parent div that triggers the popup is off the bottom of the screen (example: having to scroll down because of length of document), the popup appears too high to view.

How do I make this absolute so it 'floats' above everything but also relative to the parent div that triggers it? So no matter on the browser size, location whatever, the 600x400px box centers in the browser.

Forgive if I don't explain too well but I have really only been into html/css/javascript for a couple of weeks now. prior to that it was all html and tables.


CSS:

#box1 div { display: none; position:absolute; left: 50%; top: 225px; margin-left:-320px; padding: 15px; border:#666 thick double; text-align:left}
#box1:hover div { display: block; width: 600px; min-height:400px; background-color: #FFF; }



HTML:

<div class="footer">
<div id='box1'><h2>Disclaimer</h2>
<div>
<h1>Disclaimer</h1>
</div>
</div>
</div>

[edited by: tedster at 7:48 pm (utc) on May 29, 2010]
[edit reason] removed personal URL [/edit]

 

Aussie Nuf Man




msg:4143293
 10:47 pm on May 28, 2010 (gmt 0)

I should also note - The trigger is the "Disclaimer" text/div at the bottom of the screen.


** I have figured it out - sort of using:

#box1 div {
display:none;
position:relative;
top: -470px;
left:50%;
margin-left:-355px;
padding: 0px;
border: solid 5px #000;
text-align:left;
}
#box1:hover div {
display: block;
width: 670px;
height:390px;
padding: 15px;
background-color: #fff;
}


I now have the div appearing where I want with the use of relative positioning however when i hover and div popsup, the page "magically" becomes longer (notice scrollbar on right if viewing page shorter than browser window)

alt131




msg:4143342
 1:36 am on May 29, 2010 (gmt 0)

Hi aussie,
How do I make this absolute so it 'floats' above everything but also relative to the parent div that triggers it
Very 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 ;)

I explored this issue in late 2008. To save repeating everything, you can find the posts by their titles (Scrolling Window HTML help needed please!, IE Z-Index Bug, CSS Tooltip - IE6 issues). They are more detailed than you need because of the specifics of what the OP was doing, plus mostly hover an anchor because of the need to support older browsers that didn't recognise hover on other elements.

However, I think the following is still relevant.

1. Use visibility:hidden/visible rather than display:none/block. This will mean your div is recognised in the document flow, and so reduces the "jump" created on hover when suddenly the browser has to create it as it does with display:none/block. Also, some ua's still won't re-draw after display:none which means the effect fails, plus causes accessibility issues.

2. position:absolute removes the "pop-up" div from the document flow, however it is taking its position by reference to the viewport. To have the absolutely positioned element take its position relative to where it is in the document, set a parent element to position:relative.

You've currently got #box1 div set to position:relative, but that is not a "parent" - it is the element itself, and the relative positioning is being removed on :hover. On your code sample, the parent of your "popup" div is div.footer, so set position:relative on that. Leave position:absolute on the hover as you have. Next, to help with the re-drawing issues, try setting #box1 div to position:static. That sounds weird, but was something I found helped with the "jump" issues back in 2008.

If you have just started with css you're doing remarkably well ;) So if this still hasn't resolved the issues post back with some more code. Include the css for your footer, doctype, and browsers you are supporting as well. Would be a good excuse to update my notes from 2008 ;)

Aussie Nuf Man




msg:4143347
 1:46 am on May 29, 2010 (gmt 0)

The big problem with positioning is that my entire site is located within a single "index.html" and uses jquery to create a menu and 'on-click' on any of the menu tabs updates the main content div of the site.

I have - god only knows how - resolved the issue of the location of whenre the popup div appears. 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.

I'll have a go now at trying the visibility tag as oppose to the display tag. Post back soon.

alt131




msg:4143369
 2:20 am on May 29, 2010 (gmt 0)

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.

I have some immediate reactions, (like z-index), but am really just guessing. This usually isn't too difficult to fix, so post your current code, including the css for your footer.

Aussie Nuf Man




msg:4143370
 2:21 am on May 29, 2010 (gmt 0)

Thanks man, I've had a play, a search, a coffee, and some lunch - none of which helped.

**Note changes made since original post and ideas from replies

DOCTYPE
<!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">


------------------------------------------------------------------------
CSS

.footer {
background:url(images/disc_bg.gif) repeat-y;
position:relative;
height:15px;
left:350px;
width:80px;
font-family:Arial,Helvetica,sans-serif;
padding:0px;
margin:0 auto;
text-align:center;
}
#box1 div {
display:none;
position:relative;
top: -350px;
left:50%;
margin-left:-705px;
padding: 0px;
border: solid 5px #000;
text-align:left;
width:100px;
height:20px;
}
#box1:hover div {
display:block;
width:670px;
height:270px;
padding:15px;
background-color:#fff;
}

------------------------------------------------------------------------
HTML

<div class="footer">
<div id='box1'><h2>Disclaimer</h2>
<div>
<h1>POPUP TEXT</h1>
</div>
</div>
</div>

------------------------------------------------------------------------

I have been testing page on IE8 32bit in Windows 7.

I tried to replace the 'display' attribute with 'visibility' as you reccomended (see below). Problem is that the div is created invisibility and is still below the bottom of the parent div allowing for scrolling below bottom of page.

#box1 div {
visibility:hidden;
position:relative;
top: -350px;
left:50%;
margin-left:-705px;
padding: 0px;
border: solid 5px #000;
text-align:left;
width:100px;
height:20px;
}
#box1:hover div {
visibility:visible;
width:670px;
height:270px;
padding:15px;
background-color:#fff;
}



Long story short, what happens is when the '#box1:hover div' is activated, the box appears exactly where I want however the div '.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.

In an extremly crude 'visual nuisance' repair, I put html { overflow-y: scroll; } in my css document to overcome the whole 'popping' left that has been occuring. None the less, people can still scroll down to nothingness.


p.s. Tried to search for those posts you said but no results or too many unrelated results.

alt131




msg:4143378
 2:40 am on May 29, 2010 (gmt 0)

Tried to search for those posts you said but no results or too many unrelated results

Just did it myself. Ouch! ;)
Sorry about that, but loathe to reference my own posts as it seems self-serving and have alerted the mods to my problem as there is nothing in the library. In the interim:
Scrolling Window HTML help needed please! [webmasterworld.com...]
CSS Tooltip - IE6 issues [webmasterworld.com...]
IE Z-Index Bug [webmasterworld.com...]

A lot in those threads, but I think we're in the same time-zone so while you digest lunch, I'll check out your code ;)

alt131




msg:4143448
 6:54 am on May 29, 2010 (gmt 0)

Ok Aussie, I've rethought some the things I did two years ago, and changed tack given some things you've said:

  1. After this effort you'll want valid, semantic code. That means the html structure must change as it is not valid to have h1 after h2. I suspect you used those to create a font-size and weight, so you'll need to style the h3 I've used instead.

  2. The trouble is not the browser you are testing on, but what browsers your users will be viewing this in. Older browsers don't support :hover on anything but an anchor, so this will not function in any but the most modern browsers.

  3. I've returned to using display:none/block. The description of how the page is generated indicates there will likely be a lot of other accessibility issues, so one more won't matter.

.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.

However, this works as designed in ie7&8, ff3&3.5, winsaf3 & 4, op9.6

<!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>

Let me know if this helps ;)

Aussie Nuf Man




msg:4143489
 9:06 am on May 29, 2010 (gmt 0)

You are a god amongst mere men. The page is now laid out perfectly. Next to work on the content.

[edited by: tedster at 7:52 pm (utc) on May 29, 2010]

alt131




msg:4144337
 1:17 pm on May 31, 2010 (gmt 0)

Hi Aussie, pleased it worked out.

Very flattering praise, unfortunately, god or mere man, this one has feet of solid clay. Two left feet if this thread is any indication. Pleased these things didn't prevent a solution, but to correct for later readers:

My first post:
... try setting #box1 div to position:static ... something I found helped with the "jump" issues...
What rubbish - it was position:fixed.

My second post:
I put html { overflow-y: scroll; } ...
... that would stop scrolling for documents that extend beyond the "fold" ...
... 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 ...
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved