Results 1 to 4 of 4

Thread: [RESOLVED] [B]Z-index not working on Flash object[/B]

  1. #1
    Join Date
    Oct 2008
    moreno valley, California ,usa

    resolved [RESOLVED] [B]Z-index not working on Flash object[/B]

    Dear Colleagues,
    I have a client who wants some nav menu items on top of a flash head banner that fades in several pictures. My problem is I cannot get the flash object to respond to z-indexing so that the nav menu "sits on top" of the banner so when moused over, the drop down menu items are "on top" of the flash banner; they appear "below" the banner which is useless.

    I isolated as much relevant code as possible in the following basic layout:

    <div id="banding">
    <div id="headnav">
    <ul id="nav1">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html" onmouseover="mopen('about')" onmouseout="mclosetime()">About Us</a>
    <div id="about" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    <a href="test.html">Testimonials</a>
    <a href="team.html">Our Team</a>
    <a href="bus.html">Business History</a>
    </div><!--end about div-->
    <li><a href="contact.html" >Contact Us</a>
    </div><!--end headnav-->
    <div id="flashpic">
    <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="750" height="150" title="titlepictures">
    <param name="movie" value="images/headpicture3.swf" />
    <param name="quality" value="high" />
    <embed src="images/headpicture3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="150"></embed>
    </object></div><!--end flashpic-->

    </div><!--end banding-->

    does anyone have any suggestions??

    Thanks in advance.


  2. #2
    Join Date
    Mar 2010
    I think z-index only works on elements that have css positioning set to a value.

    But I think you might be able to get away with not having to use z-index if something like this works:

    1) reverse the order of you flashpic and headnav divs in your html so that the flash object is rendered first by the browser and the headnav div afterwards which should place the nav on top of the flash object if the following css works for your html.

    2) add the following to your css
    #banding {
    position: relative}
    #flashpic {
    position: absolute;
    top: 0px;
    left: 0px}
    #headnav {
    position: absolute;
    top: 25&#37;;
    left: 50%}
    This will hopfully place you nav 25% from the top and 50% from the left of your banding div and on top of your flash object

    But all of the above is untested so fingers and toes are crossed
    Last edited by tirna; 06-28-2010 at 11:38 PM.

  3. #3
    Join Date
    Oct 2008
    moreno valley, California ,usa
    Thanks very much tirna,
    I just came across a solution; googling 'using z-indexing with flash', a gentleman explained that flash doesn't really play in the browser window, but opens a new window exactly according to your position info. By adding a setting param, it forces the flash to play inside the browser and thus become subject to indexing.

    The little gem of a parameter is: <param name="mode" value="opaque" /> dropping that in the list of params in the <object>tags solved the problem!!

    Thanks for response.

  4. #4
    Join Date
    Mar 2010
    no problem - I'm glad you sorted it out and thanks for letting me know

    I can uncross my fingers and toes now - they were getting pretty sore

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center