positioning image

W

WindAndWaves

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
 
R

rf

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.
 
W

WindAndWaves

rf said:
WindAndWaves


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.

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
 
R

rf

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.
 
W

WindAndWaves

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

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. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads


Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top