Transparent CSS DropDown menu with partially transparent png background

I need help...

I'm creating a website for a photographer friend of mine, and I'm trying to create drop down menus that look like the ones created in flash on the homepage
http://mjg.moruses.com/

becuase the music needs to run seemlessly, the site will basically run through an iframe.  the main page loads a flash with the drop downs great.  from there, the pages are eventually going to be dynamic, so i need css menus run across the top.

i'm horrible with css...

from what i've researched, i need to create 5 partially transparent png files to put in the dropdowns.  I can do that fine.  the problem is, I don't understand CSS well enough to manipulate code to conform to my page.

i found this example, but converting it to my site isn't working...
http://www.cssplay.co.uk/menus/flyout_horizontal.html

any help would be greatly appreciated.

LVL 6
philjones85Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

bjrcreationsCommented:
For such a simple implementation you don't want to use PNG files. The issue with PNG files is that in order to get them to be transparent in Internet Explorer, you have to do quite a bit of scripting (with JavaScript). Instead, first create your dropdown menus -- each menu in a single DIV -- then apply the following with a class:

div.dropdown_menu {
   opacity: .50;
   filter: alpha(opacity=50);
   -moz-opacity: 0.5;
}

The reason I say each menu layer in a "single" DIV, is because if you nest a DIV, and try to apply opacity, it won't work cross-browser. You will instead have to apply the opacity to all the parent DIVs as well.

If you want more information on this, then visit the following URL:

http://www.mandarindesign.com/opacity.html

Opacity and CSS/JavaScript dropdown menus is an advanced concept, so don't feel bad if it seems overwhelming at first.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
philjones85Author Commented:
Ok, I'm REALLY bad with css.  I've played with it some and its getting closer, but I'm still way off.

couple questions.  how do I align the images to the right?  how do I get rid of the extra space below them?
0
trinziaCommented:

Hard to see the problem unless you can post your work-in-progress.  It looks like http://mjg.moruses.com/ is using 2 flash movies and no css...  I'm unclear what you wish to do?  Re-code the existing page in CSS?   Three column layout with transparent links on top right, and no secondary navigation?   Or something else?
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

philjones85Author Commented:
i made the index page start on the BIO page which is html/css.  if you click the link back to the homepage you'll see the flash.  The suggestion from another thread solved a couple problems, and its really close, but still not quite there.  i need the partially transparent color to only show up in the <table> dropdown and i need a different color in each table (like the flash).  is there a way to put the color into the <table> tag?  it doesn't seem to work when i do it.
0
philjones85Author Commented:
i just realized that my dropdowns don't work in IE but work in Firefox...
0
trinziaCommented:

your drop downs will not display over the flash content unless you specify wmode.  even if they were working you wouldn't see it.  ican't remember exactly but i think you set wmode=opaque and make sure the divs have a higher z-index than the div holding the flash movie.  lots of tech notes if you search "flash wmode".  wmode is in your publish settings in flash.



0
philjones85Author Commented:
the drop downs don't need to drop over flash, the page with flash on it has the drop downs built into the flash.  the rest of the static pages, i'm redesigning the drop downs in css/html.
0
philjones85Author Commented:
that snippet of code and link got the transparency i was looking for.  it works perfectly in firefox now, still won't work in IE though...
0
trinziaCommented:

this page says it will only work if you specify a position, ie,  float left etc. seems like a good link:
http://www.mandarindesign.com/opacity.html
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.