Re: Opaque DIV tags refusing to be Opaque

On 2008-02-27, Steve <tinker123 (AT) gmail (DOT) com> wrote:

Hi;

I'm using
Firefox 2.0.0.12
IE 7.0.5730.11
Safari 3.0.4
Opera 9.26

On Windows XP Professional

I'm learning CSS and I made myself a demo HTML page of how to use
overlaying div tags as a substitute for pop-up windows.

The user loads the page and sees an ordinary HTML form. They press a
button and one div tag covers 100% of the screen making it look like
it is graying the whole screen and the whole form out. Then another
div tag, what I call a "pop-in" box appears over that giving the user
a message with two buttons.

I have two problems.

1. I tried setting the div tag for the "pop-in" box to be opaque but
it is still transparent.

I think you may be missing the fact that opacity in CSS3 is "recursive".

Opacity of 0.5 on an element should like the same as if that element and
all its descendents are first rendered to a temporary buffer, in the
normal opaque fashion, and then the _whole ensemble_ blended with
whatever is behind it using an alpha of 0.5.

Opera doesn't do it quite like that though-- it just gives each element
an alpha value equal to the product of all its ancestors' opacities.
They aren't the same thing. But this isn't relevant to your problem.

Either way if you have a div with opacity 0.5 and you set oacity 1.0 on
its child, the child will end up blended at 0.5 with something. You can
never make an element more opaque than any of its ancestors.

So you have to make it a sibling. This kind of thing should work:

<style type="text/css">
#container
{
background-color: green;
position: relative;
height: 500px;
width: 300px;
color: white;
}
#overlay
{
opacity: 0.5;
background-color: black;
position: absolute;
top: 30px;
left: 30px;
bottom: 30px;
right: 30px;
}
#popin
{
background-color: gray;
position: absolute;
top: 60px;
left: 60px;
bottom: 60px;
right: 60px;
}
</style>

...

<div id="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<div id="overlay">
</div>
<div id="popin">
Popin
</div>
</div>

On Feb 27, 5:23 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

I think you may be missing the fact that opacity in CSS3 is "recursive".

Opacity of 0.5 on an element should like the same as if that element and
all its descendents are first rendered to a temporary buffer, in the
normal opaque fashion, and then the _whole ensemble_ blended with
whatever is behind it using an alpha of 0.5.

Either way if you have a div with opacity 0.5 and you set oacity 1.0 on
its child, the child will end up blended at 0.5 with something. You can
never make an element more opaque than any of its ancestors.

Ben, you are right and thank you for the education. Like I wrote, I
am a beginner at learning this stuff.

My problem is that I want my overlay to cover 100% of the screen and I
want it to be transparent. I want my pop-in box to sit on top of
that and not be transparent. I tried putting both of those divs
into an OPAQUE container div. LOL the result is that the body and
form -- the html page beneath the container div, overlay div, and pop-
in div gets covered up so nothing can be seen.

I tried setting the body as the opaque container but that didn't help.

What I am trying to is to cover an entire HTML page with a transparent
gray haze such that the user can see the content, see the form, but
cannot enter data. Then on top of that gray haze have a solid
message box with buttons.

Can this be done?

Thanks again for the info

Steve

On Thu, 28 Feb 2008 16:41:25 +0100, Steve <tinker123 (AT) gmail (DOT) com> wrote:

On Feb 27, 5:23 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:
I think you may be missing the fact that opacity in CSS3 is "recursive".

Opacity of 0.5 on an element should like the same as if that element and
all its descendents are first rendered to a temporary buffer, in the
normal opaque fashion, and then the _whole ensemble_ blended with
whatever is behind it using an alpha of 0.5.

Either way if you have a div with opacity 0.5 and you set oacity 1.0 on
its child, the child will end up blended at 0.5 with something. You can
never make an element more opaque than any of its ancestors.

Ben, you are right and thank you for the education. Like I wrote, I
am a beginner at learning this stuff.

My problem is that I want my overlay to cover 100% of the screen and I
want it to be transparent. I want my pop-in box to sit on top of
that and not be transparent. I tried putting both of those divs
into an OPAQUE container div. LOL the result is that the body and
form -- the html page beneath the container div, overlay div, and pop-
in div gets covered up so nothing can be seen.

I tried setting the body as the opaque container but that didn't help.

What I am trying to is to cover an entire HTML page with a transparent
gray haze such that the user can see the content, see the form, but
cannot enter data. Then on top of that gray haze have a solid
message box with buttons.

Yes: absolute positioning, 2 containers (opaque element & container for
pop-in box), don't make the one with the pop-in box a descendant but
rather a sibling with both an apropriate z-index.
--
Rik Wasmus

On Feb 28, 10:52 am, "Rik Wasmus" <luiheidsgoe... (AT) hotmail (DOT) com>

Yes: absolute positioning, 2 containers (opaque element & container for
pop-in box), don't make the one with the pop-in box a descendant but
rather a sibling with both an apropriate z-index.

Rik;

I'm a noob still learning this stuff so I am not sure I understand
what you wrote.

Do you mean use 2 container divs, one containing the transparent
underlay and one containing the message box, with the message box &
underlay having the same z-index?

It seems that if I have two divs, one under the other, that the top
will become the parent. Can I neutralize that by setting the zindex
in each to be the same?

Rik;

Thinking about how to understand your comments made me stumble across
what the problem was:

<div id = "underlay" />

<div id = "messageBox">
blah blah blah
</div>

I thought <div/> was the same as <div></div> with the "underlay"
div. However, the first style was making the "underlay" div a parent
to the messageBox div. I switched to the second style of closing a
div and the problem cleared up.

Thanks

On 2008-02-28, Steve <tinker123 (AT) gmail (DOT) com> wrote:

On Feb 28, 10:52 am, "Rik Wasmus" <luiheidsgoe... (AT) hotmail (DOT) com
Yes: absolute positioning, 2 containers (opaque element & container for
pop-in box), don't make the one with the pop-in box a descendant but
rather a sibling with both an apropriate z-index.

Rik;

I'm a noob still learning this stuff so I am not sure I understand
what you wrote.

Do you mean use 2 container divs, one containing the transparent
underlay and one containing the message box, with the message box &
underlay having the same z-index?

It seems that if I have two divs, one under the other, that the top
will become the parent. Can I neutralize that by setting the zindex
in each to be the same?

You may not need to use z-index.

I posted an example of one way to do it earlier. But however you do do
it, the bottom line is to remember that you can never make an element
more opaque than its ancestors.

You could achieve the same effect using pngs with alpha of course--
those are just alphas, not recursive opacities. That might be easier.
Just make a 1x1 pixel semi-opaque png, tile that as the background image
on your overlay that's supposed to grey things out, and then put the
popin on top. Don't set opacity on anything.