Layers and screen resolution

[shawn]

I have a layer that holds a site map. At a screen resolution larger than 1024x768 the layer moves where I do not want it to be.

I am using this CSS to control the position:

}
div {
text-align: center;
position: absolute;
left: 620px;
top: 300px;
right: auto;
bottom: auto;
width: 250px;
height: 200px;
z-index: 1;
float: none;
visibility: visible;

Shawn

[TGecho]

Where do you want it to be?

[shawn]

Where do you want it to be?

Well, with that CSS and 800x600 and 1024x768 it is right where I want it to be - the overall size of the design is 750 pixels by 600 pixels. So this menu sits in the right hand side.

The problem comes when the resolution is larger than 1024x768, the layer moved to the left - if the resolution is set to 1405 x 1050 ends up in the middle of my text to the the left. Basically id moves to the middle of the page.

Shawn

[TGecho]

It looks like it staying in the same spot relative to the top-left. Your text is expanding to fill the screen, making it look like it's moving into the middle. You might try getting rid of left:620px and define right:20px or whatever distance you want. That'll keep it on the right side of the screen no matter how wide it is.
On a different note, it looks like a few of the things you're defining aren't needed, unless you're overriding something else:

right: auto;
bottom: auto;
float: none;
visibility: visible;

[shawn]

It looks like it staying in the same spot relative to the top-left. Your text is expanding to fill the screen, making it look like it's moving into the middle. You might try getting rid of left:620px and define right:20px or whatever distance you want. That'll keep it on the right side of the screen no matter how wide it is.

The entire layout is fixed at 750 pixels wide; and is centered on the page. As the screen resolutions gets smaller thie layer seem to move left more and more.

I ran across some jave scripts that are suppose to fix such a problem by adjusting for the different screen resolution. I am not sure if they work as I have not tried them.

I found this on another website:

"Do not expect absolutely positioned layers to remain aligned with either centered tables or centered page content as the browser window resizes or the resolution changes. The centered content will move away from the absolutely positioned content, causing many to think that their layers are moving. This is not the case. One solution would be to obtain one of the DW extensions that allows you to 'anchor' your layers to the centering content, so that they move in lockstep. One such extension (and the one I would recommend) is the SnapLayer extension from PVII"

I will check this and see if it works!

[shawn]

I downloaded project sevens SnapLayer extension - this has resolved the issue.

I would have really liked to have found a non java solution however.

[TGecho]

Ahh... I didn't realize your page was centered. Ok, here's what you need to do:

center your table using the absolute positioning method

#page {
width : 750px;
position : absolute;
left : 50%;
margin-left : -375px;
}

then, place the menu inside the table somewhere and position it

#menu {
text-align: center;
position: absolute;
left: 620px;
top: 300px;
width: 250px;
height: 200px;
z-index: 1;
}

It'll stay with your centered table no matter what since it's getting its boundaries from the table's position.

Hope this helps

[shawn]

TGecho -

Thank You - that worked. With that CSS it basically outs the table in a layer right? And my menu layer is then getting its position from it as you said.

I noticed the Netscape borwsers do not disp;ay it correctly. Now the table is centered in IE it is way right in netscape which causes a left to right scroll.

Shawn

[TGecho]

Which version of netscape? I dropped it in v7 and it worked fine. I don't have any other versions on this box to test on.

[shawn]

I had some other CSS stuff that was causing the problems - never mind :)

I did have one final question however, do I apply the class "page" to the table tag or body?

Shawn

[TGecho]

It's actually an ID, but... :)
I guess either one would work. Might as well put it on the table.