Inserting Flash on Layer
Hi there,
I am making a site for a friend, and have been working with CSS. I want to have a logo on the top corner of the page with some simple links running horizontally. Anyways, this is not the problem. I have set up the site's basic layout, however, in the content portion of the site, I want to have a flash movie play beneath the logo. I have tried a number of things with z-index etc. but it has not worked. I am not sure what to do next. I would love if someone could help me make the right adjustments.
Thanks for your help,
Greg
-----------
Here's the HTML for the page and the CSS content is below that:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vida Doce Chocolates</title>
<!--Stylesheet attached -->
<link href="css_scripts/vida_doce.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div align="center">
<!--Wrapper for the Site -->
<div id="wrapper">
<!--Site Header -->
<div id="header"></div>
<!--Site Navbar -->
<div id="navbar">
| <a href="index.html" class="nav_buttons">MAIN </a> | <a href="creations.html" class="nav_buttons">CREATIONS</a> | <a href="contact.html" class="nav_buttons">CONTACT</a> | </div>
<!--Site Content -->
<div id="content">
<div align="center">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','780','height','305','align','left','title','aaa','src','images/flash_files/aaa','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/flash_files/aaa' ); //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="780" height="305" align="left" title="aaa">
<param name="movie" value="images/flash_files/aaa.swf" />
<param name="quality" value="high" />
<embed src="images/flash_files/aaa.swf" width="780" height="305" align="left" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
</object>
</noscript>
</div>
</div>
<!--Site Footer -->
<div id="footer">
<!--Insert Email -->
<div id="email_address"><a href="mailto:vidadoce@mountaincable.net">vidadoce@mountaincable.net</a></div>
<div id="phone_number">905-765-0488</div>
</div >
</div>
</div>
</body>
</html>
CSS Content
Code:
@charset "utf-8";
/* CSS Document */
body {
text-align: center;
background-image:url(../images/backgrounds/vida_brown_stripe.gif);
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#c90;
margin:0
}
#wrapper {
position:absolute;
left: 50%;
top: 50%;
width: 780px;
height: auto;
margin-top: -200px; /* half of the height */
margin-left: -390px; /* half of the width */
}
#header {
text-align:left;
background-image:url(../images/logo/vida_logo2.png);
background-repeat:no-repeat;
margin:0 0 0 -10px;
position:absolute;
z-index:9;
top:-33px;
left:-27px;
width: 378px;
height: 310px;
}
#navbar {
text-align:left;
color:#c90;
margin-left: 47%;
}
.nav_buttons {
padding-left:3px;
padding-right: 3px;
}
#content {
text-align:left;
height:305px;
border-style: solid none;
border-top-width:4px;
border-top-color: #c90;
background-color:#FFFFFF;
padding:10px;
z-index:1;
position:relative;
}
.blurb_main {
color:#630;
margin-top: 4%;
margin-left:47%;
margin-right:5%;
}
.blurb_contact {
color:#630;
margin-top: 2%;
margin-left:47%;
margin-right:5%;
}
#email_address{
width:50%;
color:c90;
text-align:left;
float:left;
}
#phone_number {
width:50%;
color:c90;
text-align:right;
float:left;
}
#footer {
text-align:left;
}
a:link { color: #c90; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none }
a:visited { color: #c90; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none }
a:hover { color: #fc0; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none }
a:active { color: #c90; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none }
Attached Files
____________________________
Greg White
http://www.prestigeinteractive.com
For some reason it won't let me attach a script...so...go here and download the swfobject script file. Save it to the scripts folder.
Put this link in your head section and remove the link to the AC_RunActiveContent.js.
Code:
<script type="text/javascript" src="scripts/swfobject.js"></script>
Remove
Code:
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','780','height','305','align','left','title','aaa','src','images/flash_files/aaa','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/flash_files/aaa' ); //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="780" height="305" align="left" title="aaa">
<param name="movie" value="images/flash_files/aaa.swf" />
<param name="quality" value="high" />
<embed src="images/flash_files/aaa.swf" width="780" height="305" align="left" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
</object>
</noscript>
Insert
Code:
<script type="text/javascript">
var so = new SWFObject("images/flash_files/aaa.swf", "AAA", "760", "305", "6", "");
so.addParam("quality", "high");
so.addParam("wmode", "transparent");
so.write("content");
</script>
I just checked IE6 and the background png is not transparent like FF and IE7.
But the above code works in FF and IE7 and the png show as being transparent.
Last edited by sticks464; 10-30-2007 at 12:30 PM .
I just had a chance to check the background png. It is a png-32 which will not work in IE 6 or earlier (only 7 recognizes the png-24 or 32 format). I saved it as a png-8, the edges are ragged but it will work in IE6 and 5.5. You might try saving it as a transparent gif but I don't think it will look as good as the png.
Flash and CSS - placing on a layer
Hey there,
Thanks for the help so far. It is so close to working. I have it working in FireFox, however, IE crashes as soon as it loads. I am not sure why that is occurring. I downloaded the js file you mentioned and placed it in my scripts folder. I referenced the link to the js file in the head. I altered the SWF script as per your request, but now it crashes IE.
I would love to hear your suggestions, as this is now beyond my understanding. I usually need to see something working to figure it out and apply it later.
Thanks again,
G
____________________________
Greg White
http://www.prestigeinteractive.com
Your code should look like this
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vida Doce Chocolates</title>
<!--Stylesheet attached -->
<link href="css_scripts/vida_doce.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/swfobject.js"></script>
</head>
<body>
<div align="center">
<!--Wrapper for the Site -->
<div id="wrapper">
<!--Site Header -->
<div id="header"></div>
<!--Site Navbar -->
<div id="navbar">
| <a href="index.html" class="nav_buttons">MAIN </a> | <a href="creations.html" class="nav_buttons">CREATIONS</a> | <a href="contact.html" class="nav_buttons">CONTACT</a> | </div>
<!--Site Content -->
<div id="content">
<div align="center"></div>
<script type="text/javascript">
var so = new SWFObject("images/flash_files/aaa.swf", "AAA", "760", "305", "6", "");
so.addParam("quality", "high");
so.addParam("wmode", "transparent");
so.write("content");
</script>
</div>
<!--Site Footer -->
<div id="footer">
<!--Insert Email -->
<div id="email_address"><a href="mailto:vidadoce@mountaincable.net">vidadoce@mountaincable.net</a></div>
<div id="phone_number">905-765-0488</div>
</div >
</div>
</div>
</body>
</html>
Don't know why it would crash IE. I tested it in IE7, 6 and 5.5.
It's working...
Hey there,
You are the most helpful person I have come across in a long time.
I tried to find where the code was messed up...but couldn't find it.
Thanks for your time. It is greatly appreciated.
Have a great day,
G
____________________________
Greg White
http://www.prestigeinteractive.com
Posting Permissions
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Click Here to Expand Forum to Full Width