I found this CSS page which automatically centers itself no matter what the browser size. How would I add my swf file into the CSS code in the HTML to get my swf file to be centered as this?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS vertical center using float and clear</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-color:#fc6;
color:#630;
font:100.01%/1.4 sans-serif;
text-align:center; /* horizontal centering for IE Win quirks */
}
#distance {
width:1px;
height:50%;
background-color:#fc6;
margin-bottom:-13.75em; /* half of container's height */
float:left;
}
#container {
margin:0 auto;
position:relative; /* puts container in front of distance */
text-align:left;
height:27.5em;
width:45em;
clear:left;
background-color:#ff9;
border:1px solid #c93;
border-top-color:#fff;
border-left-color:#fff;
}
#container div {
font-size:80%;
float:right;
width:17em;
margin-left:2em;
}
#container div h2 {
font-size:120%;
font-weight:bold;
text-transform:uppercase;
margin:1em 0 0;
}
#container div h3 {
font-size:100%;
font-weight:bold;
margin:.5em 0 0 .75em;
}
#container ul {
margin-left:2em;
}
#container li span {
font-size:70%;
}
#container h1 {
font-size:120%;
padding-top:2.4em;
margin-left:2.4em;
}
#container p {
margin:1.5em 13.6em 1.5em 3em;
}
address {
font-weight:normal;
font-size:80%;
font-style:normal;
text-align:right;
margin:0 20em 0 3em;
}
</style>
<style type="text/css">@import("iemac-center.css");</style>
</head>
<body>
<div id="distance"></div>
<div id="container">
<div>
<h2>Tested in</h2>
<h3>Win XP SP1</h3>
<ul>
<li>Firefox 1.04</li>
<li>Opera 6.06 / 7.23 / 8.0</li>
<li>Netscape 6.1 / 7.1</li>
<li>IE 5.0 / 5.5 / 6</li>
</ul>
<h3>Mac OS9</h3>
<ul>
<li>Mozilla 1.2.1</li>
<li>Netscape 7</li>
<li>IE 5</li>
<li>WaMCom <span>[thx T. Jung]</span></li>
<li>iCab 3.0 Beta 340 <span>[thx T. Jung]</span></li>
</ul>
<h3>Mac OSX</h3>
<ul>
<li>Safari 1.0.3 / 1.3</li>
<li>Firefox 1.0.4</li>
<li>Netscape 7</li>
<li>Opera 6</li>
<li>Camino</li>
<li>IE 5</li>
</ul>
</div>
<h1>CSS vertical centering using float and clear - crossbrowser (?)</h1>
<p>
This box stays in the middle of the browser's viewport.<br>
The content does not disappear when the viewport gets smaller than the box.
</p>
<p>
It even works in IE5 Mac - the doctype triggers this browser to quirks-mode and the IEMac-only stylesheet kills the height for html, body.
</p>
<address>fricca[at]uk2.net | 07.08.05</address>
</div>
</body>
</html>