Zymic Webmaster Forums > My Flash Intro Covered My Dropdown Menu

Full Version: My Flash Intro Covered My Dropdown Menu

Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS

susa007

Nov 9 2008, 11:20 AM

I made a dropdown menu and below that is a flash intro.
I tested on my Mac using Firefox and it looks fine BUT when I test it in PC using Firefox and IE, the flash intro covers my dropdown sub menu.

how to get rid of that?

NEED HELP PLZ!! this is very frustrating...... im ready to go out and yell my throat out... been fixing this for days.......

CODE

<style type="text/css">

#dd {
padding: 0 0 0 0;
margin: 0 0 0 0;
}

#dd li {
margin: 0;
padding: 0;
list-style: none;
float: left;
font: 11px arial;
}

#dd li a.menu {
display: block;
text-align: center;
background: #1F3D5C;
margin: 0 0px 0 0;
color: #FFF;
width: 160px;
text-decoration: none;
padding: 2px 2px;
}

#dd li a.menu:hover {
background-color: #769888;
}

.submenu {
background: #EAEBD8;
border: 1px solid #5970B2;
visibility: hidden;
position: absolute;
z-index: 3;
width:160px;
}

.submenu a {
display: block;
font: 11px arial;
text-align: left;
text-decoration: none;
color: #2875DE;
padding: 1px;
z-index: 3;
}

.submenu a:hover {
background: #49A3FF;
color: #FFF;
z-index: 3;
}
</style>

Banjo

Nov 9 2008, 12:56 PM

Can you upload it to the internet so we can see? Also use the BBCode code tags for you code, makes it look nicer

*** Done. swordz ***

Adam

Nov 11 2008, 06:43 PM

I'm thinking you could fix this with z-index, but I would like to see the site online to help fix this problem.

MrTouz

Nov 12 2008, 01:59 AM

I was going to reply what Adam replied... ill finish

If you ad an ID to each your elements (menu / flash) you can define who will go on top of each other using the CSS code z-index
It runs negatively, so the TOP element (here your dropdown menu) you need to set it as 0 so z-index:0; and the next element to -1 for your flash... and so on...

One thing is, i do not know the effect with flash... :/

Artzi Media

Apr 21 2009, 01:00 PM

You first need to publish your Flash movie with a transparent background...info is here:
http://kb.adobe.com/selfservice/viewConten...rnalId=tn_14201

Then add this to the #dd (I'm assuming that's your main drop-down element) CSS:

CODE

position:relative;
z-index:4;

The transparent background of the Flash movie will allow elements to show through it where the transparency exists, while the CSS supplements this by allowing your drop-down to have a higher placement on the page with use of z-index.

Also be sure to use all the HTML and JavaScript coding that Flash exports for you when you publish your movie.

Click the link in my signature to view an example of the resulting effect - the tab in the top-right is my drop-down DIV menu.

IamShipon1988

Apr 21 2009, 04:23 PM

To add on to Mr.Touz,

Inside of an object, you can add css styling. So if you have a class set with the z-index, then you can easily add the class you desire. It would go something like this:

CODE

Banjo

Apr 21 2009, 10:06 PM

Artzi Media please read the dates next time you post in an topic.

Apr 22 2009, 02:39 AM

QUOTE(Banjo @ Apr 21 2009, 11:06 PM)

Artzi Media please read the dates next time you post in an topic.

Was a pretty informative post though, I say let this one slide.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.