I'm not yet into javascript myself, so I need your help. Situation is that I have a '< script >'-element in an html-document, which embeds a swf-file. Now I want to position said embedded swf. Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Game</title>
<meta name="description" content="" />
<script src="js/swfobject.js"></script>
<style>
html, body { height:100%; overflow:hidden; }
body { margin:0; }
#game {
width: 1024px;
height: 768px;
position: absolute;
left: 50%;
top: 5%;
margin-left: -512px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="game">
<script>
var flashvars = {
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "",
wmode: "direct" // can cause issues with FP settings & webcam
};
var attributes = {
id:"projectweb2"
};
swfobject.embedSWF(
"projectweb2.swf",
"altContent", 1024, 768, "10.0.0",
"expressInstall.swf",
flashvars, params, attributes);
</script>
</div>
<div id="altContent">
<h1>project_web2</h1>
<p><a href="http://www.adobe.com/go/getflashplayer">Get Adobe Flash player</a></p>
</div>
</body>
</html>
unfortunately positioning doesn't work that way. Thanks to the red border I can see that the "game"-div is exactly where I want it to be. The embedded swf though is still in the upper left corner and refuses to be moved by the surrounding div and its css-commands.
How can I position the swf?