• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 381
  • Last Modified:

Centering a SWF movie

I have a SWF movie that I want to be alway in the exact centre of the screen.  I have inserted the swf file into my html page using Dreamweaver CS3 and a div tag.  

I've set the width to 100% (and centered the swf file in the div tag), which fixes half of the issue, but I can't figure out how to make sure that it is centred vertically.  The Position is currently set to absolute.

Please tell me where I am going wrong.
0
Andy Brown
Asked:
Andy Brown
  • 13
  • 10
  • 8
  • +2
3 Solutions
 
techsathishCommented:
Hi AndrewDBrown,

U can use table for that. In that use valign='middle'.

Show ur code i ll tell u exact code...
0
 
Andy BrownAuthor Commented:
Here is a cut down version.

One thing though, I was told that tables are a bit old-fashioned and that I should use div tags where ever possible.  I don't know if this is true or not, but I want to use the latest standards where possible.

Thanks for your quick response - really appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Countdown {	position:absolute;
	left:0px;
	top:150px;
	width:100%;
	height:400px;
	z-index:5;
	bottom: 150px;
}
-->
</style>
<script src="DWConfiguration/ActiveContent/IncludeFiles/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div id="Countdown">
  <div align="center">
    <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','640','height','400','align','absmiddle','title','Countdown','src','Flash/Home','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Flash/Home' ); //end AC code
    </script>
    <noscript>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="640" height="400" align="absmiddle" title="Countdown">
        <param name="movie" value="Flash/Home.swf" />
        <param name="quality" value="high" />
        <embed src="Flash/Home.swf" width="640" height="400" align="absmiddle" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
      </object>
    </noscript>
  </div>
</div>
</body>
</html>

Open in new window

0
 
techsathishCommented:
Hi,

#Countdown {
      float:left;
      margin:auto;
        width:100%;
        height:400px;
}
 

Try this
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Andy BrownAuthor Commented:
Unfortunately, that centres it in the middle of the screen (on the x Axis) - which it already did.  I need it centered on the Y Axis.
0
 
sajayj2009Commented:
Inside position abosute class,

give
top:50%;
0
 
sajayj2009Commented:
#Countdown {    position:absolute;
        left:0px;
        top:50%;
        width:100%;
        height:400px;
        z-index:5;
        bottom: 150px;
}
0
 
Andy BrownAuthor Commented:
That pushes the top of the SWF file - to the middle, causing everything to be too low on the screen.  If you could take the height of the swf file into account it would work, something like (even though I now it's not technically correct):

top:50% - (swffile.height/2)
0
 
sajayj2009Commented:
here this one? forget the above code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Countdown {    position:absolute;
        left:0px;
        top:150px;
        width:100%;
        height:400px;
        z-index:5;
        bottom: 150px;
}
-->
</style>
<script src="DWConfiguration/ActiveContent/IncludeFiles/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div id="Countdown">
  <div align="center" style="top:50%;">
    <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','640','height','400','align','absmiddle','title','Countdown','src','Flash/Home','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Flash/Home' ); //end AC code
    </script>
    <noscript>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="640" height="400" align="absmiddle" title="Countdown">
        <param name="movie" value="Flash/Home.swf" />
        <param name="quality" value="high" />
        <embed src="Flash/Home.swf" width="640" height="400" align="absmiddle" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
      </object>
    </noscript>
  </div>
</div>
</body>
</html>

Open in new window

0
 
sajayj2009Commented:
<div align="center" style="position:absolute; top:50%;">
0
 
TimorosCommented:
You cannot set Y-axis in the center !
You just place your DIV with a top height parameter and that's it !
0
 
Andy BrownAuthor Commented:
That's a pig - is there any technical reason why this is the case?
0
 
sajayj2009Commented:
" You cannot set Y-axis in the center ! ", why????

There is a way.
0
 
Andy BrownAuthor Commented:
How?
0
 
sajayj2009Commented:
You can set this way.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Countdown {    position:absolute;
        left:0px;
        top:150px;
        width:100%;
        height:400px;
        z-index:5;
        bottom: 150px;
}
-->
</style>
<script src="DWConfiguration/ActiveContent/IncludeFiles/AC_RunActiveContent.js" type="text/javascript"></script>
<script>
function center(){
 var bdy = document.body;
 var browseHeight=bdy.clientHeight;
 document.getElementById('FlashWrap').style.top=""+browseHeight/2-265+"px";
}
</script>
</head>

<body onLoad="center()">
<div id="Countdown">
  <div align="center" id="FlashWrap">
    <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','640','height','400','align','absmiddle','title','Countdown','src','Flash/Home','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Flash/Home' ); //end AC code
    </script>
    <noscript>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="640" height="400" align="absmiddle" title="Countdown">
        <param name="movie" value="Flash/Home.swf" />
        <param name="quality" value="high" />
        <embed src="Flash/Home.swf" width="640" height="400" align="absmiddle" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
      </object>
    </noscript>
  </div>
</div>
</body>
</html>

Open in new window

0
 
Andy BrownAuthor Commented:
I think I see what you have done, but that has stopped the swf file from running (I am using IE8)
0
 
sajayj2009Commented:
not sure..w c be?
0
 
techsathishCommented:
HI,

vertical-align:middle; add this in css

0
 
techsathishCommented:
#Countdown {
        position:absolute;
        left:0px;
        top:150px;
        width:100%;
        height:400px;
        z-index:5;
        bottom: 150px;
        vertical-align:middlel;
}

like this
0
 
Andy BrownAuthor Commented:
Nope - still the same - here is the latest code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Countdown {
        position:absolute;
        left:0px;
        top:150px;
        width:100%;
        height:400px;
        z-index:5;
        bottom: 150px;
        vertical-align:middlel;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div id="Countdown">
  <div align="center">
    <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','640','height','450','align','absmiddle','title','Countdown','src','Flash/Home','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Flash/Home' ); //end AC code
    </script>
    <noscript>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="640" height="450" align="absmiddle" title="Countdown">
        <param name="movie" value="Flash/Home.swf" />
        <param name="quality" value="high" />
        <embed src="Flash/Home.swf" width="640" height="450" align="absmiddle" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
      </object>
    </noscript>
  </div>
</div>
</body>
</html>

Open in new window

0
 
sajayj2009Commented:
not;
        vertical-align:middlel;

but;
        vertical-align:middle;
0
 
Andy BrownAuthor Commented:
Doh - but it still isn't working.
0
 
techsathishCommented:
Hi sajayj2009

It just a spelling mistake....
0
 
sajayj2009Commented:
url?
0
 
techsathishCommented:
Hi AndrewDBrown,

Can u give as a link. It will helpful to find...
0
 
Andy BrownAuthor Commented:
No problem but I'll have to set something up, as there is information which needs to be kept under-wraps for a couple of weeks.

Leave it with me - and thanks for all of your help.
0
 
techsathishCommented:
Okay fine,

Finally try this


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Countdown {
	position:absolute;
	left:0px;
	top:150px;
	width:100%;
	height:700px;
	z-index:5;
	bottom: 150px;
	vertical-align:middle;
	text-align:center;
}
#inner {
	float:left;
	margin:0 auto;
	width:640px;
	height:400px;
	text-align:center;
}
-->
</style>
<script src="DWConfiguration/ActiveContent/IncludeFiles/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div id="Countdown">
  <div id="inner">
    <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','640','height','400','align','absmiddle','title','Countdown','src','Flash/Home','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Flash/Home' ); //end AC code
    </script>
    <noscript>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="640" height="400" align="absmiddle" title="Countdown">
        <param name="movie" value="Flash/Home.swf" />
        <param name="quality" value="high" />
        <embed src="Flash/Home.swf" width="640" height="400" align="absmiddle" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
      </object>
    </noscript>
  </div>
</div>
</body>
</html>

Open in new window

0
 
Andy BrownAuthor Commented:
Unfortunately, the flash file doesn't load when I use this code.
0
 
techsathishCommented:
Try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Countdown {
	position:absolute;
	left:0px;
	top:150px;
	width:100%;
	height:700px;
	z-index:5;
	bottom: 150px;
	vertical-align:middle;
	text-align:center;
}
#inner {
	margin:0 auto;
	width:640px;
	height:400px;
	text-align:center;
}
-->
</style>
</head>

<body>
<div id="Countdown">
  <div id="inner">
 
    
    
<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="600" height="400">

  <param name="movie" value="Flash/Home.swf">
  <param name="quality" value="high">
  <embed src="Flash/Home.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="400"></embed>
</object>
    
    
    
  </div>
</div>
</body>
</html>

Open in new window

0
 
sajayj2009Commented:
AndrewBrown:

check your supported js file path.

You are checking in wrong directory.

<script src="DWConfiguration/ActiveContent/IncludeFiles/AC_RunActiveContent.js" type="text/javascript"></script>

I hope above path is correct one.
0
 
s8webCommented:
If you haven't already resolved this issue, this should work for you.

AC content is also kind of old school. You might want to take a look at swf object http://code.google.com/p/swfobject/.


<html>
<head>
<script src="DWConfiguration/ActiveContent/IncludeFiles/AC_RunActiveContent.js" type="text/javascript"></script>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Countdown</title> 
<style type="text/css" media="screen">
body 
	{
	background:#fff;
	}
#container       
	{
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	}
#content    
	{
	margin-left: -320px;
	position: absolute;
	top: -200px;
	left: 50%;
	width: 640px;
	height: 400px;
	}
#Countdown{
	width:640px;
	height:400px;
	}
</style>
</head>
<body>
	<div id="container">
		<div id="content">
            <div id="Countdown">
				<script type="text/javascript">
            AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','640','height','400','align','absmiddle','title','Countdown','src','Flash/Home','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Flash/Home' ); //end AC code
                </script>
                <noscript>
                  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="640" height="400" align="absmiddle" title="Countdown">
                    <param name="movie" value="Flash/Home.swf" />
                    <param name="quality" value="high" />
                    <embed src="Flash/Home.swf" width="640" height="400" align="absmiddle" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
                  </object>
                </noscript>
            </div>
            <br />
		</div>
	</div>
</body>
</html>

Open in new window

0
 
s8webCommented:
Oops, forgot the Doctype. Put this above the <html> tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
0
 
Andy BrownAuthor Commented:
Thanks everyone for all of your help - it almost worked.  The following line is where I have the issue (as mentioned).

When importing a SWF file in DreamWeaver CS3, it automatically creates a sub-folder called Scripts (from where the html page is).  So in theory, I'd guess it should be

<script src="DWConfiguration/ActiveContent/Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

rather then

<script src="DWConfiguration/ActiveContent/IncludeFiles/AC_RunActiveContent.js" type="text/javascript"></script>


Is this correct?
0
 
Andy BrownAuthor Commented:
At last - got it working - thank you everyone for all of your help, I wish I could give you all more points.

All the best and thanks again.
0
 
s8webCommented:
if the folder hierarchy looks like this:

index.html (file)
Scripts (folder)

with AC_RunActiveContent.js in the Scripts folder

Then all you need in your markup is
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

0
 
Andy BrownAuthor Commented:
Got it - thank you.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 13
  • 10
  • 8
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now