HTML & WEB-Design

Moderators: Jonathan
Number of threads: 1253
Number of posts: 3360

This Forum Only
Post New Thread
Single Post View       Linear View       Threaded View      f

Report
put a DIV behind an IMG Posted by Secret_Doom on 27 Nov 2001 at 12:29 PM
Hi there. I'm attempting to display a div (no background) which would have a border, and just a part of that border would pass UNDER an image.

That's the problem. When a div border and an image occup the same space, the div passes over the image.

This example shows better what I'm trying to say:

<html>
<body>
<img src="1.bmp" name="img01">
<div style="BACKGROUND: none; BORDER: 2px #FF0000 solid;
WIDTH: 50; HEIGHT: 50; POSITION: absolute; TOP: 20;
LEFT: 15"></div>
</body>
</html>

How to force the div border to appear BEHIND the image ???

Thanks very much for you help & for your time.

-- Secret_Doom --

secret_doom@hotmail.com
www.batch.hpg.com.br
Report
I've figured it out ! Posted by Secret_Doom on 28 Nov 2001 at 5:46 PM
In case anyone reads this, I've figured out a way of doing this.
It's not quite what I wanted, but...

I've located the image inside an another DIV (with BACKGROUND:none), which is AFTER the first one (on the code), so it appears on the front of it. Here follows an example:


<html>
<body>
<div style="BACKGROUND: none; BORDER: 2px #FF0000 solid;
WIDTH: 50; HEIGHT: 50; POSITION: absolute;
TOP: 20; LEFT: 15"></div>
<div style="BACKGROUND: none; POSITION: absolute;
LEFT: 10; TOP: 10"><img src="1.bmp" name="img01"></div>
</body>
</html>


Well, that's it. I said that it's not quite what I'm looking for because now the images aren't on a TABLE TD (they were before, one the real work, this one above is just an example), so many things changed. Now I need to manipulate the TOP/LEFT properties so the images are displayed by the div where they were before... There are some other changes (like the TD size).

So, if anyone knows of an another way (that's not putting the image inside a div), please tell me!

Thanks again for your time

-- Secret_Doom --


secret_doom@hotmail.com
www.batch.hpg.com.br



-------------------------------------

: Hi there. I'm attempting to display a div (no background) which would have a border, and just a part of that border would pass UNDER an image.
:
: That's the problem. When a div border and an image occup the same space, the div passes over the image.
:
: This example shows better what I'm trying to say:
:
: <html>
: <body>
: <img src="1.bmp" name="img01">
: <div style="BACKGROUND: none; BORDER: 2px #FF0000 solid;
: WIDTH: 50; HEIGHT: 50; POSITION: absolute; TOP: 20;
: LEFT: 15"></div>
: </body>
: </html>
:
: How to force the div border to appear BEHIND the image ???
:
: Thanks very much for you help & for your time.
:
: -- Secret_Doom --
:
: secret_doom@hotmail.com
: www.batch.hpg.com.br
Report
Re: I've figured it out ! Posted by Firestorm on 9 Dec 2001 at 8:04 AM
If you have two elements and one should be covered by the other, use Z-Index which tells the browser which element has which priority:
example:
<head>
<style .......>
h1 {z-index:1;}
h2 {z-index:2;}
</style>
</head>
h1 is placed before h2.
I hope that helped.
: In case anyone reads this, I've figured out a way of doing this.
: It's not quite what I wanted, but...
:
: I've located the image inside an another DIV (with BACKGROUND:none), which is AFTER the first one (on the code), so it appears on the front of it. Here follows an example:
:
:
: <html>
: <body>
: <div style="BACKGROUND: none; BORDER: 2px #FF0000 solid;
: WIDTH: 50; HEIGHT: 50; POSITION: absolute;
: TOP: 20; LEFT: 15"></div>
: <div style="BACKGROUND: none; POSITION: absolute;
: LEFT: 10; TOP: 10"><img src="1.bmp" name="img01"></div>
: </body>
: </html>
:
:
: Well, that's it. I said that it's not quite what I'm looking for because now the images aren't on a TABLE TD (they were before, one the real work, this one above is just an example), so many things changed. Now I need to manipulate the TOP/LEFT properties so the images are displayed by the div where they were before... There are some other changes (like the TD size).
:
: So, if anyone knows of an another way (that's not putting the image inside a div), please tell me!
:
: Thanks again for your time
:
: -- Secret_Doom --
:
:
: secret_doom@hotmail.com
: www.batch.hpg.com.br
:
:
:
: -------------------------------------
:
: : Hi there. I'm attempting to display a div (no background) which would have a border, and just a part of that border would pass UNDER an image.
: :
: : That's the problem. When a div border and an image occup the same space, the div passes over the image.
: :
: : This example shows better what I'm trying to say:
: :
: : <html>
: : <body>
: : <img src="1.bmp" name="img01">
: : <div style="BACKGROUND: none; BORDER: 2px #FF0000 solid;
: : WIDTH: 50; HEIGHT: 50; POSITION: absolute; TOP: 20;
: : LEFT: 15"></div>
: : </body>
: : </html>
: :
: : How to force the div border to appear BEHIND the image ???
: :
: : Thanks very much for you help & for your time.
: :
: : -- Secret_Doom --
: :
: : secret_doom@hotmail.com
: : www.batch.hpg.com.br
:

Report
About Firestorm's reply ... Posted by Secret_Doom on 9 Dec 2001 at 1:21 PM
Hi!

Thanks for your reply, Firestorm.
Your suggestion worked, however only when managing DIVs. But when managing IMGs and DIVs (which is what I'm trying to do), the divs where always on the front.

See the examples:

This works:

<html><body>
<div style="BORDER: 4px #0000FF solid; POSITION: absolute;
HEIGHT: 20; WIDTH: 20; TOP: 10; LEFT: 10; BACKGROUND: #00FF00;
Z-Index: 1"></div>
<div style="BORDER: 4px #0000FF solid; POSITION: absolute;
HEIGHT: 20; WIDTH: 20; TOP: 20; LEFT: 20; BACKGROUND: #FF0000;
Z-Index: 2"></div>
</body></html>

But this doesn't (the DIV is still in front of the IMG):

<html><body>
<div style="BORDER: 4px #0000FF solid; POSITION: absolute;
HEIGHT: 20; WIDTH: 20; TOP: 10; LEFT: 10; BACKGROUND: #00FF00;
Z-Index: 1"></div>
<img src="image.gif" style="Z-Index: 2">
</body></html>

Am I doing something wrong?
Is there something ELSE that I must do with the Z-Index thing so it works when mixing DIVs and IMGs ?

Thanks very much.

-- Secret_Doom - Leonardo Pignataro --

secret_doom@hotmail.com
www.batch.hpg.com.br


: If you have two elements and one should be covered by the other, use Z-Index which tells the browser which element has which priority:
: example:
: <head>
: <style .......>
: h1 {z-index:1;}
: h2 {z-index:2;}
: </style>
: </head>
: h1 is placed before h2.
: I hope that helped.

Report
1 over 2! Posted by Firestorm on 10 Dec 2001 at 7:45 AM
: Hi!
: But this doesn't (the DIV is still in front of the IMG):
:
: <html><body>
: <div style="BORDER: 4px #0000FF solid; POSITION: absolute;
: HEIGHT: 20; WIDTH: 20; TOP: 10; LEFT: 10; BACKGROUND: #00FF00;
: Z-Index: 1"></div>
: <img src="image.gif" style="Z-Index: 2">
: </body></html>

You set the index for the image eyual 2 that means it must be behind. So try the other way round.
Firestorm
blue_surfer2000@yahoo.de


Report
Re: 1 over 2! Posted by Secret_Doom on 10 Dec 2001 at 3:55 PM
Hi Firestorm.
I've tryed both ways, and it didn't worked...

Oh, BTW, I've tested with DIVs, and it's 2 over 1...
But anyway, I tryed both with the img/div, no good...

If ya can give any other hint...
Thanks a lot.

-- Secret_Doom - Leonardo Pignataro --

secret_doom@hotmail.com
www.batch.hpg.com.br

: You set the index for the image eyual 2 that means it must be behind. So try the other way round.
: Firestorm
: blue_surfer2000@yahoo.de
:
:
:

Report
euh! Posted by Firestorm on 12 Dec 2001 at 11:14 AM
Well now I haven't got anything to say want you could do in HTML. You could cheat so to say and draw the border or paint you picture and your text as one image.
Firestorm
blue_surfer2000@yahoo.de


Report
Re: put a DIV behind an IMG Posted by DrGonzo on 3 Feb 2002 at 11:47 PM
yes it is 2 over 1, and have you tried playing with the images' justification??? ALIGN=LEFT ALIGN=TEXTTOP ALIGN=CENTER.....see if that changes anything.
Report
Re: put a DIV behind an IMG Posted by Secret_Doom on 4 Feb 2002 at 4:10 PM
Wow, thatnks for the interest DrGonzo, but that thread is kind of old... I've already fixed the problem (actually on the end I didn't need to put the image in front of the div)

Thanks again.

-- Secret_Doom - Leonardo Pignataro --

secret_doom@hotmail.com
www.batch.hpg.com.br

: yes it is 2 over 1, and have you tried playing with the images' justification??? ALIGN=LEFT ALIGN=TEXTTOP ALIGN=CENTER.....see if that changes anything.
:

Report
Re: put a DIV behind an IMG Posted by Secret_Doom on 4 Feb 2002 at 4:10 PM
Wow, thatnks for the interest DrGonzo, but that thread is kind of old... I've already fixed the problem (actually on the end I didn't need to put the image in front of the div)

Thanks again.

-- Secret_Doom - Leonardo Pignataro --

secret_doom@hotmail.com
www.batch.hpg.com.br

: yes it is 2 over 1, and have you tried playing with the images' justification??? ALIGN=LEFT ALIGN=TEXTTOP ALIGN=CENTER.....see if that changes anything.
:




 

Recent Jobs

Official Programmer's Heaven Blogs
Web Hosting | Browser and Social Games | Gadgets

Popular resources on Programmersheaven.com
Assembly | Basic | C | C# | C++ | Delphi | Flash | Java | JavaScript | Pascal | Perl | PHP | Python | Ruby | Visual Basic
© Copyright 2011 Programmersheaven.com - All rights reserved.
Reproduction in whole or in part, in any form or medium without express written permission is prohibited.
Violators of this policy may be subject to legal action. Please read our Terms Of Use and Privacy Statement for more information.
Operated by CommunityHeaven, a BootstrapLabs company.