Layering Images - help!

[Phip]

i'm trying to layer an image right over another. they need to be exact. here is what i'm doing:

http://phip.chronicyouth.com/account/

i am currently using <div> but it doesn't seem to work on all the computers i view it on. 14", 19", and 17". all different resolutions(if that matters). how would i, if i'm 'aloud' to by standards, do this.

well....good luck at viewing the example....seems my host is having problems find me space to upload stuff. so things aren't working when i upload them which is screwing the site up.

[QuackHead]

Originally posted by Phip
i am currently using <div> but it doesn't seem to work on all the computers i view it on. 14", 19", and 17". all different resolutions(if that matters).

That will matter.

Because your page is centered in the window, any time you re-size the page, the coodinates of the original picture will change, which will mess up your positioning.

2 options.
1) Align your site to the left of the screen, which will keep the left coordinates the same.
2) Write a function that dynamically repositions the picture when the window is re-sized. (and on page load for that matter)

this'll take a while for even me to figure it out, so get started and post questions when you run into trouble.

~Quack

[pardicity3]

I am not the best in javascript (what's that? I am terrible?) but I have seen this done before. Just write a little function that goes something like this:

a)find out how far you want your div's left property from the middle of the screen (you need to do this, not the script )

b)Find the total width of the available screen size
c)divide that number by 2
d)then subtract what ever you need to from your new number to get how far you want the pictures from the middle
e)assign your new number to a variable
f)set your two div's lefts as that variable

I think that might give you your desired results. You don't need to mess with the top property unless you have your page centered vertically, which I don't think is the case. Hopefully this will help you, and I will look into actually constructing an example script for you. But I don't know how well that will go......

[QuackHead]

thanks pardicity,

that basically sums up option #2

I just didn't have time to try and code an example

~Quack

[pardicity3]

No problem quack. I have too much free time! lol. Hey, by chance do you think you could give me some of your posts so that I wouldn't have to be junior anymore? lol, I wish that was possible!

[Phip]

cool, thanks. Now i just need to figure out how to write it. sense, i am not a jscript programmer

[pardicity3]

I've been busy, and I haven't had time yet today, but I will try and get a make-shift script up as soon as possible. Good luck untill then!

[Phip]

thanks

[pardicity3]

Here is the script I made (probably not the best, but it might work...). Put this in the head section:

PHP Code:

<script type="text/javascript" language="javascript">
var aw = window.screen.availWidth  //gets the available width ([B]A[/B]vailable [B]W[/B]idth)
var cw = aw/2  //divides the width by 2 ([B]C[/B]enter [B]W[/B]idth)
var pw = cw - 150 //you need to change the last number to the
                    //distance you need your image to be from the
                    //center of the screen
                    //([B]P[/B]osition [B]W[/B]idth)
</script> 


I gave some comments in there to help you find out why I named some of the variables why I did. And remember you can change those variables to something easier to remember!
Then put this in the body section:

PHP Code:

<script type="text/javascript" language="javascript">
document.write("<div style='position: absolute; left:" + pw + "; top: 105;'>")
document.write("<img src='yourimage.gif/jpeg'>")
document.write("</div>")
</script> 


Okay, so I have tried this in the following browsers:

Netscape v6.2
IE 6
Opera v6.0

It is worked in all of those. But like I said I am not a very top-of-the-line js programmer so hopefully we can get some xperts over here to maybe check out the script i made! But as far as I know this should work. Good luck!!!

[Phip]

sweet, thanks.

is there like a onwindow.resize(i made that up) funtion or something?

[pardicity3]

I am pretty sure there is something like that, but I am not positive. You should probably go over in the javascript forum and ask that, as I am positive that I couldn't give you a correct answer on that one. But I will do some searches and check things out.

[joh6nn]

window.onresize = functionName;

[Phip]

thanks yo

[Vladdy]

I think you are making it too complicated.
Just make your house.gif a background of a division and place your car image inside of this division. Control the position of the car.gif using margin-top and margin-left.
Here is the sample page (car.gif is attached just for demo). this DIV element can be placed anywhere on your page as long as you do not restrict its size.....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
                       "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Picture Overlay</TITLE>
</HEAD>
<BODY>

<DIV STYLE="display:block; background-image:url(house.gif); 
            width:500px; height: 375px;">
<IMG STYLE="margin-top: 150px; margin-left: 100px;"
 SRC="car.gif" ALT="My Dream Car" 
 WIDTH="361px" HEIGHT="162px">
</DIV>

</BODY>
</HTML>

No JS needed

[Vladdy]

Sorry forgot the car.gif -
put all in the same folder for the sample script to work without modification... get house.gif off Phip's site.....