views:

55

answers:

4

Hey guys,

I'm trying to position my Flex app so that it's further down the page, but I can't get it working. It's still appearing in the top left. Here is the HTML, any help would be greatly appreciated!

<html lang="en">
<head>
   <title>Page</title>
   <style type="text/css">
       body { margin: 0px; overflow: hidden; }
       #swf {top:50%;}
   </style>

   <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"&gt;&lt;/script&gt;
   <script type="text/javascript">

   swfobject.embedSWF( "link_to_the_swf", "swf", "100%", "100%", "10.0.0", "playerProductInstall.swf", flashVars, params );
   </script>
</head>
<body scroll="no">

   <div id="swf">
      <p>Alternative content</p>
    </div>

</body>
</html>

EDIT: After reading this message, I tried wrapping the swf div in another one and setting the top property on the parent div, but it didn't work.

+1  A: 

You can't use top alone. You need to give the div either position: relative or use margin-top / padding-top.

Pekka
Thanks so much, works great. The other answers were handy as well!
ben
A: 

top requires a positioning other than static, which is the default. Try:

#swf {position:relative; top:50%;}

However, if you want to put it in the middle of a large container and have it centered instead of starting at the middle and going down you could do:

#swf {margin-top: auto; margin-bottom: auto;}
Malfist
A: 

Try giving body position: relative. Then add position: absolute (or relative I suppose) to #swf

Chris
A: 

Try giving the body a height as well. Something like body { height: 100%; }

pat