centering flash movie

arcon · May 1, 2010

i'm working on a simple osite, and am trying to horizontally center a flash movie... pretty basic problem & what's worse is i've done this before lol. i've tried adding center tags in both the html page & css, but nothing seems to work, only absolute positioning can place it... so there's something simple i'm missing. link below:

http://www.flamecgi.com/public/housing.htm

the site isn't even half finished obviously & everything is text placeholders... one other weird issue when the page first loads in Chrome the space beneath the flash movie & title are white...? IE, FX & safari don't seem to have this issue so not sure what's happening there..?

any help much apprec & apologies in advance for the newbiness of my questions lol.

newseed · May 2, 2010

You are using postion absolute all over the place when you really don't have to. Position absolute will display at the screen's pixel location and so it might look ok for one resolution but it doesn't for another.

You should also use an unordered list for your navigation instead a div for each link.

You also have incorrect font names (arial should be Arial). They are case sensitive.

I did various updates to the code below. Keep in mind that your current stylesheet is not listed in the new code but the styles I have is located within the <head> </head> section of the html.

Just copy and paste the code and save it as a new file and then review it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Flame CGI - Housing Marketing</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script language="javascript" type="text/javascript">AC_FL_RunContent = 0;</script>
<script language="javascript" src="AC_RunActiveContent.js" type="text/javascript"></script>

<style type="text/css">
body {
background: #000000 url("../img/header_bg_grey.gif") repeat-x;
margin: 0;
font: 13px Arial,Verdana,sans-serif;
}
p {
font-size: 14px;
color: #999999;
text-align: justify;
margin: 0;
padding: 0;
}
h1 {
font-size: 13px;
color: #666666;
text-align: left;
margin: 0;
padding: 0;
}
h2 {
font-size: 14px;
color: #ecbb8d;
text-align: center;
text-transform: uppercase;
margin: 0 20px 0 0;
padding: 0;
}
h3 {
font-size: 14px;
color: #ecbb8d;
text-align: left;
text-transform: uppercase;
margin: 0 20px 0 0;
padding: 0;
}
h4 {
font-size: 13px;
color: #666666;
text-align: right;
margin: 0;
padding: 0;
}
a:link {
color: #ecbb8d;
}
a:visited {
color: #666666;
}
.clear {
clear: both;
}
#wrapper {
width: 990px;
margin: 0 auto;
}
#header {
height: 64px;
background: #484848;
}
.logo {
float: right;
}
.upper-nav {
float: left;
list-style: none;
margin: 0 10px;
padding: 0;
}
.upper-nav li {
float: left;
padding: 0 5px;
}
.upper-nav li a:link {
font-size: 14px;
color: #808080;
padding: 0px 0px 0px 0px;
}
#topmenu {
height: 20px;
margin: 0 0 20px 0;
}
.top-nav {
float: left;
list-style: none;
margin: 0 10px;
padding: 0;
}
.top-nav li {
float: left;
padding: 0 5px;
}
.top-nav li a:link {
font-size: 14px;
color: #808080;
padding: 0px 0px 0px 0px;
}
#title {
padding: 2px 15px;
background: #171717;
height: 16px;
margin: 0 0 10px 0;
}
#title h1 {
float: left;
}
#title h4 {
float: right;
}
#video_housing {
width: 512px;
height: 288px;
margin: 0 auto;
}
</style>
</head>

<body>

<div id="wrapper">
<div id="header">
	<img alt="Flame CGI" class="logo" src="img/flame_logo_grey.jpg" />
	<ul class="upper-nav">
		<li><a href="index.htm" title="Home">home</a></li>
		<li><a href="contact.htm" title="Contact Flame">contact</a></li>
	</ul>
</div>
<!-- end header -->
<div id="title">
	<h1>High end 3D animation for TV & internet advertising, IT & architectural 
	visualization.</h1>
	<h4>© 2010 Flame CGI.
	<a href="disclaimer.htm" style="color: #666666;" title="Legal Notice">Terms 
	of Use</a></h4>
</div>
<!-- end title -->
<div id="topmenu">
	<ul class="top-nav">
		<li><a href="housing.htm" title="Housing">housing</a></li>
		<li><a href="apartments.htm" title="Apartments & Commercial">apartments 
		& commercial</a></li>
		<li><a href="advertising.htm" title="Advertising Potfolio">tv advertising</a></li>
		<li><a href="design.htm" title="Graphic Design & Web">graphic design 
		& web</a></li>
	</ul>
</div>
<!-- end topmenu -->
<div class="clear">
</div>
<div id="contents">
	<div id="video_housing">
		<!-- add your video flash code here --></div>
	<h2>housing 3d visualization</h2>
</div>
<!-- end contents -->
<div id="footer">
</div>
<!-- end footer --></div>
<!-- end wrapper -->

</body>

</html>

You can see that I used no position: absolute;. Using float can help you achieve left/right positioning without breaking the overall desigin.

I urge you to take some fundemental HTML and CSS video courses that Stef has here on Killersites to get some basic knowledge that will help you achieve the desired results you are looking for.

Edited May 2, 2010 by newseed

arcon · May 3, 2010

thanks heaps for the feedback - i'm reviewing it & will look into the vid courses when i get time over the next week. one thing to note, the links will be graphical buttons with different states so not sure if lists or divs would be more appropriate for those..?

Sign In

centering flash movie

Recommended Posts

arcon

newseed

arcon

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Store

Support