put a DIV behind an IMG

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:



image




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

Comments

  • 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:





    image





    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:
    :
    :
    :
    : image
    :

    :
    :
    :
    : 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
  • 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:


    h1 {z-index:1;}
    h2 {z-index:2;}


    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:
    :
    :
    :
    :
    :

    :
    image

    :
    :
    :
    :
    : 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:
    : :
    : :
    : :
    : : image
    : :

    : :
    : :
    : :
    : : 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
    :

  • 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:






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



    image


    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:
    :
    :
    : h1 {z-index:1;}
    : h2 {z-index:2;}
    :
    :
    : h1 is placed before h2.
    : I hope that helped.

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

    : image
    :

    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
    ;-)

  • 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
    : ;-)
    :
    :

  • 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
    ;-)

  • 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.
  • 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.
    :

  • 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.
    :

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories