Positioning, Part 5

The technique we'll discuss in this lesson will allow you to position things with pinpoint accuracy regardless of browser settings.

Precise placement with spacers

We can place something with exact precision with a 1x1 clear image used as spacer. This works especially well if you are used to using x and y coordinates at ImageMagick.

Here is my Teddy table using just align="center".

<td align="center>
teddy bear



I want Teddy down some and to the right a bit. I want pixel precise control over the placement. How can I do that? With spacer images.

Spacer images in a single cell

You can use a transparent (clear) image as a spacer. Use a 1x1 image and simply resize it in the image tag.

Vertical Placement

We have used the <br> tag to move images up and down. Now we'll just use an clear image instead. To move something down, specify how far with height="?". The width doesn't matter, so ser it at "1".

Ex: <img src="clear.gif" height="" width="1" alt="spacer"><br>
The break tag moves you to the next pixel down.

To move something up, use <br> after the image want to move to clear, than use your spacer.

Ex: <br><img src="clear.gif" height="" width="1" alt="spacer"><br>

<td valign="top"><img src="clear.gif" height="104" width="1" alt="spacer"><br>
spacer
teddy bear



Horizontal Placement

We have used &nbsp; to move things left and right. Now we'll use a spacer image with width="?". To move something left, use your spacer before the image you want to move. To move something to the right, use the spacer after the image you want to move. The height does not matter so set it at "1".

<td valign="top" align="left">
<img src="clear.gif" height="104" width="1" alt="spacer"><br> (move down)
<img src="clear.gif" height="1" width="92" alt="spacer">(move left)
<img src="teddy_bear1.gif" width="100" height="117" alt="teddy bear">
spacer
spacer teddy bear



Now my Teddy is right where I want him. I've gone down-and-right in this example, but you can use down-and-left, right-and-up or left-and-up as well.

"Gnubee, what about the spacer tag?"
I've chosen to ignore it because it is not supported in all browsers. Using an image as a spacer works with all browsers since it is just an image.

Table Lab

Use the techniques in this discusson to place an image on a background. Post your table and your code.


As always, questions and comments are welcome.

Happy tabling,
Gnubee

Table Talk

Positioning, Part 5