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

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


    - Nicolaas
    WindAndWaves, Oct 19, 2004
    1. Advertisements

  2. WindAndWaves

    rf Guest

    Gurus is out of the office today. Will I do?
    position: absolute; the images, giving the images direct parent position:
    relative; (omit top and left) to make it a containing element.
    rf, Oct 19, 2004
    1. Advertisements

  3. WindAndWaves

    WindAndWaves Guest

    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.

    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?



    Thank you

    WindAndWaves, Oct 20, 2004
  4. WindAndWaves

    rf Guest

    WindAndWaves wrote

    [positioning images in a div]

    <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
  5. WindAndWaves

    WindAndWaves Guest

    Thank you Richard, that is really clear now.

    - Nicolaas
    WindAndWaves, Oct 20, 2004
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.