By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,846 Members | 1,836 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,846 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
6 Replies


P: n/a
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

P: n/a
> 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

P: n/a
> 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

P: n/a
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

P: n/a
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

P: n/a
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.