positioning image

Discussion in 'HTML' started by WindAndWaves, Oct 19, 2004.

  1. WindAndWaves

    WindAndWaves Guest

    Hi Gurus,

    I am trying to position images in a <TD><DIV> kind of area. I am not sure
    where on the screen the <TD><DIV> will be, but I am sure how many pixels the
    images are from the top-left of the block.

    It is easy when you have one image, but harder when you have more than one
    image.

    Does anyone have any ideas how I can make this easy?

    TIA

    - Nicolaas
    WindAndWaves, Oct 19, 2004
    #1
    1. Advertising

  2. WindAndWaves

    rf Guest

    WindAndWaves

    > Hi Gurus,


    Gurus is out of the office today. Will I do?

    > I am trying to position images in a <TD><DIV> kind of area. I am not sure
    > where on the screen the <TD><DIV> will be, but I am sure how many pixels

    the
    > images are from the top-left of the block.
    >
    > It is easy when you have one image, but harder when you have more than one
    > image.
    >
    > Does anyone have any ideas how I can make this easy?


    position: absolute; the images, giving the images direct parent position:
    relative; (omit top and left) to make it a containing element.

    --
    Cheers
    Richard.
    rf, Oct 19, 2004
    #2
    1. Advertising

  3. WindAndWaves

    WindAndWaves Guest

    "rf" <rf@.invalid> wrote in message
    news:xA2dd.31399$...
    > WindAndWaves
    >
    > > Hi Gurus,

    >
    > Gurus is out of the office today. Will I do?
    >
    > > I am trying to position images in a <TD><DIV> kind of area. I am not

    sure
    > > where on the screen the <TD><DIV> will be, but I am sure how many pixels

    > the
    > > images are from the top-left of the block.
    > >
    > > It is easy when you have one image, but harder when you have more than

    one
    > > image.
    > >
    > > Does anyone have any ideas how I can make this easy?

    >
    > position: absolute; the images, giving the images direct parent position:
    > relative; (omit top and left) to make it a containing element.
    >
    > --
    > Cheers
    > Richard.
    >
    >


    Dear Richard

    Sorry, but could you be so kind to explain a bit more? I understand your
    words, but I do not understand what you mean. (I am not very smart -
    unfortunately). What I really want to do - thinking about it a bit more, is
    for the images to behave as if they were absolute, but relative to a
    container if that make sense.

    I have a block (say a DIV or a TD) with a certain width and height. Now, I
    want to position a couple of images within that space using absolute terms
    within the constraint of the block.

    Say
    left: 1px; top: 1px
    should be one of the edge.
    for the next image with
    left 1px, top 1px, it should not be positioned one pixel from the last
    image (relative), but one pixel from the edge of the Div/TD

    Can this be done?

    Cheeers



    Nicolaas

    Thank you

    Nicolaas
    WindAndWaves, Oct 20, 2004
    #3
  4. WindAndWaves

    rf Guest

    WindAndWaves wrote

    [positioning images in a div]

    > Sorry, but could you be so kind to explain a bit more? I understand your
    > words, but I do not understand what you mean. (I am not very smart -
    > unfortunately). What I really want to do - thinking about it a bit more,

    is
    > for the images to behave as if they were absolute, but relative to a
    > container if that make sense.


    > I have a block (say a DIV or a TD) with a certain width and height. Now, I
    > want to position a couple of images within that space using absolute terms
    > within the constraint of the block.


    Fine.

    <img style="position: absolute; left: Xpx, top: Ypx;" ...>

    (put the style in your stylesheet if you wish)

    Flavour the X and Y for each image.

    Now the obscure part:

    Position absolute does not position relative to the parent element, it
    positions relative to the containing element.

    The containing element is the ancestor element that is not position: static,
    or the body element, whichever comes first.

    To position relative to the parent element that element must be made a
    containing element. Do this with
    <div style="position: relative;"> - no top or left.

    The images will now be positioned within the div, regardless of where the
    div is on the page.
    rf, Oct 20, 2004
    #4
  5. WindAndWaves

    WindAndWaves Guest

    "rf" <rf@.invalid> wrote in message
    news:JMkdd.32880$...
    > WindAndWaves wrote
    >
    > [positioning images in a div]
    >
    > > Sorry, but could you be so kind to explain a bit more? I understand

    your
    > > words, but I do not understand what you mean. (I am not very smart -
    > > unfortunately). What I really want to do - thinking about it a bit

    more,
    > is
    > > for the images to behave as if they were absolute, but relative to a
    > > container if that make sense.

    >
    > > I have a block (say a DIV or a TD) with a certain width and height. Now,

    I
    > > want to position a couple of images within that space using absolute

    terms
    > > within the constraint of the block.

    >
    > Fine.
    >
    > <img style="position: absolute; left: Xpx, top: Ypx;" ...>
    >
    > (put the style in your stylesheet if you wish)
    >
    > Flavour the X and Y for each image.
    >
    > Now the obscure part:
    >
    > Position absolute does not position relative to the parent element, it
    > positions relative to the containing element.
    >
    > The containing element is the ancestor element that is not position:

    static,
    > or the body element, whichever comes first.
    >
    > To position relative to the parent element that element must be made a
    > containing element. Do this with
    > <div style="position: relative;"> - no top or left.
    >
    > The images will now be positioned within the div, regardless of where the
    > div is on the page.
    >
    >


    Thank you Richard, that is really clear now.

    - Nicolaas
    WindAndWaves, Oct 20, 2004
    #5
    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. Jerry Camel

    Image Positioning

    Jerry Camel, Oct 11, 2005, in forum: ASP .Net
    Replies:
    5
    Views:
    435
  2. ftgow

    Image positioning.

    ftgow, Jun 9, 2004, in forum: HTML
    Replies:
    1
    Views:
    410
    Jeff Thies
    Jun 10, 2004
  3. Ilya
    Replies:
    9
    Views:
    1,806
  4. bulge
    Replies:
    8
    Views:
    6,008
    bulge
    Jul 19, 2004
  5. Thomas Storm

    positioning image files

    Thomas Storm, Aug 18, 2004, in forum: HTML
    Replies:
    1
    Views:
    415
    Nik Coughin
    Aug 18, 2004
Loading...

Share This Page