Z-Index Layers

HI
I have a flash movie and I need to cover a portion of it with
a HTML Layer (specifically using Dreamweaver layers.
I have tried adjusting the Z-Index, but the Flash movie
always ends up on top of the layer.
How do I force Flash NOT to be the top layer?
Thanks
Rowby

Marghoob Sulemaan is right. But only use the transparent
wmode if you need transparency (like rounded borders or see
through) as it is more CPU intensive. Otherwise, use the opaque
wmode if you only want to display layers on top of Flash (check
adobe.com HTML source on any page with Flash).
If you still have problems (namely, with IE6), you can put
the SWF in a container layer, hide it (visibility: hidden) at the
beginning then show it after a short while (visibility: visible).
Best regards,
Karl Sigiscar.

Similar Messages

Z-Index layering in Firefox?

Hey All...
Newbie on this board, looking for someone who can help me out with some layering issues I have on this page (there are other pages, but this one will be easy to understand.
http://www.syrup.doralevich.com/page72.html
here's my issue. This page has a lightbox and a cart for adding products to it, they aren't playing nicely in Firefox. if you click on the image, the picture appears in a lightbox, although behind the Flash show "Syrup" covering up the image.
If you add an item to the cart (top of page) and then Show Cart, you'll also notice that the cart comes down but again, behind the Flash show "Syrup"
When using my Mac, it works fine in all 3 browsers.
I added this piece of code, which made it wokr in IE 7 and 8 on a PC
<PARAM NAME="wmode" value="opaque" />
The only browser that I can tell that isn't wokring correctly is Firefox (I'm using 3.5.7).
Is there any way that this can be fixed? Here is the code that gives me that effect:
<center><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" WIDTH="550" HEIGHT="160">
<PARAM NAME=movie VALUE="http://www.syrupclothingny.com/warehouse/Syrup Splash600.swf">
<PARAM NAME=quality VALUE="high">
<PARAM NAME="wmode" value="opaque" />
<EMBED src="http://www.syrupclothingny.com/warehouse/Syrup Splash600.swf" quality="high" WIDTH="550" HEIGHT="160" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT></center>
And attached is a screenshot showing how it covers up the cart/picture.
Thank you very much for your help.
David

Hi SnakEyez02
Thank you for your reply.
After I posted my question yesterday I ran across an article on Adobes site explaining about wmode.
I realized that my lower div on the pages that displayed wrong all had flash content, and the article says that flash content always display in the top layer regardless of z-index given.
http://kb2.adobe.com/cps/142/tn_14201.html
But if you assign a wmode in parameters of either transparent or opaque you can layer the flash with dhtml. I did this after my post and now the menu displays right in both IE and Firefox!
So you were looking at the already altered code.
I will still clean up the things you mentioned. But thank you very much for your quick reply.
Sincerely,
G Gaarde

Z Index, layering images, need help (going crazy!)

Need some help on layering images. As you can see, the "polaroid" has tape on it - I want that tape to overlap the menu bar.
The menu bar is a grapic (there is a slight gradient to it) and on top of it are the actual menu graphics. If I remove the menu graphics, the photo overlaps fine. But if I insert the menu graphics, they lie on top of the polaroid. Thanks in advance for any help you can provide.
Gary
Here is the code for the page:
<h1>SanDiegoHomegrown.com</h1>
<img src="images/menuBar.gif" />
<ul id="menuBar">
   <li id="listen"><a href="songs.html">Listen</a></li>
<li id="submit"><a href="submit.html">Submit Songs</a></li>
<li id="seals"><a href="seals.html">Help the Seals</a></li>
<li id="about"><a href="about.html">Our Story?</a></li>
<li id="sponsors"><a href="sponsors.html">Sponsors</a></li>
</ul>
<div id="polaroid">
<img src="images/band2_polaroid.png" width="280" height="354" />
</div>
Here is the CSS:
#polaroid {
    height: 354px;
    width: 280px;
    padding-left: 50px;
    margin-top: -40px;
#menuBar {
    height: 30px;
    width: 960px;
    padding: 0px;
    font-family: "Courier New", Courier, monospace;
    list-style-type: none;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    margin-top: -30px;
#menuBar a {
    width: 175px;
    display: inline-block;
    color: #2F3032;
    text-align: left;
    vertical-align: 0%;
    margin: 0px;
    list-style-type: none;
    float: left;
    height: 35px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    text-indent: -9999px;
#menuBar #listen {
    background-repeat: no-repeat;
    position: absolute;
    background-image: url(images/titles/listen_bar_orig.gif);
#menuBar #submit {
    background-image: url(images/titles/submit_bar_orig.gif);
    background-repeat: no-repeat;
    position: absolute;
    margin-left: 150px;
    width: 200px;
    z-index: 1;
#menuBar #seals {
    background-image: url(images/titles/seals_bar_orig.gif);
    background-repeat: no-repeat;
    position: absolute;
    margin-left: 375px;
    width: 225px;
#menuBar #about {
    background-image: url(images/titles/about_bar_orig.gif);
    background-repeat: no-repeat;
    position: absolute;
    margin-left: 625px;
#menuBar #sponsors {
    background-image: url(images/titles/sponsor_bar_orig.gif);
    background-repeat: no-repeat;
    position: absolute;
    margin-left: 800px;

Auggh, just figured it out. The Polaroid needed to be relative positioning!

After fixing z-index layers lost container color and footer

I fixed the layers, but lost the container background and footer. The editable text box within the footer for credits shows up at the top. Here's what I had http://www.jewishstorytelling.org/JSC/index.html , and then I'll put the revised css and code below (not the most elegant). Thoughts would be appreciated!
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #0254A6;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
#header {
background: #FFFFFF;
padding: 0;
position: absolute;
z-index: 1;
#menu01, #menu02, #menu03, #menu04, #menu05, #menu06, #menu07 {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.6em;
padding-bottom: 8px;
text-transform: uppercase;
text-align: center;
position:absolute;
z-index: 10;
.menuHome {
margin: 125px 0 0 49px;
.menuAbout {
margin: 160px 0 0 126px;
.menuDir {
margin: 114px 0 0 191px;
.menuStory {
margin: 160px 0 0 342px;
.menuBiblio {
margin: 114px 0 0 410px;
.menuBlog {
margin: 160px 0 0 527px;
.menuContact {
margin: 124px 0 0 594px;
#mainContent {
margin: 220px 130px 50px 121px;
padding: 0px 0 30px 0;
text-align: left;
position:absolute;
z-index: 20;
#mainContent h1 {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 1.1em;
font-weight: bold;
color: #039;
line-height: 1.2em;
padding-bottom: 0em;
margin-top: 2.6em;
#mainContent p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.9em;
line-height: 1.3em;
list-style: square outside;
margin-top: 0.4em;
#mainContent ul li {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.9em;
padding: 0px 0 0;
line-height: 1.3em;
margin: 0 30px 0 0px;
list-style: disc outside;
.photo {
padding-right: 12px;
padding-bottom: 3px;
margin-top: 0.65em;
#mainContent #innerContent1 p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
padding: 0px;
margin-top: 0px;
line-height: 1.3em;
#footer {
padding: 0 10px;
background:#FFC;
margin-top: 20px;
z-index: 40;
#footer p {
margin: 0;
padding: 10px 0 0 121px;
font-size: 0.6em;
text-align: left;
a:link {
color: #039;
text-decoration: none;
font-weight: normal;
a:visited {
text-decoration: none;
color: #093;
font-weight: normal;
a:hover {
color: 4cB0E8;
text-decoration: none;
font-weight: normal;
.bodytextindent {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.9em;
line-height: 1.3em;
list-style: square outside;
text-align: left;
margin-left: 50px;
margin-top: 0em;
margin-right: 50px;
<html>
<head>

<title>Jewish Storytelling Coalition</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../jsc.css" rel="stylesheet" type="text/css">


</head>
<body class="main">
<div id="container">
<div id="header"><img src="../images/head_780px_02.png" width="780" height="329" alt="Jewish Storytelling Coalition"></div>

<div class="menuHome" id="menu01" style="width:45px; height:17px;"> <a href="../index.html">HOME</a></div>
<div class="menuAbout" id="menu02" style="width:47px; height:21px;"> <a href="../about.html">About</a></div>
<div class="menuDir" id="menu03" style="width:121px; height:19px;"> <a href="../directory.html">DIRECTORY<br>
    of storytellers
</a></div>
<div class="menuStory" id="menu04" style="position:width:57px; height:17px;"> <A href="../story.html">
<br>STORY</a></div>
<div id="menu05" class="menuBlog" style="width:43px; height:14px;"> <a href="http://jscnews.blogspot.com/" target="_blank">BLOG</a></div>
<div class="menuContact" id="menu06" style="width:60px; height:17px;"> <a href="../contact.html">Contact</a></div>
<div class="menuBiblio" id="menu07" style="width:90px; height:26px;"> <a href="../biblio.html">ANNOTATED BIBLIOGRAPHY <br>
</a></div>
<div id="mainContent">
<h1>H1</h1>
<p>P Paragraph</p>
</div>
<div id="footer">
<p><a href="../index.html">HOME</a> | <a href="../about.html">ABOUT</a> | <a href="../directory.html">DIRECTORY</a> | <a href="../story.html">A STORY</a> | <a href="../biblio.html">BIBLIOGRAPHY</a> |<a href="http://jsceventlist.blogspot.com/" target="_blank"> BLOG</a> | <a href="../contact.html">CONTACT</a></p>
    <p>© 2009-2011 Jewish Storytelling Coalition. Web site design
              by <a href="http://blueirisdesign.com/index.html" target="_blank">Blue Iris Design</a>.</p>

     <p>credit</p>
</div>
</div>
</body>
</html>

You realize that the code you show below is for a Template page, not a child page, right? And you also realize that your layout method is going to be just a big problem for you because of your use of absolute positioning as a primary layout method, right? I'm just trying to make sure that you want to push ahead with what I consider a badly flawed approach....

Z-index layering moving images

Hi,
I am hoping someone can help me out! Basically I have an application to build that has a frame image (img1) with a transparent centre, an image (img2) within that centre area and another image (img3), the same size as img2, that hides in behind img2.
When a button is clicked, img2 will move up and reveal img3. When the button is clicked again img2 moves back down and covers over img3 again.
The problem is to do with the layering of the images. I want img2 to always lay over img3 so that when it is back down img3 is completely hidden. I am able to do all of this up to this point. The problem lies is that when img2 is moving up, I want it to move up in behind the top of the outer frame (img1), but all I can get is the image moving up over the top of the frame and not slotting in behind it.
I hope I have explained this clearly! Not so easy!
I tried the WipeUp effect, which was close to what I want, but the image winds up with the top of the image remaining until the last moment before it disappears. I want the image to roll all the way the way a window blind would so that you would always see the bottom of the image until it reached the top.
Does anyone have any ideas of how to do this?
Thank you so much in advance!

Would be great if someone from Adobe was on here yes!
I will give your suggestion a try later today, but I have a feeling that when I 'move' img2 up it somehow changes it's z-index. I also give the user the option to change the frame to a different style. Even though it stays staic on the screen (has no effects - all I do is change the source of the image), I think that changing the source of it also changes its z-index and brings it to the front.
Very frustrating. I'll let you know how I get on with your suggestion later - thanks for taking the time in trying to help me.

Simple z-index layering problem

I'm trying to overlay some text on top of an image. The
stacking order seems to work, but I can't position my text where I
want it–in the white box on the graphic below. It may be a
problem with my positioning attribute, but I'm not sure which one
to use (absolute, relative, inherit etc...) I've tried them all,
and none seem to work. Anyone have any suggestions?
And why does the positioning look fine in the design view in
Dreamweaver?
http://www.theeficlub.com/test/EFI_about_the_author.html
Thanks

Auggh, just figured it out. The Polaroid needed to be relative positioning!

Hyperlinks don't work, pause button on quicktime music doesn't work, help!

Hi,
This is my second time with I web, having created and maintained a site for 2 years I know a lot about the program. The thing that kills me with this program is that even when you think you do something right, there's a chance it just may not work!
My hyperlinks, for example (www.johndoing.com), don't seem work at all when I select "open in new window". In other words, the ones on the "calendar" page work fine because they don't open in a new window. The ones on the "what I do" page just don't work at all!!! I deleted them and re-linked them and re up-loaded them twice! I don't have any more time to spend on that part of the site!
Then there is the "home" page. "welcome" and "biography" are both hyperlinks if you see both:
http://www.johndoing.com/newestsite/welcome.html
and http://www.johndoing.com/newestsite/biography.html
You'll see what I mean. They work great in IWeb, there's nothing on top of them blocking them, and I'm at a total loss because they just don't work online.
The other big problem with the site is that none of the quick time music players work! If they are on autoplay, they can't pause, if they are not on autoplay, they can't play.
I'm very frustrated, I hope somebody can give me some advice.
I uploaded using "cyberduck", I have the latest version of Iweb and OSX...
Any help is appreciated, thanks,
JD
My url is www.johndoing.com .

because of z-index and the inconsistent way you added the black frame/stroke, see my post here:
http://discussions.apple.com/thread.jspa?messageID=7431333&#7431333
you need to add a text in the body_layer (as in the Sounds page), size it, add the stroke and send it to the back.
the qt play button works when you control click it, that's bypass z-index layering.

Why don't google links work?

Google search sometimes doesn't work.
Links from google search do not open.
This problem has existed since upgrade of foxfire 4. Java upgrade current also.

Actually, the first reply to another post of mine saying that the audio wasn't working:
because of z-index and the inconsistent way you added the black frame/stroke, see my post here:
http://discussions.apple.com/thread.jspa?messageID=7431333&#7431333
you need to add a text in the body_layer (as in the Sounds page), size it, add the stroke and send it to the back.
the qt play button works when you control click it, that's bypass z-index layering.

Why don't my links work?

www.johndoing.com
the words "welcome" and "biography" are both links, plus I linked to an article that doesn't work.
click on "what i do". None of the links work on that page.

Actually, the first reply to another post of mine saying that the audio wasn't working:
because of z-index and the inconsistent way you added the black frame/stroke, see my post here:
http://discussions.apple.com/thread.jspa?messageID=7431333&#7431333
you need to add a text in the body_layer (as in the Sounds page), size it, add the stroke and send it to the back.
the qt play button works when you control click it, that's bypass z-index layering.

Layering with z-index

Looking for some guidance on using z-index in my CSS to position the YouTube video on the home page of this site behind the drop down navigation. It is not a problem on my Mac (Firefox & Safari), where the layering is correct, but on my iPhone and my client's PC, the video is in front of the navigation.
http://www.simplycommunicating.ca
I have tried positioning with z-index, but seem not to be accomplishing this correctly. Any suggestions would be greatly appreciated!
Thank you

You need to position the z-index element for it to work. Recommend using absolute or relative as position:fixed doesn't work well on iPhones/iPads.
Z-Index guide
http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
Also, pre-IE8 browsers have a z-index bug you should be aware of.
http://jonathanstegall.com/2009/01/15/ie-z-index-bug-with-css-dropdown-menu/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Export layers to files change from index color?

Hello, can someone tell me how to change it where when I run the Export files to layers script in CS4 my pngs are saved as RGB instead of index color? My original PSD that I am running the script on is RGB and it's driving me crazy that it's saving my pngs as index! Any help would be great! Thanks!

You are a lifesaver! Thank you so much!

Z-index/depth to layers

I am recently working on a website with drop down menus. When I add another layer to the page, the drop down menus are below the new layer therefore hiding them to the user. I tried using the z-index numbers but they don't seem to be working. Any help would be greatly appreciated.
Thanks,
Tara

Tara, it's not possible to help without seeing your code. I can, however,
GUESS what might be happening. I'm thinking that the submenus (with their
z-index) are contained within a parent menu container (with its z-index).
When you have a nested situation like this, the descendent z-idices are all
only effective within the context of the parent z-index. In other words, if
the parent's z-index is 1, then a submenu with a z-index of 5000 will be
higher than any other submenu with a z-index less than 5000, but will still
only be considered to have a z-index of 1 vis-a-vis the page itself. Thus,
adjusting the submenu z-index values will only affect the behavior inside
the parent. To move the menu 'closer to the top', you'd have to adjust the
parent's z-index.
Make sense? It's completely hypothetical, though.
Murray

AP Divs (layers) move when I open my website on different window size.

First of all, this is my first time trying to make a website.
I'm doing an assignment for my class and i found it difficult for me to fix. I have spend 4-5 hours researching online but nothing work for me.
Well,the problem is the AP Divs (layers) move when I open my website on different window size(iphone,ipad).
The website only look right on 1366 x 786 resolution. Please take a look at my 2 pics below:
And I don't know how to make the website to fit on the iphone and ipad so that I don't have to scroll down or sroll to the right to view the whole thing.
Please someone help me!
The 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" />
    <meta name="viewport" content="width=device-width" />
<title>Boston Green Community College</title>
<style type="text/css">

</style></head>
<body>
<div class="container">
<div class="header"><a href="#"><img src="Pictures/34d-1.png" alt="Insert Logo Here" name="Insert_logo" width="619" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" />
    <div id="apDiv11"><font color="#f4f1f1">
<script type="text/javascript">
var d=new Date()
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
document.write(weekday[d.getDay()] + " ")
document.write(d.getDate() + ". ")
document.write(monthname[d.getMonth()] + " ")
document.write(d.getFullYear())
</script></font>
</div>
    <div id="apDiv1">


<form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
<input type="hidden" name="cref" value="" />
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="" />
<input name="q" type="text" size="40" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang="></script>
                              </div>
                                </div>
<div class="content">
    <center><img src="Pictures/DFDF11.png" width="959" height="556" longdesc="Pictures/junior-2-960x.jpg" /></h1></center>
</div>
<div class="footer">
     <img src="Pictures/RRR1.png" width="202" height="70" />
     <div id="apDiv3">
       <p> </p>
       <p><a href="Job.html">Jobs</a>         </p>
       <p><a href="Art Gallery.html">Art Gallery</a>         </p>
       <p><a href="Contact us.html">Contact Us </a></p>
    </div>
    <div id="apDiv4"><center>
<P>About</P>
<a href="visiting.html">visiting</a> | <a href="Map.html">maps </a>| <P><a href="About.html">about BGCC</a></P>
<P>Academic</P>
<P><a href="Courses.html">schools+courses</a></P>
<P>Admissions </P>
<P><a href="cost & aid basics.html">cost & aid basics </a>| <a href="Apply now.html">join BGCC</a>
<P>Studen Life</P>
<P><a href="Athletics.html">Athletics</a></P>
<P>Greenforce Education</P>
<P><a href="Career.html">career center</a></P>
</center> </div>
     <p><font size="2" color="black">BGCC | 99 GreenField | Boston, MA 02199 |617-0101-1000| TTY 617-0202-9944|</font></p>
    <div id="apDiv9"><a href="Donate.html" target="_blank"><a href="Donate.html"><img src="Pictures/three-green-logo.jpg" width="218" height="99" longdesc="Pictures/three-green-logo.jpg" /></div>
    <div id="apDiv8"><a href="Apply now.html" target="_blank"><a href="Apply now.html">
<img border="0" src="Pictures/cxgvxdvxgd.jpg" alt="Apply Now" width="218" height="99"></a></div>
</div>
</div>
</body>
</html>

That's what APDivs do. This is the single most common problem new people have with web page layouts. DO NOT use positioning. You don't need it. Start over. Learn to use CSS floats, margins and padding to align elements.
Below is a basic HTML5 Layout. View source in browser to see the code.
http://www.alt-web.com/sandbox/HTML5-BasicLayout.html
Nancy O.

Fireworks has changed all my gif files into index can't edit in photoshop

Fireworks has taken over my gif files and now when I try to edit them in photoshop I can't. It says index on the end of file and the layer is locked. I need fireworks to stop this so no other files do it. I have been going into photoshop an saving them as a jpg. file but that can get old. Is there anyway to stop fireworks from doing this?

Glad this helped!
It's interesting: Fireworks makes it much easier to work with GIFs. You just open up the file and start working. Fireworks doesn't have color modes (Grayscale, Indexed Color, RGB, CMYK, Lab) like Photoshop, and is much more geared towards hex codes—which I'm guessing is what indexed color systems use. This makes sense, as it was built to be a web graphics editor.
Apparently, GIFs don't support layers. Fireworks will let you add layers to your GIF, but once it's time to save the file, it'll let you know that you must either save the file in a different format or else the result will be flattened:
Photoshop isn't nearly as friendly to GIFs. Depending on the action you choose, you might get a clue about the need to convert to another color mode, like this one that appears when attempting to use the Dodge Tool:
Just as often, though, you'll only get greyed-out options or an angry "boop" sound from your computer—like when you double click on the locked "Index" layer—with no information provided. I think the engineers could improve this by adding a similar alert message to the Dodge Tool, or even better, by offering a prompt with the option to convert the image to RGB directly (when a user double clicks on the locked layer).

ANIMATIONS (.GIF FILES) AND LAYERS

1. I HAVE PSE7 AND I CAN'T SEEM TO GET ANY ANIMATIONS TO WORK. IF I OPEN AN ANIMATED (.GIF) FILE, IT IS NO LONGER ANIMATED. DO I HAVE TO PUT IT ON A SPECIAL LAYER TYPE? WHEN I OPEN ONE OF THESE FILES, PSE7 CREATES 3 LAYERS FOR THE IMAGE, NONE OF THEM ANIMATED. WHEN I COMBINE THE LAYERS SO I HAVE ONE LAYER WITH THE IMAGE, IT ASKS IF I WANT TO DELETE THE HIDDEN OR EMPTY LAYERS, CAN'T REMEMBER WHICH.
2. WHAT IS AN INDEX LAYER? WHEN I OPENED ONE OF MY FILES, IT CAME IN AS AN INDEX LAYER AND I COULDN'T DO ANYTHING WITH IT.
I'M RUNNING WINDOWS XP PRO SP2.
THANKS FOR ANY HELP YOU CAN GIVE ME.
MAUREEN

GIF does not support layers.
Animated GIF files may open as layers into Photoshop. You need to save them again as an animated GIF file after manipulating them in the animation panel. The 'Save for Web' function would be most ideal.

Z-Index Layers

Similar Messages

Maybe you are looking for