Relative Vertical Alignment

Forum Moderators: not2easy

Message Too Old, No Replies

Relative Vertical Alignment

can't get it to stop at top

michelle0927

7:07 pm on Sep 1, 2008 (gmt 0)

I'm trying to vertically center a flash box using relative positioning so that it moves when you resize the browser. I also want it to stop when it reaches the top of the page, but I can't seem to figure that part out.
Here's the <style> section of the code. I'm using the id "flash_box" in a <div> outside the flash content.

-->
</style>

csuguy

7:35 pm on Sep 1, 2008 (gmt 0)

I'm pretty sure that top:50% has some browser issues. Like some will move it half of the containers height vs others moving it the actual objects height. I forget... ah well.

Try this:


<html>
<head><style>
<!--
body,html {
height:100%;
}
/*use this class on images only*/
.valigner{
height:100%;
width:0px;
visibility:hidden;
vertical-align:middle;
}
-->
</style>
</head>
<body>
 <div id="flash_box">
  <img class="valigner">
  <!-- put your flass stuff here -->
 </div></body>
</html>

It's a little trick I've developed. Should work - though I haven't tried it on flash stuff.

michelle0927

8:10 pm on Sep 1, 2008 (gmt 0)

Thanks for the response! It still disappears into the top of the browser when I resize the window smaller than the actual content. Here's what I have now.

<body>

Here's an example of what I want it to do:
<zap>

[edited by: DrDoc at 4:23 am (utc) on Sep. 3, 2008]
[edit reason] No URIs, please. See forum guidelines. [/edit]

csuguy

8:26 pm on Sep 1, 2008 (gmt 0)

remove all the css for flash_box. valigner will do all vertical aligning for you (providing it works with flash).

EDIT:

except margin:auto;

[edited by: csuguy at 8:31 pm (utc) on Sep. 1, 2008]

michelle0927

8:30 pm on Sep 1, 2008 (gmt 0)

it doesn't work. the valigner doesn't allow for keeping the content vertically centered while resizing the window.

csuguy

8:33 pm on Sep 1, 2008 (gmt 0)

I don't know where flash box fits in the scheme of your site design - but set its height to 100%. That should cause it (and thus the img) to expand according to the browser.