asked on

How do you make elements under a div layer inactive?

Hi, I have a css style that makes certain portions of my site appear inactive until they are clicked. The css places a div over the area with a layer that has an opacity set to 60% so it appears grayed out.

The problem is that the content underneath the opacity layer is still active. IE: you can still copy text, click links, etc. I can't turn this activity off permanently, as when they click to take the layer off, the content then becomes active.

I need a way to make it so the content under the layer is inactive when the opacity layer is over it.

Thanks for any help. My code below contains my CSS styles and the div container.

<!-- Grayout area -->
<style>
div.container {
        position:relative;
        width: 100%;
        height: 100%;
 
}
 
div.content {
        position:absolute;
        width: 100%;
        height: 100%;
	top:0;
	left:0;
        z-index:1;
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:2;
		vertical-align:middle;
		
}
.edit_this {
        position:relative;
        width: 100%;
        height: 100%;
        z-index:3;
		text-align:center;
filter:alpha(opacity=60);
opacity:.60;
-moz-opacity:.60;
-khtml-opacity:0.6;
		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;
filter:alpha(opacity=60);
opacity:.60;
-moz-opacity:.60;
-khtml-opacity:0.6;
		font-size:20px;
		font-weight:bold;
		color:#666666;
		font-family:Arial, Helvetica, sans-serif;
		
}
</style>
<!-- Grayout area -->
 
 
 
 
<div class="container"> 
  <div id="content_canvas" class="content">
    Content that is under the layer.  <a href="link.html">Link that should be inactive when layer is over it.</a>
  </div>
  <div id="over_content" class="over_content" align="center"><a class="edit_this" href="edit2.jsp">Edit This</a>
  </div>
</div>

Open in new window

SOLUTION

quincydude

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Shaye Larsen

ASKER

Thanks for your comment.

visibility:hidden makes the content div completely hidden. In the code above you will see that I am using opacity because we need to be able to see the content underneath. But it just can't be active. Meaning, while the cover layer is on top, you shouldn't be able to click links underneath.

SOLUTION

quincydude

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Shaye Larsen

ASKER

Thanks for the suggestion.

I have a gray out element going. I can't do it on the whole screen as I just need to to work over certain tables.

I just took a stab a using the z-index and set the bottom layer to 1 and the top layer to 60. It had no effect.

Below is my z-index rankings.

<!-- Grayout area -->
<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

ASKER CERTIFIED SOLUTION

Shaye Larsen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial