1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

inserting a flash movie

         

EvulDeeds

3:07 am on Mar 10, 2011 (gmt 0)

10+ Year Member



Hello guys,

My current webdesign is using a .jpg for a banner... Basicly i wanna change it to a .swf file...

Currently i have one page the index, And 5 .css files. (also i tried adding javascript already but im failing..)
Basicly i want to change hdr_pic.jpg to hdr_pic.swf but it's not that simple...

Any help would be greatly appreciated!

Here is how it looks now...:

Index.html:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome - Example.com</title>
<link href="css/base.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<!--navigation -->
<div class="container_16">
<div class="grid_16 navbg">
<ul class="navlink">
<li class="active" title="Home">Home</li>
<li><a href="about.html" title="About">About</a></li>
<li><a href="#" title="Service">Portfolio</a></li>
<li><a href="#" title="Solution">Solution</a></li>
<li class="nodivider"><a href="#" title="Contact">Contact</a></li>
</ul>
</div>
</div>

<!--navigation -->
<!--header -->
<div class="container_16">
<div class="grid_16 hdrbg">
<a href="index.html"><img src="images/logo.png" alt="example.com" border="0" class="logo" title="example.com"/></a>

<h1><br/>
Always wanted to live in paradise?</h1>
</div>
</div>

<!--header -->
<!--body -->
<div class="container_16">
<div class="grid_16" id="body">
<div class="grid_6 alpha">
<!--left panel -->
<div id="lftPan">
<h2 class="service">Our services</h2>
<p class="genareted"></p>
<div class="clear"></div>
<p class="pic">&nbsp;</p>
<ul class="numberLink">
<li><span>01</span>Verzin iets leuks</li>
<li><span>02</span>Verzin iets leuks</li>
<li><span>03</span>Verzin iets leuks</li>
</ul>
</div>
<!--left panel -->
</div>
<div class="grid_10 omega">
<h2>Know about our business</h2>
<p class="vero">Zoiets als </p>
<p class="sedTxt">Dan hier
<span>Hier dan </span>
</p>
<a href="#" class="moreaTwo" title="more">more</a>
<div class="grid_5 alpha ">
<h2>Latest news</h2>
<p class="newsthumb">9<span>Mar</span></p>
<p class="many">Als je <a href="#" title="more" class="manyMore">more...</a></p>

<p class="newsthumb1">9<span>Mar</span></p>
<p class="many1">Blablabla Constructiepagina online blabla bouw nieuwe web...<a href="#" title="more" class="manyMore">more...</a></p><br/><br/><br/><br/>


</div>
</div>
</div>
</div>

<!--body -->
<!--footer -->
<div class="container_16">
<div class="grid_16" id="footer">

<ul class="footerlink">
<li><a href="index.html" title="Home">Home</a></li><li>|</li>
<li><a href="about.html" title=" About">About</a></li><li>|</li>
<li><a href="#" title="Service">Service</a></li><li>|</li>
<li><a href="#" title="Solution">Solution</a></li><li>|</li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>


<p class="clear">&nbsp;</p>
<p class="copyright">©Copyright All Rights Reserved.</p>
</div>
</div>
<!--footer -->
</body>
</html>


Base.css:
/* this calls the files for everything. see index.html */
@import url("reset.css");
@import url("960.css");
@import url("text.css");
@import url("master.css");


Reset.css:
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p, blockquote, pre,a,abbr,acronym,address,
big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike, strong,sub,sup,tt,var,b,u,i,center,dl, dt,dd,ol,ul,li, fieldset,form, label,legend,table,caption,tbody,tfoot, thead,tr,th,td{margin:0;padding:0;
border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';
content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}
table{border-collapse:collapse;border-spacing:0}


960.css:
.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}

.grid_1,.grid_2,.grid_3,.grid_4,.grid_5, .grid_6, .grid_7, .grid_8, .grid_9,.grid_10,.grid_11,.grid_12,
.grid_13, .grid_14, .grid_15, .grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}

.container_12 .grid_3,.container_16 .grid_4{width:220px}

.container_12 .grid_6,.container_16 .grid_8{width:460px}

.container_12 .grid_9,.container_16 .grid_12{width:700px}

.container_12 .grid_12,.container_16 .grid_16{width:940px}

.alpha{margin-left:0}

.omega{margin-right:0}

.container_12 .grid_1{width:60px}

.container_12 .grid_2{width:140px}

.container_12 .grid_4{width:300px}

.container_12 .grid_5{width:380px}

.container_12 .grid_7{width:540px}

.container_12 .grid_8{width:620px}

.container_12 .grid_10{width:780px}

.container_12 .grid_11{width:860px}

.container_16 .grid_1{width:40px}

.container_16 .grid_2{width:100px}

.container_16 .grid_3{width:160px}

.container_16 .grid_5{width:280px}

.container_16 .grid_6{width:340px}

.container_16 .grid_7{width:400px}

.container_16 .grid_9{width:520px}

.container_16 .grid_10{width:580px}

.container_16 .grid_11{width:640px}

.container_16 .grid_13{width:760px}

.container_16 .grid_14{width:820px}

.container_16 .grid_15{width:880px}.

container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}

.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}

.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}

.container_12 .prefix_1{padding-left:80px}

.container_12 .prefix_2{padding-left:160px}

.container_12 .prefix_4{padding-left:320px}

.container_12 .prefix_5{padding-left:400px}

.container_12 .prefix_7{padding-left:560px}

.container_12 .prefix_8{padding-left:640px}

.container_12 .prefix_10{padding-left:800px}

.container_12 .prefix_11{padding-left:880px}

.container_16 .prefix_1{padding-left:60px}

.container_16 .prefix_2{padding-left:120px}

.container_16 .prefix_3{padding-left:180px}

.container_16 .prefix_5{padding-left:300px}

.container_16 .prefix_6{padding-left:360px}

.container_16 .prefix_7{padding-left:420px}

.container_16 .prefix_9{padding-left:540px}

.container_16 .prefix_10{padding-left:600px}

.container_16 .prefix_11{padding-left:660px}

.container_16 .prefix_13{padding-left:780px}

.container_16 .prefix_14{padding-left:840px}

.container_16 .prefix_15{padding-left:900px}

.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}

.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}

.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}

.container_12 .suffix_1{padding-right:80px}

.container_12 .suffix_2{padding-right:160px}

.container_12 .suffix_4{padding-right:320px}

.container_12 .suffix_5{padding-right:400px}

.container_12 .suffix_7{padding-right:560px}

.container_12 .suffix_8{padding-right:640px}

.container_12 .suffix_10{padding-right:800px}

.container_12 .suffix_11{padding-right:880px}

.container_16 .suffix_1{padding-right:60px}

.container_16 .suffix_2{padding-right:120px}

.container_16 .suffix_3{padding-right:180px}

.container_16 .suffix_5{padding-right:300px}

.container_16 .suffix_6{padding-right:360px}

.container_16 .suffix_7{padding-right:420px}

.container_16 .suffix_9{padding-right:540px}

.container_16 .suffix_10{padding-right:600px}

.container_16 .suffix_11{padding-right:660px}

.container_16 .suffix_13{padding-right:780px}

.container_16 .suffix_14{padding-right:840px}

.container_16 .suffix_15{padding-right:900px}

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}

.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0}

.clearfix{display:inline-block}

* html .clearfix{height:1%}

.clearfix{display:block}


text.css:

body{font:12px/1.5 Arial, Helvetica, sans-serif; color:#878585;}

a:focus{outline:1px dotted invert}

hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0}

h1{font-size:25px}

h2{font-size:23px}

h3{font-size:21px}

h4{font-size:19px}

h5{font-size:17px}

h6{font-size:15px}

ol{list-style:decimal}

ul{list-style:square}

li{margin-left:30px}

p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:20px}


And this is the file i think needs attention...
master.css:
/* this is the master css we will use for styling */

body{
margin:0;
padding:0;
}
p, ul, li, a, h1, h2, h3, h4, div, form, label, input{
padding:0;
margin:0;
}
img{
padding:0;
margin:0;
border:none;
display:block;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
p{
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#181B0E;
background-color:inherit;
}
/*-------------------------------------navigation----------------------------*/
.navbg{
background:url(../images/nav_bg.gif) repeat-x 0 0;
height:39px;
}
ul.navlink{
padding:0 0 0 187px;
margin:0;
}
ul.navlink li{
float:left;
background:url(../images/divider.gif) no-repeat right 0;
padding:0 38px;
width:auto;
}
ul.navlink li.active{
color:#C33305;
background-color:inherit;
font-weight:bold;
padding:0 38px;
display:block;
line-height:39px;
}
ul.navlink li.nodivider{
background-image:none;
}
ul.navlink li a{
color:#fff;
background-color:inherit;
font-weight:bold;
line-height:39px;
}
ul.navlink li a:hover{
color:#C33305;
background-color:inherit;
}

/*--------------------------------------header------------------------------------*/
#hdr{
background:url(../images/hdr_bg.gif) repeat-x 0 0;
height:253px;
}
.hdrBg{
height:254px;
background-image: url(../images/hdr_pic.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
img.logo{
margin:37px 0 31px 20px;
}
h1{
font:normal 20px/22px Georgia, "Times New Roman", Times, serif;
color:#093;
padding:0 0 16px 20px;
}
h1 span{
display:block;
font-size:12px;
line-height:18px;
color:#6D5B0F;
background-color:inherit;
width:320px;
padding-top:5px;
}
a.readmore{
background:url(../images/more_butt.gif) no-repeat 0 0;
width:80px;
line-height:20px;
font-weight:bold;
color:#fff;
background-color:inherit;
text-align:center;
float:left;
margin-left:20px;
}
a.readmore:hover{
color:#000;
background-color:inherit;
}
.bg{
background-color:#000;
color:inherit;
}
/*--------------------------------body--------------------------------------*/
#body{
background-color:#EEEEEE;
color:inherit;
border-top:solid 1px #fff;
padding:30px 0;
}

/*---------------------------------left panel-------------------------------------*/
#lftPan{
padding:0 19px 0 20px;
}
/*------------------------------form one-----------------------------*/
form.one{
border:solid 1px #D0CECE;
background-color:#fff;
color:inherit;
padding:15px 15px 13px 19px;
}
p.member{
font-size:24px;
line-height:29px;
color:#30331F;
background-color:inherit;

}
label{
line-height:20px;
color:#30331F;
background-color:inherit;
width:80px;
float:left;
padding-top:11px;
}
input.txtfield{
border:solid 1px #D7D6D6;
background-color:#fff;
color:#000;
float:left;
width:181px;
height:18px;
margin:11px 0 0 0;
}
p.forgot{
background:url(../images/forgot_thumb.gif) no-repeat 0 50%;
line-height:16px;
float:left;
width:auto;
padding:0 0 0 15px;
margin-top:15px;
}
p.forgot a{
color:#CE6712;
background-color:inherit;
font-weight:bold;
}
p.forgot a:hover{
text-decoration:underline;
}
input.login{
background:url(../images/login.gif) no-repeat 0 0;
width:48px;
height:20px;
cursor:pointer;
border:none;
float:right;
margin-top:14px;
}
h2{
font-size:24px;
line-height:30px;
color:#31331F;
background-color:inherit;
font-weight:normal;
}
h2.service{
padding:23px 0 14px 0;
}
p.genareted{
color:#CE6712;
background-color:inherit;
line-height:15px;
font-weight:bold;
padding-bottom:13px;

}
p.pic{
background:url(../images/pic1.png) no-repeat 0 0;
width:301px;
height:124px;
}

ul.numberLink{
padding:18px 0 0 0;
margin:0;
}

ul.numberLink li {
color:#165575;
background-color:inherit;
font-size:12px;
width:301px;
margin:0;
height:58px;
padding:0;
font-weight:bold;

}
ul.numberLink li span{
background:url(../images/round_bullet.gif) no-repeat 0 0;
font-size:18px;
line-height:39px;
color:#fff;
background-color:inherit;
width:40px;
display:block;
text-align:center;
float:left;
padding-right:15px;
}

/*-----------------------------right panel-------------------------------------*/
p.vero{
line-height:18px;
color:#fff;
font-weight:bold;
width:560px;
background-color:#666;
text-align:center;
margin-top:10px;
}
p.sedTxt{
color:#CE6712;
background-color:inherit;
font-weight:bold;
width:560px;
padding:12px 0 15px 0;
}
p.sedTxt span{
display:block;
color:#181B0E;
background-color:inherit;
font-weight:normal;
}
a.moreaTwo{
background:url(../images/more_butt_two.gif) no-repeat 0 0;
width:56px;
line-height:20px;
font-weight:bold;
color:#fff;
background-color:inherit;
text-align:center;
display:block;
margin-bottom:29px;
}
a.moreaTwo:hover{
color:#000;
background-color:inherit;
}
p.loremtxt{
color:#D35C10;
background-color:inherit;
font-weight:bold;
padding:12px 0 9px 0;
}
p.newsthumb {
background:url(../images/news_thumb.gif) no-repeat 0 0;
width:38px;
height:50px;
line-height:25px;
color:#fff;
background-color:inherit;
text-align:center;
font-weight:bold;
float:left;
padding-right:11px;

}
p.newsthumb span{
display:block;
}
p.many {
color:#131506;
background-color:inherit;
line-height:18px;
padding:0 0 0 11px;
}
a.manyMore{
color:#165575;
background-color:inherit;
font-size:12px;
font-weight:bold;
line-height:18px;
}
a.manyMore:hover{
color:#D35C10;
background-color:inherit;
}

p.newsthumb1 {
background:url(../images/news_thumb.gif) no-repeat 0 0;
width:38px;
height:50px;
line-height:25px;
color:#fff;
background-color:inherit;
text-align:center;
font-weight:bold;
float:left;
padding-right:11px;
margin-top:18px;
}
p.newsthumb1 span{
display:block;
}
p.many1 {
color:#131506;
background-color:inherit;
line-height:18px;
padding:17px 0 0 11px;
}
a.manyMore1{
color:#165575;
background-color:inherit;
font-size:12px;
font-weight:bold;
line-height:18px;
}
a.manyMore1:hover{
color:#D35C10;
background-color:inherit;
}
.company{
width:256px;
}
p.manyTwo{
border:solid 1px #D8D8D8;
background:url(../images/many_bg.gif) repeat-x 0 0 #C9D8DD;
float:left;
color:#30331F;
padding:4px 25px 6px 9px;
display:block;
margin-bottom:7px;
width:auto;
}
p.manyTwo a{
color:#30331F;
background-color:inherit;
text-decoration:underline;
}
p.manyTwo a:hover{
text-decoration:none;
}
p.virgina{
color:#165575;
background-color:inherit;
font-weight:bold;
padding-bottom:25px;
}
.block{
background:url(../images/baner.jpg) no-repeat 0 0;
width:560px;
height:125px;
}
p.baner{
font-size:36px;
line-height:46px;
color:#C4EE4E;
background-color:inherit;
font-weight:bold;
padding:18px 0 0 79px;
}
p.baner span{
display:block;
color:#FAFFBD;
background-color:inherit;
font-size:12px;
line-height:18px;
}
a.details{
background:url(../images/details_butt.gif) no-repeat 0 0;
width:68px;
line-height:20px;
text-align:center;
color:#30331F;
background-color:inherit;
display:block;
font-size:12px;
margin:9px 0 0 167px;

}
a.details:hover{
color:#fff;
background-color:inherit;
}

/*--------------------------------ABOUT US-----------------------------------*/
p.aboutTxt{
color:#D35C10;
background-color:inherit;
font-weight:bold;
}
p.istTxt{
padding:15px 0 23px 0;
width:560px;
}
p.Sydney {
color:#D35C10;
background-color:inherit;
font-weight:bold;
width:540px;
}
ul.aboutlink{
padding:17px 0 0 0;
margin:0;
}
ul.aboutlink li{
background:url(../images/black_arrow.gif) no-repeat 0 50%;
padding-left:15px;
}
ul.aboutlink li a{
color:#181B0E;
background-color:inherit;
font-size:12px;
line-height:18px;
font-weight:bold;
}
ul.aboutlink li a:hover{
text-decoration:underline;
}
/*------------------------------footer-------------------------------*/
#footer{
background:url(../images/footer_bg.gif) repeat-x 0 0;
height:97px;
}

ul.footerlink{
padding:21px 0 0 259px;
margin:0;
}
ul.footerlink li{
float:left;
padding:0 13px;
width:auto;
color:#C6E260;
background-color:inherit;
font-size:12px;
line-height:16px;
}
ul.footerlink li a{
color:#C6E260;
background-color:inherit;

}
ul.footerlink li a:hover{
color:#fff;
background-color:inherit;
}


p.copyright{
text-align:center;
color:#fff;
background-color:inherit;
font-size:12px;
line-height:18px;
padding:14px 0 0 0;
}
p.copyright span{
display:block;
}
p.copyright span a{
color:#C6E260;
background-color:inherit;
text-decoration:underline;
}
p.copyright span a:hover{
text-decoration:none;
}

[edited by: tedster at 6:49 am (utc) on Mar 10, 2011]

[edited by: alt131 at 2:37 pm (utc) on Jul 23, 2011]
[edit reason] Side-scroll, examplifying [/edit]

tedster

6:48 am on Mar 10, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hello EvulDeeds, and welcome to the forums.

Wow - we really didn't need all that code. It makes it hard to get anyone to give you free help when they need to plow through code that doesn't matter. For the future, there's a thread called Guide to Posting HTML and CSS [webmasterworld.com] that offers help for how to discuss your questions by using verbal descriptions and SHORT snippets of code. That thread is pinned to the top of the CSS forum's index page for easy reference.

Now on to your question.

The problem I see is that your jpg image is being displayed as a background image for the div with class .hdrBg.

But for a Flash movie, you'll need to be straightforward and just place the elements inline, rather than display it as a background.

EvulDeeds

3:10 pm on Mar 10, 2011 (gmt 0)

10+ Year Member



So please tell this noob how to alter it lol

How do i do what you just said?

tedster

4:19 am on Mar 11, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Remove that div (.hdrBg) in your HTML and replace it with a straightforward Flash object. The relevant section of your HTML seems to be here.

<div class="container_16">
<div class="grid_16 hdrbg">
<a href="index.html"><img src="images/logo.png" alt="example.com" border="0" class="logo" title="example.com"/></a>

<h1><br/>
Always wanted to live in paradise?</h1>
</div>
</div>

I like to use the swfObject approach for Flash. Google Code has their own project for swfObject available here: [code.google.com...]

It also looks like there's more going on in that part of the design than just the jpg you want to switch out for flash, so you probably have some "homework" to do - at least some trial and error experimenting to get the full design effect that you are aiming for.

You;ve described yourself as a "noob", so I guess you didn't write the original code. Playing with it yourself is a good way (maybe the only way) to graduate from noob-dom.

[edited by: alt131 at 2:38 pm (utc) on Jul 23, 2011]
[edit reason] Thread Tidy [/edit]

EvulDeeds

1:34 am on Mar 11, 2011 (gmt 0)

10+ Year Member



< moved from another location >

My header is failing (flash)

Hello... I need some help setting my logo and text over my flashbanner again.
It used to be a picture background in css

First it looked like this: 


<!--header --> 
<div class="container_16"> 
<div class="grid_16 hdrbg"> 
<a href="index.html"><img src="images/logo.png" alt="example.com" border="0" class="logo" title="example.com"/></a> 

<h1><br/> 
Always wanted to live in paradise?</h1> 
</div> 
</div> 

<!--header -->


And now it looks like this: 

<!--header -->
<div class="container_16">
<div class="grid_16">
 <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css" media="screen">#FlashID {visibility:hidden}</style></head><body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="940" height="254" id="FlashID" title="example Header" style="visibility: inherit; ">
 <param name="movie" value="images/hdr_pic.swf">
 <param name="quality" value="high">
 <param name="wmode" value="opaque">
 <param name="swfversion" value="6.0.65.0">
 <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don't want users to see the prompt. -->
 <param name="expressinstall" value="Scripts/expressInstall.swf">
 <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
 <!--[if !IE]>-->
 <object type="application/x-shockwave-flash" data="images/hdr_pic.swf" width="940" height="254">
 <!--<![endif]-->
 <param name="quality" value="high">
 <param name="wmode" value="opaque">
 <param name="swfversion" value="6.0.65.0">
 <param name="expressinstall" value="Scripts/expressInstall.swf">
 <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
 <div>
 <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
 <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33"></a></p>

 <a href="index.html"><img src="images/logo.png" alt="example.com" border="0" class="logo" title="example.com"/></a> <h1><br/>
 Always wanted to live in paradise?</h1>
 </div>
 
 <script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
 

 <!--[if !IE]>-->
 </object>
 <!--<![endif]-->
</object>

 </div>
</div>

<!--header -->


Flash banner shows real nice... Problem is i cannot see my logo and text any more :/

Can someone please help me fix this?

[edited by: tedster at 4:32 am (utc) on Mar 11, 2011]

[edited by: alt131 at 2:40 pm (utc) on Jul 23, 2011]
[edit reason] Thread Tidy [/edit]

EvulDeeds

10:16 pm on Mar 11, 2011 (gmt 0)

10+ Year Member



Please... anyone? I cant seem to figure it out alone and for all i know this musn't be that hard...

tedster

4:42 am on Mar 12, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



With that code? it's not only hard - it's darned near impossible. It's not written by a human being, so it's pretty inscrutable. The main issue I see is that your logo and text aren't even in the code anymore:

original:
<div class="grid_16 hdrbg">
<a href="index.html"><img src="images/logo.png" alt="example.com" border="0" class="logo" title="example.com"/></a>

<h1><br/>
Always wanted to live in paradise?</h1>
</div>

You've got to have those two red elements in the code to get them to display. Looks like originally they displayed on top of the jpg background image. Do you now want them to display superimposed on top of the Flash movie? If so, you may need to re-think the approach to coding that whole area of the page.

[edited by: alt131 at 2:40 pm (utc) on Jul 23, 2011]
[edit reason] Thread Tidy [/edit]

EvulDeeds

5:25 pm on Mar 12, 2011 (gmt 0)

10+ Year Member



That's exactly what i want to do yeah, only i dont know what to take out and put back

tedster

5:38 pm on Mar 12, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It sounds like you are trying to put a layer of text and image content on top of a flash movie. Bad news, that's not possible. Flash movies are always placed on top of the stack of elements and the z-index position will have no affect.

Your only alternatives are 1) place the image and text within the movie itself, or 2) rethink your page design.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026