470,810 Members | 1,446 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,810 developers. It's quick & easy.

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

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

Jul 20 '05 #1
6 36932
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/
Jul 20 '05 #2
> 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.
Jul 20 '05 #3
> 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.
Jul 20 '05 #4
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/
Jul 20 '05 #5
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
Jul 20 '05 #6
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

Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Catherine Lynn Smith | last post: by
4 posts views Thread by Tim Sheets | last post: by
4 posts views Thread by Bruce W...1 | last post: by
2 posts views Thread by Sebastian Gohres | last post: by
1 post views Thread by gaya3 | last post: by
reply views Thread by mihailmihai484 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.