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?
 
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
 
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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.