-
Insert SWF in CSS
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>
-
It will work. I made a few changes to keep it out of quirks mode (which would have put it into quirks mode in IE as well) and removed all code that is not needed (added some comments to css).
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS vertical center</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-color:#fc6; /* page color */
text-align:center; /* horizontal centering for IE5 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; /* Height of centered container */
width:45em; /* Width of centered container */
clear:left;
background-color:#ff9; /* Color of centered container */
border:1px solid #c93;
border-top-color:#fff;
border-left-color:#fff;
}
</style>
</head>
<body>
<div id="distance"></div>
<div id="container">
Put swf code here
</div>
</body>
</html>
-
How does it work if you want the centered container to have a "fixed" distance from the top of the page?
-
Here's one way to center and set height from top. Change the values for top and margin-top of the container
Code:
<style type="text/css">
/*-----page layout-----*/
html{height:100%}
html,body {margin:0;padding:0;}
body{
background:#000;
text-align:left;
min-width:650px;
}
#container{
position:absolute;
top:50%;
margin-top:-200px;/* half content height*/
left:0;
width:100%;
}
#content {
width:624px;
margin-left:auto;
margin-right:auto;
height:395px;
background:#666;
padding:10px;
}
h1 {color:#aaa;margin:0;padding:0}
</style>
Code:
<div id="container">
<div id="content">
<h1>swf goes here.</h1>
</div>
</div>
