Having trouble positioning webpage above flash background

HTML & CSS
1

Hi all,

I am trying to position my main wrapper above the snow effect background using absolurte position on both the background and wrapper with the wrappers z-index being greater than the backgrounds. My problem is right now that Im not sure how to properly center the wrapper on screen? I thought I just had to add left 50% to achieve this but its propving tyo be inconsistent across vatious browser sizes, can anyone help explain were Im going wrong?

Many thanks and Merry Christmas

Kyle

2

You don’t need to position the wrapper absolute. You can give every positioned element a z-index

Merry Christmas too you as well

3

Hi,

Do you have a live demo where we can fiddle around with the code?

You can’t center an absolute element with left 50% alone as you would then also need to do a margin-left of half the elements width.

I’d be inclined to do it in reverse and position the flash instead.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {margin:0;padding:0}
html,body{height:100%}
p {margin-bottom:1em}
#flashmovie{
    position:absolute;
    position:fixed;
    top:50%;
    margin-top:-30px;/* half height*/
    left:50%;
    margin-left:-234px;/* half width*/
    height:60px;
    width:468px;
    z-index:1;
}
#outer{
    position:relative;
    z-index:2;
    width:960px;
    margin:auto;
}


</style>
</head>
<body>
<div id="outer">
    <p>test this is some text : test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :</p>
    <p>test this is some text : test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :</p>

    <p>test this is some text : test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :</p>
    <p>test this is some text : test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :</p>
    <p>test this is some text : test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :</p>
    <p>test this is some text : test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :</p>
    <p>test this is some text : test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :</p>
    <p>test this is some text : test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :</p>

    <p>test this is some text : test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :</p>
    <p>test this is some text : test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :</p>
    <p>test this is some text : test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :</p>
    <p>test this is some text : test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :</p>
    <p>test this is some text : test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :</p>
    <p>test this is some text : test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :</p>

    <p>test this is some text : test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :</p>
    <p>test this is some text : test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :</p>
    <p>test this is some text : test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :test this is some text :</p>
</div>
<div id="flashmovie">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"
   width="468" height="60">
        <param name="movie" value="http://www.pmob.co.uk/temp/welcomecurl.swf" />
        <param name="quality" value="high" />

        <param name="bgcolor" value="#FFFFFF" />
        <param name="wmode" value="opaque">
        <embed name="welcomecurl" src="http://www.pmob.co.uk/temp/welcomecurl.swf" quality="high" bgcolor="#FFFFFF"
    width="468" height="60" wmode="opaque"
    type="application/x-shockwave-flash"
    pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> </embed>
    </object>
</div>
</body>
</html>

It all depends on what you want to do and remember you need the wmode=“opaque” parameter to allow flash to go under something else.

4

Sorry guys, the website I’m tying to fix is www.icehouseonline.co.uk

Thanks again for the replies!

Kyle

5

Hi,

As I said above I would simply do this.


#flashContent {
    width:100%;
    height:100%;
    position:absolute;/* ie6*/
    position:fixed;
    top:0;
    left:0;
    z-index:1;
}
#wrapper {
    width: 940px;
    margin: 0 auto;
    text-align: left;
    position: relative;
    z-index:2;
}

Then remove the inline styling that you have on #wrapper.

6

Thanks guys for your help and advice not just today but over the past year!

Have a great Christmas everyone and Im sure Il be bothering you all once again with my problems in the new year!

Kyle

7

Thanks Kyle :slight_smile: Have a good break.