Help centering Flash movie in table... [Archive]

Click to See Complete Forum and Search --> : Help centering Flash movie in table...

blockinnovation

08-26-2007, 07:51 PM

The site I'm developing is blockmarineinnovations.com (http://blockmarineinnovations.com/). Here's the HTML source. I know it's something simple, just not an expert on tables.

How do I align the embedded Flash file to the center of the page instead of left like it is now?

<BODY>
<table style="height:780px; width:100%">
<tr>
<td style="width:766px">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
width="766" height="780">
<param name="movie" value="flash/main_v7.swf?button=0">
<param name="quality" value="high">
<param name="menu" value="false">

<object data="flash/main_v7.swf?button=0"
width="766" height="780" type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
FAIL (the browser should render some flash content, not this).
</object>

</object>
</td>
<td style=" width:100%; background:url(images/top.gif) repeat-x #000000 ">
<table style="width:100%; height:100%; background:url(images/bot.gif) repeat-x bottom">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</BODY>

Thanks sooo much for your consideration! It's my first post here.

Centauri

08-26-2007, 08:57 PM

First step is to get rid of that table rubbish - it is not displaying tabular data so is not needed.

Second, use a complete doctype.

body { margin:0 auto; padding:0; background: #0D0D0D; width: 766px} will centre the object.

You realise that a flash site like this will be completely invisible to search engine spiders and screen readers?

blockinnovation

08-26-2007, 09:32 PM

I simplified it out to this, but still not seeing how it aligns to center.

Also, I wasn't aware that search engines would have problems picking the site up, but that makes sense to me.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<TITLE>Block Marine Innovations</TITLE>

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<LINK HREF="style.css" TYPE="text/css" REL="stylesheet">

<BODY margin:0 auto; padding:0; background: #0D0D0D; width: 766px>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="766" height="780">
<param name="movie" value="flash/main_v7.swf?button=0">
<param name="quality" value="high">
<param name="menu" value="false">


<object data="flash/main_v7.swf?button=0" width="766" height="780" type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
FAIL (the browser should render some flash content, not this).
</object>

</object>

</BODY>
</HTML>

Centauri

08-26-2007, 09:46 PM

The line of code I gave goes in your css, not the html.

A complete doctype has an uri attached, and should have a head section - the start of the html can look something like this<!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>Block Marine Innovations</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>

Major Payne

08-27-2007, 03:14 AM

Looks good! Nicely centered now and only 2 validation errors.

Ron

blockinnovation

08-27-2007, 09:49 PM

Thank you. Still have a looong way to go, but I sincerely appreciate the feedback.

Nowww, what is a validation error? Haha, and how do you know that I have them?

Major Payne

08-27-2007, 10:38 PM

Your page was validated at the W3C.org's Validator (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fblockmarineinnovations.com%2F) which you should always use to check your html. There's one that will check problems with your CSS (http://jigsaw.w3.org/css-validator/#validate-by-input).

Ron

blockinnovation

08-27-2007, 11:01 PM

Okay, the CSS validated and I looked at the HTML errors, but I'm not understanding exactly what it's telling me to do. Looks like all my tags are closed correctly and I have nooo idea what that object thing is about.

Here's my complete index.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

<TITLE>Block Marine Innovations</TITLE>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<LINK HREF="style.css" TYPE="text/css" REL="stylesheet">

</HEAD>

<BODY>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="766" height="780">
<param name="movie" value="flash/main_v7.swf?button=0">
<param name="quality" value="high">
<param name="menu" value="false">


<object data="flash/main_v7.swf?button=0" width="766" height="780" type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
FAIL (the browser should render some flash content, not this).
</object>

</object>

</BODY>

</HTML>

blockinnovation

08-27-2007, 11:06 PM

Also, if you look at the site again, anyone know why the #0070CC blue in the Flash movie didn't come out exactly the same color as the real #0070CC blue in the background? Thanks again!

Major Payne

08-28-2007, 12:06 AM

I put the <object></object> tags between <p></p> tags, inputed your page directly into validator (http://validator.w3.org/#validate_by_input+with_options) and it came back a-okay.

As for the difference in blue bg colors, I don't use Flash so have no answer unless there is a difference in the color palette that is used to make the flash. You would think it would be the same if you used the same color code. Might just trying matching the page's blue bg color to the flash. I didn't see and <param> tag calling for a bg color to play in either.

Ron

Centauri

08-28-2007, 12:44 AM

Html strict requires that the body only contain block level elements, hence Ron's solution validates. However, the object is not a block of text and therefore <p> tags are semantically not appropriate. Enclosing the object in a div would be better.

blockinnovation

08-28-2007, 12:57 AM

Thanks to both of you guys. I went ahead and updated to the div tags. Need to figure out the color thing, but I'll try posting in the Flash section.

Centauri

08-28-2007, 01:07 AM

I would say it has something to do with the colour pallete used when exporting the flash - I don't use flash, but there may be something in the options regarding colour palletes when saving. Otherwise, as Ron said, you could match the background colour to the flash instead.

Edit: looking at it very close, the blue in the flash does not appear to be a solid colour - maybe some sort of dithering occured. A background colour of #006ACA is a pretty close match though.

blockinnovation

08-28-2007, 01:30 AM

Okay, went into Flash and figured out it's actually not #0070CC, it's a .png file which looks the same in Flash as it came out on the .swf upload. Anyone know what a .png is and can I just switch it out with a .gif or something in #0070CC?

Centauri

08-28-2007, 01:49 AM

A png is a graphic file format - you didn't make the flash?

Do you have access to the actual png file that the flash references? - maybe you could replace that with a flat colour.