Problems with layers position when resolution changes

[Tassja]

Hi,

After getting some advice here the other day I realised that I would need to make my website more fluid and not use layers..

I designed the website and created a template out of it as there was going to be only one editable region.

It was all ready to have the content put in. But when I checked it in a browser the navigation layer and text layer are moving with different screen resolutions. how can I position it so that is is relating to the background layer?

It needs to stay in line for the website to look right..

Client coming today to handover site.

Please Help
Tassja

[tedster]

I'd prefer to use the word "div" instead of "layer" in my reply, because in standard HTML there has never been a layer element. Netscape 4 tried to introduce it, but it never caught on. Dreamweaver sometime used the word "layer", but it was used to reference a div.

Look to position rules for the various divs in your CSS. Their positions might be set with difference reference points for the different divs. If a div is nested within another div, then any offset rules (left, right, top, etc.) are made with reference to the containing div. If a div is not nested, then offset rules are measured in relation to the entire window.

Make sure that you are using "relative" and "absolute" properly. See [w3.org...] for details.

Also, make sure the units you are using for position rules are consistent. If you are using percentages, those will be a percent of the containing block's height (for top or bottom offset rules) or the containing block's width (for left or right offset rules.) If you are mixing up pixels, percents, ems, etc. in your offset rules, then you can also get unexpected behaviors as rthe window size changes.

[penders]

Problems with layers position when resolution changes

Are you refering to the position of "layers" being positioned incorrectly (perhaps on top of each other) when the page resizes. But is corrected when you refresh the page? Are you testing IE6? If so, this may be to do with IE6 not cascading styles correctly, specifically when child elements are positioned relatively. Adding position:relative to the parent element can sometimes solve this.

[pauldow]

If you are using Dreamweaver, I found this free extension
[projectseven.com...]
that will snap the layer (excuse me, Div) to an element on the screen. Put a 1X1 image (or other named item) centered somewhere. Then set this up so it positions your layer both on load and on resize.

Now to semi-hijack the thread for my similar issue.
I'm using this, and it puts the layer in the right position on the screen. When I go to print, the layer is way over to the right, and it clips off the right side. Since the page I have is using a centered table, the Div is set to an absolute pixel position based on the screen position which is way right for the printed page.

I tried using a CSS media print section to reposition the items, but it seems to be ignored since the position is already set.

Anyone have a suggestion on that?
Thanks

[penders]

...I tried using a CSS media print section to reposition the items, but it seems to be ignored since the position is already set...

Using an @media print {...} rule should be OK, but the styles you are overriding for printed media may not be the only styles effecting the position of your DIV (eg. you say you have a centred table etc...)?

It may be better to separate your print styles into a print-only stylesheet?