Opaque layer over everything except one table.

I have figured out how to make a css style work so it puts a semi-transparent layer over one div of a site.  It creates a div container and allows two divs to be placed in the container, one for the content, and one for the semi-transparent overlay.  

My question is, I need a way to gray out or put a similar semi-transparent css style over the entire site except for one specific div.

Is there a way to do this without having to place this code on each individual portion of the site?  
<!-- Here are the divs -->
 
<div class="container"> 
                                <div id="content_canvas" class="content">
    content goes here
     </div>
                                <div id="over_content" class="over_content" align="center"><a class="edit_this" href="editheader.jsp">Edit This</a></div>
                        </div>
 
 
<!-- Here are the css styles -->
 
<style>
div.container {
        position:relative;
        width: 100%;
        height: 100%;
		z-index:1;
 
}
 
div.content {
        position:absolute;
        width: 100%;
        height: 100%;
	top:0;
	left:0;
        z-index:2;
filter:alpha(opacity=50);
opacity:.50;
-moz-opacity:.50;
-khtml-opacity:0.5;
        background-color:#CCCCCC;
 
		
        }
div.over_content {
        width: 100%;
        height: 100%;
        z-index:40;
		vertical-align:middle;
}
div.over_over_content {
        width: 100%;
        height: 100%;
        z-index:50;
		vertical-align:middle;
}
.edit_this {
        position:relative;
        width: 100%;
        height: 100%;
        z-index:60;
		text-align:center;
		font-size:54px;
		font-weight:bold;
		color:#666666;
		font-family:Arial, Helvetica, sans-serif;
		
}
.edit_this_small {
        position:relative;
        width: 100%;
        height: 100%;
        z-index:3;
		text-align:center;
		font-size:20px;
		font-weight:bold;
		color:#666666;
		font-family:Arial, Helvetica, sans-serif;
		
}
</style>
<!-- Grayout area -->

Open in new window

LVL 1
Shaye LarsenAsked:
Who is Participating?
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.

mverschoofCommented:
you can use a z-index on the transparant layer and a higher index on the div you want to have on top. This way the layer is on top of everything except the wanted div

You can find some info on z-index here: http://www.w3schools.com/Css/css_positioning.asp

Hope this helps.
Cheers, Michael
0
Shaye LarsenAuthor Commented:
k, I have placed the z-index and am not getting any results.

I put a z-index of -1 on the body (i need the transparent layer to be over the whole page.

I then put a z-index of 1 on the div that I need to stand out and a z-index of 2 on the another element I need to stand out.

Still doesn't work.  I just get a transparent layer over the whole thing.  It's acting like the body layer is overriding all the others.


<!-- Here is my css -->
<style>
 
body {margin:15px; text-align:auto;
 
		z-index:-1;
filter:alpha(opacity=30);
opacity:.30;
-moz-opacity:.30;
-khtml-opacity:0.3;
        background-color:#333333;
}
.holder {margin:5px auto; height:100px; width:500px; border:1px solid #000;}
 
.reveal {
 
		z-index:1;
filter:alpha(opacity=100);
opacity:1.00;
-moz-opacity:1.0;
-khtml-opacity:1.0;
}
.edit_this {
        position:relative;
        width: 100%;
        height: 100%;
        z-index:2;
		text-align:center;
		font-size:54px;
		font-weight:bold;
		color:#CCCCCC;
		font-family:Arial, Helvetica, sans-serif;
		
}
.edit_this_small {
        position:relative;
        width: 100%;
        height: 100%;
        z-index:3;
		text-align:center;
		font-size:20px;
		font-weight:bold;
		color:#CCCCCC;
		font-family:Arial, Helvetica, sans-serif;
		
}
</style>
 
 
 
Here is my HTML - This is a .jsp page.
 
<body>
<table>
 <tr>
  <td>all this should have a transparent layer over it.</td>
  <td><div class="reveal">This should not have a transparent layer over it</div></td>
 </tr>
</table>

Open in new window

0
scrathcyboyCommented:
A DIV Z-index will not control a TABLE -- you are mixing table-less elements controlled by specific CSS features with tables that will not be controlled by CSS features specific to DIVs.  The simple solution is to remove the table from the HTML and replace it with a DIV -- then your opacity techniques will work for all, or for an individual DIV, which you just style by exception --

DIV  { various properties for all DIVS  }

DIV.exception  { properties just for excepted DIV }

HTML

<DIV class="exception"> this is different </DIV>
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

mverschoofCommented:
As always, scrathcyboy is right. I didn't think about the tables. His comment should fix your problem.

Good luck in your future efforts.
Cheers, Michael
0
Shaye LarsenAuthor Commented:
Thanks for the solution.  Unfortunately, I cannot take out the table stuff.  That would be two months of work as we need to apply this to over 100 individual sites that are all built with tables.

Is there a way to make this work with the tables in place?  
0
mverschoofCommented:
I'm pretty sure there is no solution WITH the tables. Sorry to report bad news.

Cheers, Michael
0
scrathcyboyCommented:
The only other way is to HIDE the table -- wrap it in a DIV and make that invisible, or display = hidden.  This MIGHT work in FF and Mozilla and IE7 -- I don't think it will work for IE6 but you can always test it.
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.

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.