I am looking for documentation that will assist me in creating a see through type inline navigation. For example if I were to have a picture right below a navigation bar and it drops down to about five different items, a normal navigation would overlap the image and you would not be able to see that image but what I want is to still be able to see the image in the back of the navigation when dropped down.
The person that is designing the site was not sure if this was possible but I thought I would poke around to see if anyone had a solution.
- MontyVThere is a way that will work, though it requires some futzing around in IE-Win. In a nut shell:
1) Create a 1 pixel by 1 pixel PNG and save it with alpha transparency. Something like 30 to 50% would work fine. Place this image as a background for the overlapping menu. The overlapping menu must have a transparent BG color.
2) Using a CSS hack, prevent IE-Win and Mac from seeing the background image assignment and instead use an Internet Explorer CSS filter to set the transparency of the overlapping menu.
You might also find this article usefull: Cross-Browser Variable Opacity with PNG: A Real Solution (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/pngopacity/">http://www.alistapart.com/articles/pngopacity/</a><!-- m -->).Another alternative that's a bit of a chess playing dog is the "semi-transparent" GIF background. Make a 2x2 GIF with the top left pixel a light color (white's good for a start) and the top right pixel transparent. Do the opposite on the second row so you wind up with little half-transparent checkerboard.
WT
TW
The person that is designing the site was not sure if this was possible but I thought I would poke around to see if anyone had a solution.
- MontyVThere is a way that will work, though it requires some futzing around in IE-Win. In a nut shell:
1) Create a 1 pixel by 1 pixel PNG and save it with alpha transparency. Something like 30 to 50% would work fine. Place this image as a background for the overlapping menu. The overlapping menu must have a transparent BG color.
2) Using a CSS hack, prevent IE-Win and Mac from seeing the background image assignment and instead use an Internet Explorer CSS filter to set the transparency of the overlapping menu.
You might also find this article usefull: Cross-Browser Variable Opacity with PNG: A Real Solution (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/pngopacity/">http://www.alistapart.com/articles/pngopacity/</a><!-- m -->).Another alternative that's a bit of a chess playing dog is the "semi-transparent" GIF background. Make a 2x2 GIF with the top left pixel a light color (white's good for a start) and the top right pixel transparent. Do the opposite on the second row so you wind up with little half-transparent checkerboard.
WT
TW