Matching layers & aligning content

Keep centered image and offset contant aligned

[plopsybunny]

Hi there,

I have an image with an off center area designated for content.

I have an image map on the same layer as my image for the relevant links.

I have a second layer with a div (to allow scrolling) aligned to the relevant space over the image.

The image is centered and always stays in the middle of the re-sized window, yet the layered text is positioned absolutely.

However this only works for a specific viewing window size. If the window is smaller or larger then the text shoot off to the side, up or down the page.

Any thoughts on how I can control the layers so they stay in alignement?

Any suggestions?

[tedster]

The x and y coordinates you use with a position:absolute rule are calculated relative to the containing block, and it sounds like in your case, the containing block is the body element itself - or at least some element whose position changes with the window size. Create an apprpopriate containing <div> for the image and the scrolling div and you may be able to clear up the problem.

For more help, see
[w3schools.com...]

Demo
[w3schools.com...]

[plopsybunny]

I thought I did vae it iall ina a contining div..but apparently not.

I've posted the offending code below (no css yet as I just want the ruddy thing to work before I cut out the CSS code).

<div align="center">
<img src="IMAGES/Biography.jpg" width="500" height="568" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="2,498,64,523" href="#Contact" target="contact.html" alt="Contact Information">
<area shape="rect" coords="65,498,127,523" href="#Booking" target="booking.html" alt="Booking Information">
<area shape="rect" coords="130,498,195,523" href="#Sitemap" target="sitemap.html" alt="document Information For This Site">
<area shape="rect" coords="390,499,499,570" href="#Home" target="index.html" alt="Home Page">
</map>
<div id="Layer1" style="position:absolute; width:319px; height:348px; z-index:1; left: 551px; top: 75px; overflow:auto" >
<div align="left">
<p>This is the text for Nikki's site ..</p>
<p>I wonder what it will look like in a browswer - this would just be too exciting if it fixes the problems!</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Some stuff here too ;) </p>
</div>
</div>
</div>

I really need some help - the coffee isn't working yet ;)

thanks again :)

<removed site specifics from code.
See Forum Charter [webmasterworld.com]>

[edited by: tedster at 1:59 am (utc) on Mar. 20, 2007]