Positioning Flash movie over DIVs using CSS

#1
ThemePark

Posted 28 May 2010 - 12:54 PM

Programmer

Members
124 posts

I have been able to make a website that displays two backgrounds, by using two DIVs inside the BODY tag and making them each fill 50 %. I have then added a Flash movie to be centered in the middle, and the idea is for the Flash movie to hover over the backgrounds, so that the backgrounds take up 50 % each. Unfortunately, now I get a lot of white space to the left and right of the Flash movie, and the size of the backgrounds is bigger than the window, resulting in scrollbars appearing. What I want, is to have the backgrounds take 50 % each of the window size, no matter what that size is, and for the Flash window to always be positioned in the center. I.e., I have this:

Screenshot1..PNG 14.33K 142 downloads

And I want it to look like this:

Screenshot2..PNG 13.77K 2737 downloads

This is my code so far:

<HTML>
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="Style.css"/>
<TITLE></TITLE>
</HEAD>
<BODY>
<DIV ID="Red"></DIV>
<DIV ID="Flash">
<OBJECT WIDTH="640" HEIGHT="480">
<PARAM NAME="movie" VALUE="Test.swf">
<EMBED SRC="Test.swf" WIDTH="640" HEIGHT="480"/>
</PARAM>
</OBJECT>
</DIV>
<DIV ID="Yellow"></DIV>
</BODY>
</HTML>

body {
 margin: 0px;
}
div#Red {
 background: url('Red.bmp');
 height: 50%;
}
div#Flash {
 text-align: center;
}
div#Yellow {
 background: url('Yellow.bmp');
 height: 50%;
}

#2
Drew

Posted 30 May 2010 - 03:58 PM

Learning Programmer

Members
42 posts

div#Flash {
 text-align: center;
 z-index:100;
 top:48%;
 left:48%;
 right:48%;
 bottom:48%;
 position:absolute;
}

Fiddle with it to suit your needs.

Setting the z-index allows the flash movie to be on a different layer to the rest of the page.

#3
atheium

Posted 06 June 2010 - 04:35 AM

Programming Professional

Members
298 posts

AndyW said:

div#Flash {
 text-align: center;
[B] z-index:100;[/B]
 top:48%;
 left:48%;
 right:48%;
 bottom:48%;
 position:absolute;
}

a Z-index of a 100? that would work yea but isn't it kind of overkill?
he's got nothing else with a z-index on the page so wouldn't z-index:10; do the same thing?

your solution IS valid as far as i know but it doesn't really teach him what z-index does or what normal values of it would be.

#4
Drew

Posted 06 June 2010 - 05:06 AM

Learning Programmer

Members
42 posts

I did explain the z-index. If more explanation was needed then more wuld have been proved after.

Yes, the value wass high, but it was likee tht just so it could be above other objects IF there were any created by any script or what not. Just covering a few bases was all.

#5
atheium

Posted 06 June 2010 - 04:06 PM

Programming Professional

Members
298 posts

oh okedoke.

i didnt mean to pick at you i was driven by curiosity.

#6
Drew

Posted 08 June 2010 - 02:59 PM

Learning Programmer

Members
42 posts

"Curiosity killed the cat.
Satisfaction brought it back."

Don't worry about it, everyone gets curious and wants to know things.

#7
Guest_johnny.dacu_*

Posted 07 July 2010 - 08:40 AM

Guests

By default any flash object has the highest z-index and with regular css link z-index:10000, you'll never have any result. First you need to change/add in your embeding parameter wmode = window. Or opaque i'm not sure about wich one. After that z-index declaration shoud work