/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Jun 29.2010

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>
<li><a href=”contact.html” >Contact Us</a>
</ul>
</div><!–end headnav–>
<div id=”flashpic”>
<object classid=”clsid?27CDB6E-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.

captsig

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@tirnaJun 29.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
[CODE]

#banding {
position: relative}

#flashpic {
position: absolute;
top: 0px;
left: 0px}

#headnav {
position: absolute;
top: 25&#37;;
left: 50%}

[/CODE]

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 :eek:
Copy linkTweet thisAlerts:
@captsigauthorJun 29.2010 — 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.

captsig
Copy linkTweet thisAlerts:
@tirnaJun 29.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 ?
×

Success!

Help @captsig spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...