homepage Welcome to WebmasterWorld Guest from 54.227.56.174
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Relative Vertical Alignment
can't get it to stop at top
michelle0927




msg:3736089
 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 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>

 

csuguy




msg:3736101
 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




msg:3736119
 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.

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

csuguy




msg:3736132
 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




msg:3736144
 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




msg:3736145
 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.

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