PDA

View Full Version : Flash content and divs



PeteGens
Jun 16th, 2009, 06:59 AM
Hello,
I'm hoping someone can help me. I'm having trouble with Flash content - specifically, getting it to resize itself to fit between two divs at the top and bottom of the page. Here is the code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Site test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
html, body, #content { width:100%; height:100%; }
body { margin:0; padding:0; overflow:hidden; }
#altContent { /* style alt content */ }
#content { height: 100%; margin: 0 auto; }
#bar { width: 100%; height: 100px; background: #FF00FF;}
</style>
<script type="text/javascript" src="swfobject.js"></script>

</head>

<body>
<div id="bar"><!-- --></div>
<div id="content">
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
<param name="movie" value="flashtest.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flashtest.swf" width="100%" height="100%">
<!--<![endif]-->
<div id="altContent">

<p>Alternative content</p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div id="bar"><!-- --></div>

</body>
</html>


And it can be seen running at http://www.spetom.com/test/test.htm.

What I thought would happen is that, since the Flash content is set to be 100%, it would fill up 100% of the 'content' div, whose size is limited by the 100px height 'bar' divs above and below it.

What seems to happen instead is that the flash content has taken its 100% size from the full window, and is therefore some gets pushed offscreen.

Any ideas what I'm doing wrong here?

abduraooft
Jun 16th, 2009, 08:42 AM
If you are trying to get a 100px height for your flash, you'd need to enclose your object tag within that #bar div

PeteGens
Jun 16th, 2009, 12:41 PM
Thanks abduraooft.
What I'm basically trying to get is a page with a 100px height bar at the top, one at the bottom, and inbetween, flash content that will expand to fit the space.
I thought setting the flash content to a height of 100% would work, but it doesn't seem to.