Welcome to WebmasterWorld Guest from 54.162.227.136

Forum Moderators: not2easy

Message Too Old, No Replies

Relative Vertical Alignment

can't get it to stop at top

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

5+ Year Member



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 type="text/css">
<!--
body, html {
height:100%; /*fill the viewport*/
}
#flash_box{
position:relative; /*allows for top property to move the element*/
top:50%; /*moves it 50% of #container's height down the page*/
margin-top:-400px; /*pulls it back up by half it's height*/
margin-left: auto;margin-right: auto; /*H-centering in complaint browsers*/
}

-->
</style>

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

5+ Year Member



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.

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

5+ Year Member



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.

<style type="text/css">
<!--
body, html {
height:100%; /*fill the viewport*/
}
#flash_box{
position:relative; /*allows for top property to move the element*/
top:50%; /*moves it 50% of #container's height down the page*/
margin-top:-400px; /*pulls it back up by half it's height*/
margin-left: auto;margin-right: auto; /*H-centering in complaint browsers*/
}
/*use this class on images only*/
.valigner{
height:100%;
width:0px;
visibility:hidden;
vertical-align:middle;
}
-->
</style>
</head>

<body>

<body>
<div id="flash_box">
<img class="valigner">
<table width="1007" border="0" align="center" valign="middle">
<tr>
<td width="1001">
<!-- flash stuff -->
</td>
</tr>
</table>
</div>

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]

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

5+ Year Member



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]

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

5+ Year Member



it doesn't work. the valigner doesn't allow for keeping the content vertically centered while resizing the window.
8:33 pm on Sep 1, 2008 (gmt 0)

5+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month