Forums

ktomasso

I'm trying to make a layered effect on a simple splash page. The page has basically 3 components, a large <div> containing a swf file, a footer, and a button sticking out of the footer that I want to link to another page.

I have placed the button <div> first in my HTML, absolutely positioned it to the bottom right corner where I want it, and have given it an incredibly high Z-index. The effect works for the most part, but the button is extremely unstable. Once the flash animation gets to where the button is, it covers it until you move up or down with the vertical scroll bar.

Does anyone know how to make an effect like this more stable? Any other techniques I could use to create this effect?

Example code is below.

<body>
  <div id=\"button\"><a href=\"contact.html\"><img src=\"button.jpg\" width=\"82\" height=\"109\" border=\"0\" /></a> </div>
 
 <div id=\"flash\">
   <object id=\"flash_movie\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\"800\" height=\"600\">
     <param name=\"movie\" value=\"media/flash_movie.swf\" />
        <!--[if !IE]>-->
        <object type=\"application/x-shockwave-flash\" data=\"media/flash_movie.swf\" width=\"800\" height=\"600\">
        <!--<![endif]-->
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
  </object>
</div>

<div id=\"footer-container\">
  	<div id=\"footer\">
          <p>footer text.</p>
          <p more footer text</p>
        </div>
</div>

CSS:

body {
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	color: #CCCCCC;
	font-size: 62.5%;
	margin: 0;
	padding: 0;
}

#button {
	width: 82px;
	height: 109px;
	position: absolute;
	left: 688px;
	top: 541px;
	z-index:100;
}

#flash {
	height: 600px;
	margin: 0 auto;
	z-index: 0;
}

#footer-container {
	width: 100%;
	height: 5.5em;
	background-color:#000000;

}

#footer {
	font-size: 1.2em;
	margin-left: 3em;
}
	
#footer p {
	line-height: .5em;
	text-align: left;
}

box

It doesn't matter how high a z-index you use, flash will cover them all. You'll need to use javascript to allow html elements to be visible over a flash file. I'm no javascript guru but I'm sure a google will come up trumps.

ktomasso

Found it. It's actually quite simple when you use SWFobject to insert Flash. Link below for the answer.

http://www.pipwerks.com/lab/swfobject/z ... index.html

chriscoyier

I usually find that setting the wmode to "transparent" has better results for z-index pissing matches, but it's situationally dependent.

treehouse : what would you like to learn today?

Forums

layering tags