Keeping Graphics 'In their place'

[dannydont]

I have been trying unsuccessfully to place graphics 'on top' of text (or other graphics). They display in totally different places when using different browsers. I test with Internet Explorer, Netscape, FoxFire, and Opera. I 'think' I understand 'absolute' positioning and I do not believe that it will work with differing screen resolutions or when resizing windows. So I have tried 'relative' (?) and it just frustrates me. Is there any 'easy' way to do this?

[PageBuilder]

It's not perfect, but try something like this...

<style>
h1.x
{
position: absolute;
left: 50%;
margin-top: -200px;
margin-left: -500px;}
</style>

<h1 class="x"><A HREF="http://__________" target=blank><img src="__________________" Border="0"></h1></A>

Change the "-200" and "-500" to the desired settings.

The trick is to start in the middle of the screen and work your way out. That way the individual screen resolution is less of a problem.

- Mike

[Askalon]

I had the same issue. I had to put a "best viewed at" so that readers would get it right. If you can find a solution, i would be happy to hear it.

[LJK]

Hi -
If you've got to do precise positioning, try a fixed-width layout with css.
Relative positioning is a lot friendlier than absolute - or negative margins, IMHO.

Remember, it's a location relative to that element's normal flow in the document.
If you need it to be 20px to the left, then: position:relative; left:-20px;
Or if 200px downwards - top:200px; [Best to use left or top properties...]
With the values being towards or away from it's orig. position in its parent tag.

Absolute takes an element completely out of the normal location/flow
and sets it relative to the browser window.

Good luck,
El

[chufflebean]

Specifically, what I am trying to do is place a "new!" image over another image. I tried to use relative position to accomplish this, and it worked. The "new!" image was right where it was supposed to be...but then all of the text that followed it was also displaced. Is this normal?

BTW, I was able to achieve almost the same effect by creating a table with the first image as a background, and then placing the overlay image within the table. But that was rather a lot of work, and then I lost the border around the first image. So I'd rather not do that if I don't have to.

[LJK]

Hi -
If it was just a word, I'd add it in a graphics program...
but you could also use the image as a bkgnd. w/ css styles -
make the container the right w & h for that img, then any paragraph
or text within should be fine.

[Yes, it's normal for subsequent tags to be off if you're not careful
w/ relative positioning - since you've altered the normal 'flow' a bit...]

Good luck,
El