Forum Moderators: open

Message Too Old, No Replies

Centering a table Vertically and Horizontally

         

akki007

12:19 pm on Jul 9, 2004 (gmt 0)

10+ Year Member



I am trying to place a flash movie in a one cell table that covers the whole screen. But width 100% and height 100% doesnt seem to work so I end up with a flash movie in the middle horizontally but at the top of the page. Please help, its driving me insane. the html is...

<html>
<head>
<script>
function openNewWindow(URLtoOpen, windowName, windowFeatures) {
newWindow=window.open(URLtoOpen, windowName, windowFeatures); }
</script>

<title>:: My Site - Welcome Home ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #376244;
}
-->
</style></head>
<body>
<center>
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="803" height="423">
<param name="movie" value="BehindGreenLights.swf">
<param name="quality" value="high">
<embed src="MySite.swf" width="803" height="423" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</td>
</tr>
</table>
</body>
</html>

[edited by: BlobFisk at 1:52 pm (utc) on July 9, 2004]
[edit reason] Removed Site Title from Code [/edit]

akki007

12:27 pm on Jul 9, 2004 (gmt 0)

10+ Year Member



I should add that, if I use a JPEG instead of a flash movie, the html works fine! im gonna cry.

ajpetebyu

6:42 pm on Jul 12, 2004 (gmt 0)



I've found with flash to get it to center exactly in the center of the page - it is easier to use a div layer and a style attribute than tables.

So your page source would be like this:

<html>
<head>
<script>
function openNewWindow(URLtoOpen, windowName, windowFeatures) {
newWindow=window.open(URLtoOpen, windowName, windowFeatures); }
</script>

<title>:: My Site - Welcome Home ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #376244;
}

#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent;
text-align: center;
margin-left: -400px;
margin-top: -210px;
position: absolute;
top: 50%;
left: 50%;
width: 803px;
height: 423px;
visibility: visible
}
-->
</style></head>
<body>
<center>
<div id="content">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="803" height="423">
<param name="movie" value="BehindGreenLights.swf">
<param name="quality" value="high">
<embed src="MySite.swf" width="803" height="423" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</div>
</body>
</html>

The trick is setting the margin left/top to neg one half of object's size and setting the top and left to 50%.