Stacking Order Questions

Get Started
1

Hi there,

I have a question about stacking order. I have a you tube video that I want to stack under a frame with a transparent center. Right now the I have positioned the frame a bit to the left so you can see the stack. Right now I have the frame positioned absolute, but I want to make the video appear under the frame. Not sure how to do this. Anyone with suggestions is welcome to try at it.

Here the link: http://www.newmanexpressions.com//sandbox/Billy/Test/includes/prayerOfFaith.html

here the HTML



<!DOCTYPE html PUBLIC
    "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type"
        content="text/html; charset=utf-8">
    <title>title</title>
	<meta name="description" content="a description of your page">
	<meta name="keywords" content="a, list, of, keywords">

<style type="text/css">
* {margin:0; padding:0;}
#back {background-color:#f5f5f5;
	width:761px;
	height:354px;
}

#viewer {zbackground:url(viewPort.png) no-repeat;
	width:761px;
	height:354px;
	position:absolute;  top:0; left:55px;
	
}

#objectView {z-index: -1px;}

a img{border:0 none;}
img.left {float:left; padding:110px 0 0 40px;}
img.right {float:right; padding:110px 40px 0 0;}

#soundCloud {padding-top:50px;}

</style>
  </head>
<body>
<div id="back">

<div id="viewer"><img src="viewPort.png" width="761" height="354"></div>
<div id="objectView"><object width="742" height="354" id="youTube"><param name="movie" value="http://www.youtube.com/v/ZDaDWQBA6Yc?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/ZDaDWQBA6Yc?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="742" height="354" allowscriptaccess="always" allowfullscreen="true"></embed></object></div>

</div>




</body>
</html>
2

I have worked out some bugs to the code. Here is a new version of the HTML (it still won’t stack right):


<!DOCTYPE html PUBLIC
    "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type"
        content="text/html; charset=utf-8">
    <title>title</title>
	<meta name="description" content="a description of your page"> 
	<meta name="keywords" content="a, list, of, keywords"> 
    
<style type="text/css">
* {margin:0; padding:0;}
#back {background-color:#f5f5f5;
	width:761px;
	height:354px;
}

#viewer {
	width:761px;
	height:354px;
	position:absolute;  top:0; left:55px; z-index: 1000;
}

#objectView {}

a img{border:0 none;}
img.left {float:left; padding:110px 0 0 40px;}
img.right {float:right; padding:110px 40px 0 0;}

#soundCloud {padding-top:50px;}

</style>
  </head>
<body>
<div id="viewer"><img src="viewPort.png" width="761" height="354"></div>
<object width="742" height="354"><param name="movie" value="http://www.youtube.com/v/ZDaDWQBA6Yc?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed id="objectView"src="http://www.youtube.com/v/ZDaDWQBA6Yc?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="742" height="354" allowscriptaccess="always" allowfullscreen="true"></embed></object>

</body>
</html>
3

Most recent update:

I am trying a image positioning technique…


<!DOCTYPE html PUBLIC
    "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type"
        content="text/html; charset=utf-8">
    <title>title</title>
	<meta name="description" content="a description of your page"> 
	<meta name="keywords" content="a, list, of, keywords"> 
    
<style type="text/css">
* {margin:0; padding:0;}
#back {background-color:#f5f5f5;
	width:761px;
	height:354px;
}

#viewerFace {background: url(viewPort.png) no-repeat;
	width:761px;
	height:354px;
	display:block; 
	position:absolute; top:0; left:17px;
	
}

#sourceView {position:relative;}

a img{border:0 none;}
img.left {float:left; padding:110px 0 0 40px;}
img.right {float:right; padding:110px 40px 0 0;}

#soundCloud {padding-top:50px;}

</style>
  </head>
<body>
<object id="sourceView" width="742" height="354"><param name="movie" value="http://www.youtube.com/v/ZDaDWQBA6Yc?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed id="objectView"src="http://www.youtube.com/v/ZDaDWQBA6Yc?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="742" height="354" allowscriptaccess="always" allowfullscreen="true"></embed>
<div id="viewerFace"></div>
</object>
</body>
</html>
4

It appears in the second example of code that the stacking order is correctly written, if I see it right. Yet it still does not produce the right results. Which led me to think of another way, if perhaps I have missed something; so I tried an image positioning technique. It seems to follow logical order, yet I am perplexed that it still does not work on screen.

If anyone has suggestions, I am open.

5

Given what you have now, you could just move the image up to sit over the video:

#viewerFace {
background: url(viewPort.png) no-repeat;
width: 761px;
height: 354px;
display: block;
position: absolute;
[COLOR="#FF0000"]top: -340px;[/COLOR]
left: 17px;
}

The problem is that you can no longer click the video. This sort of thing doesn’t work very well, and I’d advise against this whole idea. Perhaps a better idea would be to break the image up into 4 parts and position them around the video container, like the 4 sides of a picture frame.