I have created a page using html & css which has an image over the entire background, and I am trying to lay a swf movie over the background pic using dreamweaver. When I insert the movie it drops it below ( at the bottom of the page ) rather than overlaying it on top of the background image. how can I reposition it?
please help
html:
<!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" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="scrollbar.css" />
<title>website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="imageholder2"><img src="pics/Backgroundblank.jpg" width="800" height="600" border="0" usemap="#buttons"/>
<map name="buttons" id="buttons">
<area shape="rect" coords="328,77,398,90" href="index.html" target="_self" alt="shows" />
<area shape="rect" coords="421,78,484,89" href="music.html" target="_self" alt="music" />
<area shape="rect" coords="506,78,563,90" href="biog.html" target="_self" alt="band" />
<area shape="rect" coords="586,79,682,89" href="gallery.html" target="_self" alt="gallery" />
<area shape="rect" coords="705,78,768,89" href="links.html" target="_self" alt="links" />
</map>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','800','height','450','src','randomAs2','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','randomAs2' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="450">
<param name="movie" value="../Ghost Town Showdown/randomAs2.swf" />
<param name="quality" value="high" />
<embed src="randomAs2.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="450"></embed>
</object>
</noscript>
</body>
</div>
</html>
css:
@charset "utf-8";
body{
margin: 0px;
colour: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif; /*or any other font family you prefer*/
font-size: 12px;
background-color: #000000;
background-repeat: no-repeat;
}
/* CSS Document */
#container {
margin: 0 auto;
width: 800px;
position: relative;
top: 15px;
bottom:15px
}
#imageholder{ /*This will be the holder which will hold our page image(i.e. coffee.jpg) */
position:absolute;
width:800px; /*Width of Image*/
height:5600px; /*Height of Image*/
left:376px; /* This is applied relative to edge of container */
top:0px;
background-image: url(backgroundfull.jpg);
}
#imageholder2{ /*This will be the holder which will hold our page image(i.e. coffee.jpg) */
position:absolute;
width:800px; /*Width of Image*/
height:5600px; /*Height of Image*/
left:376px; /* This is applied relative to edge of container */
top:0px;
background-image: url(pics/backgroundblank.jpg);
background-color: #000000;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
z-index: 1;
}
#links
{
color:#660000;
}
.darkblue A:link{
color:#660000
}
.darkblue A:visited{
color:#990000
}
.darkblue A:active{
color:#000099
}
#navbar {
position: absolute;
top: 250px;
left: 400px;
z-index: 1;
}
#scrollbarbox {
top: 130px;
left: 410px;
height: 400px;
width: 300px;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
position: absolute;
color: #660000;
padding-right: 12px;
}
#scrollbarbox2 {
top: 130px;
left: 150px;
height: 395px;
width: 490px;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
position: absolute;
color: #660000;
padding-right: 18px;
}
#textbox {
position: absolute;
top: 505px;
left: 75px;
height: auto;
width: 200px;
color: #660000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
text-align: center;
}