Relative CSS positioning

Discussion in 'HTML' started by Tim Johansson, Aug 2, 2004.

  1. Hello,

    I have an image, upon which I want to place another image. I've figured out
    this should be done by CSS positioning, but I don't know the exact
    coordinates of the other image. How do I place the image knowing only where
    on the other image I want to place it?
    --
    --
    www.gurka.se/gurka.php?x=1&language=english
    Tremble before the mighty Cucumber
     
    Tim Johansson, Aug 2, 2004
    #1
    1. Advertising

  2. Tim Johansson

    rf Guest

    Tim Johansson

    > I have an image, upon which I want to place another image.


    Why not use your image composing software?

    --
    Cheers
    Richard.
     
    rf, Aug 3, 2004
    #2
    1. Advertising

  3. Tim Johansson

    Spartanicus Guest

    "Tim Johansson" <> wrote:

    >I have an image, upon which I want to place another image. I've figured out
    >this should be done by CSS positioning


    Try negative margins first.

    --
    Spartanicus
     
    Spartanicus, Aug 3, 2004
    #3
  4. "rf" <rf@.invalid> skrev i meddelandet
    news:q4APc.29732$...
    > Tim Johansson
    >
    > > I have an image, upon which I want to place another image.

    >
    > Why not use your image composing software?
    >

    The image's position is calculated by PHP, and creating images on-the-fly
    would consume too much time and bandwidth.
    > --
    > Cheers
    > Richard.
    >
    >
     
    Tim Johansson, Aug 3, 2004
    #4
  5. Tim Johansson

    rf Guest

    Tim Johansson
    > "rf" <rf@.invalid> skrev i meddelandet
    > news:q4APc.29732$...
    > > Tim Johansson
    > >
    > > > I have an image, upon which I want to place another image.

    > >
    > > Why not use your image composing software?
    > >

    > The image's position is calculated by PHP, and creating images on-the-fly
    > would consume too much time and bandwidth.


    Hmmm. Off top of head solution #1...

    Create a div exactly the same size as the first image. Background of div is
    first image. Position: relative so it becomes a containing element (no top
    or left).

    Inside the div an <img> pointing to the second image. Position: absolute.
    Top: and bottom: now refer to the top left of the div, that is the first
    image. If the first image (the div really) moves then so does the second
    image.

    You don't need to know where the first image is positioned (which is a real
    hard thing to determine anyway (client side) and usually impossible server
    side).

    <tinkers/>
    http://users.bigpond.net.au/rf/images.html

    Be sure to change your font size so you can see that when to roo moves so
    does the bug.

    --
    Cheers
    Richard.
     
    rf, Aug 3, 2004
    #5
  6. Tim Johansson

    Sid Ismail Guest

    On Tue, 3 Aug 2004 00:46:36 +0200, "Tim Johansson" <> wrote:

    : I have an image, upon which I want to place another image. I've figured out
    : this should be done by CSS positioning, but I don't know the exact
    : coordinates of the other image. How do I place the image knowing only where
    : on the other image I want to place it?

    Use a graphics editor, surely? PSP or Irfanview.

    Sid
     
    Sid Ismail, Aug 3, 2004
    #6
  7. "rf" <rf@.invalid> skrev i meddelandet
    news:AjJPc.30506$...
    > Tim Johansson
    > > "rf" <rf@.invalid> skrev i meddelandet
    > > news:q4APc.29732$...
    > > > Tim Johansson
    > > >
    > > > > I have an image, upon which I want to place another image.
    > > >
    > > > Why not use your image composing software?
    > > >

    > > The image's position is calculated by PHP, and creating images

    on-the-fly
    > > would consume too much time and bandwidth.

    >
    > Hmmm. Off top of head solution #1...
    >
    > Create a div exactly the same size as the first image. Background of div

    is
    > first image. Position: relative so it becomes a containing element (no top
    > or left).
    >
    > Inside the div an <img> pointing to the second image. Position: absolute.
    > Top: and bottom: now refer to the top left of the div, that is the first
    > image. If the first image (the div really) moves then so does the second
    > image.
    >
    > You don't need to know where the first image is positioned (which is a

    real
    > hard thing to determine anyway (client side) and usually impossible server
    > side).
    >
    > <tinkers/>
    > http://users.bigpond.net.au/rf/images.html
    >
    > Be sure to change your font size so you can see that when to roo moves so
    > does the bug.
    >
    > --
    > Cheers
    > Richard.
    >
    >


    It worked great, thanks!
     
    Tim Johansson, Aug 3, 2004
    #7
  8. Tim Johansson

    lime Guest

    > > > > I have an image, upon which I want to place another image.
    > > >


    > Hmmm. Off top of head solution #1...


    <snip>

    > <tinkers/>
    > http://users.bigpond.net.au/rf/images.html


    Unbelievable, off the top of your head hey? That's great...
     
    lime, Aug 4, 2004
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rob R. Ainscough
    Replies:
    2
    Views:
    1,686
    Rob R. Ainscough
    Feb 7, 2006
  2. Tom
    Replies:
    4
    Views:
    442
  3. Chris
    Replies:
    10
    Views:
    1,119
    Chris
    Mar 1, 2004
  4. KatB
    Replies:
    8
    Views:
    4,235
  5. Rob Powell
    Replies:
    4
    Views:
    20,548
    dorayme
    Sep 17, 2006
Loading...

Share This Page