Defining <DIV> on top of another <DIV> pane with transparency?

[Marcus Otmarsen]

Ok, the situation is as follows:

I defined a <DIV> like:

<div id="myid" style="position: absolute; height: 10; width: 10;"><img src="images/object.gif" height=10 width=10></div>

This pane is used to move an object around on the web page by a javascript.

As long as I define no further <div> pane everything works fine.

Then (due to other requirements) I introduced some other <div> panes similar to

<div style="position: absolute; top: 0; left: 0; width: 400px; height: 1000px;
background-image: url(image/mybackround.gif)"><img src="images/mypic.gif"></div>

From this moment on I cannot see the object defined in the first <div> statement any more.

Hmm, I guess that this is because the later <div> panes "overwrite" the first one.

Can two <div> panes on the same area co-exist?

Or can I drop one <div> pane on top of the other with transparency property?

Marcus

[Brian]

Marcus Otmarsen wrote:

Ok, the situation is as follows:

I defined a <DIV> like:

<div id="myid" style="position: absolute; height: 10; width: 10;"><img src="images/object.gif" height=10 width=10></div>
10 what? You need a unit with css, e.g., 10px.
Can two <div> panes on the same area co-exist?

Url?

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[cruiserweight]

> I defined a <DIV> like:

<div id="myid" style="position: absolute; height: 10; width: 10;"><img src="images/object.gif" height=10 width=10></div>

Then

<div style="position: absolute; top: 0; left: 0; width: 400px; height: 1000px;
background-image: url(image/mybackround.gif)"><img src="images/mypic.gif"></div>

try giving the secondary div an id, too. otherewise it becomes
impossible to tell them apart. absolutley positioned divs can overlap,
define background-color:tranparency to acheived the desired affect.

[cruiserweight]

> I defined a <DIV> like:

<div id="myid" style="position: absolute; height: 10; width: 10;"><img src="images/object.gif" height=10 width=10></div>

Then

<div style="position: absolute; top: 0; left: 0; width: 400px; height: 1000px;
background-image: url(image/mybackround.gif)"><img src="images/mypic.gif"></div>

try giving the secondary div an id, too. otherewise it becomes
impossible to tell them apart. absolutley positioned divs can overlap,
define background-color:tranparency to acheived the desired affect.

[Mark Tranchant]

Marcus Otmarsen wrote:

Can two <div> panes on the same area co-exist?

Or can I drop one <div> pane on top of the other with transparency property?

Easily. Read up on absolute positioning and z-index.

Transparency isn't widely supported (ie IE). Take a look at my site
(sig) in Firefox and find a page that needs vertical scrolling - then
watch the header bar as you scroll.

--
Mark.
http://tranchant.plus.com/

[Claire Tucker]

On Thu, 05 Aug 2004 07:53:20 +0100, Mark Tranchant
<ma**@tranchant.plus.com> wrote:

Marcus Otmarsen wrote:

Can two <div> panes on the same area co-exist?

Or can I drop one <div> pane on top of the other with transparency property?

Easily. Read up on absolute positioning and z-index.

Transparency isn't widely supported (ie IE). Take a look at my site
(sig) in Firefox and find a page that needs vertical scrolling - then
watch the header bar as you scroll.

Is the JavaScript alert() message "Handler could not be removed" on
every newly-loaded page intentional?

-Claire

[Harag]

On Thu, 5 Aug 2004 00:56:33 +0200, ot***@gmx.net (Marcus Otmarsen)
wrote:

Ok, the situation is as follows:

I defined a <DIV> like:

<div id="myid" style="position: absolute; height: 10; width: 10;"><img src="images/object.gif" height=10 width=10></div>

This pane is used to move an object around on the web page by a javascript.

As long as I define no further <div> pane everything works fine.

Then (due to other requirements) I introduced some other <div> panes similar to

<div style="position: absolute; top: 0; left: 0; width: 400px; height: 1000px;
background-image: url(image/mybackround.gif)"><img src="images/mypic.gif"></div>

From this moment on I cannot see the object defined in the first <div> statement any more.

Hmm, I guess that this is because the later <div> panes "overwrite" the first one.

Can two <div> panes on the same area co-exist?

Or can I drop one <div> pane on top of the other with transparency property?

Marcus

Check out the z-index property under CSS.

the higher the z-index the more priority it has over other things.

for your large div assign a value of 1 and for the div to appear ontop
of that assign a value of 2

HTH

Al