Web Designing Tutorial - Learn HTML, CSS, Java Script, Flash Website Designing Tips: Is Flash Banner Blocking Your Beautiful CSS Drop Down Menus?

Wednesday, January 13, 2010

Is Flash Banner Blocking Your Beautiful CSS Drop Down Menus?

If flash banner is blocking your beautifully crafted CSS drop down menu or your drop down menu is hiding behind your flash banner, here is a simple and quick tip to get it fixed.

With so many buttons to push (the so-called “flashvars”), getting flash content to behave nicely alongside other content types you may have on a web page can sometimes be a real pain.

Community member Eugene got caught up in one of these flash blues recently and wrote to me asking for help:

I’ve just added a flash banner on my page and now it is blocking my main drop down menu. I have played with CSS positioning, z-index and other tricks, but no luck. Can you help??? The flash is located directly below the drop down links.

Oh poor Eugene! If you guys and gals would all agree, I’ll say let’s embark on a one-day strike… just to get these stupid computers to behave.

Yeah, but I know this is not likely to happen, so these computers keep driving us nuts everyday, as we struggle with one hitch after another. But I digress.

For the sake of those few people who cannot envision Eugene’s plight, let me demonstrate the nature of the problem here wit the two images below

The first image indicates the problem that Eugene describes, while the second image shows the proper way this thing should appear. As you can see, the beautiful CSS drop down menu is hiding behind the flash banner, along with all of its glorious beauty.

So how do you fix this? How do you get the flash banner to behave nicely and not block the CSS drop down menu? The solution is a very easy one, as you’ll soon come to realize.

The key is to set the background of your flash movie to transparent. This allows the background color or image of the HTML page that contains the flash movie to show through, as well as allowing the layering of Flash content with DHTML and CSS-positioned content (like a drop-down menu).

You can accomplish this using the WMODE Flash parameter, as you can see in the code snippet below:

In the above code, line 2 adds the transparent background to our flash movie using the OBJECT tag:

<param name="wmode" value="transparent">

The OBJECT tag is used by Internet Explorer to display flash movies. But other browser, like Firefox, handle flash movies differently. Most other browsers use the EMBED tag to display flash movies, so we need to add the transparent background to the EMBED tags as well. This is line 7 in the code snippet above and partially reproduced below:

<embed wmode="transparent" ... ></embed>

So there you have it.. a quick fix for you if you’re struggling to get your horizontal menu to display in front of (not behind) a flash movie. Just add a transparent background to your flash movie using the WMODE parameter, and you’re ready to smile once again.

Labels: flash, Web Design