Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1029
  • Last Modified:

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

0
Shaye Larsen
Asked:
Shaye Larsen
  • 3
  • 2
  • 2
1 Solution
 
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now