Insert SWF in CSS
A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: Insert SWF in CSS

  1. #1
    Member
    Join Date
    Feb 2002
    Location
    Detroit
    Posts
    51

    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>

  2. #2
    Senior Member
    Join Date
    May 2007
    Posts
    266
    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>

  3. #3
    Junior Member
    Join Date
    Sep 2006
    Posts
    10
    How does it work if you want the centered container to have a "fixed" distance from the top of the page?

  4. #4
    Senior Member
    Join Date
    May 2007
    Posts
    266
    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>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width


HTML5 Development Center

Poll by Flashkit.com