Welcome to WebmasterWorld Guest from 54.198.43.125

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)

New User

5+ Year Member

joined:Sept 1, 2008
posts:3
votes: 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 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 Sept 1, 2008 (gmt 0)

Full Member

5+ Year Member

joined:July 26, 2008
posts:265
votes: 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.

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

New User

5+ Year Member

joined:Sept 1, 2008
posts:3
votes: 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.

<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 Sept 1, 2008 (gmt 0)

Full Member

5+ Year Member

joined:July 26, 2008
posts:265
votes: 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]

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

New User

5+ Year Member

joined:Sept 1, 2008
posts:3
votes: 0


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

Full Member

5+ Year Member

joined:July 26, 2008
posts:265
votes: 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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members