I am having some difficulty working out how to stop the layers on my webpage from moving around when the browser window size changes. In other words, the position of the layers seems fixed relative to the size of the browser window, so if I show the browser's sidebar, for example, the pictures inside the layers move on the page.
How do I fix the position of the layer so it stays in the same place on the webpage (which is in a table), no matter what happens in the browser window?Could you post a link or the code that you're using? Without that there's not much we can do.the page is at <!-- m --><a class="postlink" href="http://www.minihub.org/~diane/dean/index.html">http://www.minihub.org/~diane/dean/index.html</a><!-- m -->.
there are four <div> layers at the start of the body, which are all in the same position and hidden and shown in response to menu selections.
If I show my favourites sidebar in IE, the page looks as I want it, but if I take the sidebar away, the pictures are no longer in the correct position.
thanks,
dianesorry, try
<!-- w --><a class="postlink" href="http://www.minihub.org/~diane/dean/index.htmlHi">www.minihub.org/~diane/dean/index.htmlHi</a><!-- w -->,
It looks to me as though your problem is in fact the other way around. The layers have been absolutely positioned and are staying in the same place all the time while the rest of the content has been centred and moves with the screen resize.
When you use the favourites side bar you are just reducing the screen size etc. You would get the same effect if you dragged the right side of the screen over a bit.
I assume you want the layers to stay in a relative position to the rest of the content. One way to achieve this (without re-designing everything) is to construct a div around the whole content which you can centre and then apply a position relative to it. Which by inheritance will make the absolutely positioned divs/layers in your content absolutely positioned but relative to the position of the fluctuating new div. (does that make sense?).
Anyway something like this might work:
Put this style in-between the head tags on your page:
<style type="text/css">
.centre {
width: 750px;
margin-right: auto;
margin-left: auto;
position: relative;
}
/*hack for IE5*/
body {
text-align: center;
}
</style>
Next you will need to surround your whole page with this class as follows. Start on the next line after the opening <body> tag and close the div the line before the closing</body> tag.
<div class="centre">
all your original body content goes here
...
...
... etc
</div>
With any luck this should sort your problem out
Paulhi Paul
Thank you very much for your help.
that worked like a dream!
dianeI wanted to thank diane for asking this particular question over 3 years ago, and a huge thank you to Paul O'B for a reply that solved my problem.
This is definately a piece of code that many people will be looking for.
Thanks again.
Regards
PaulNot enough to do at SP, eh Paul?
I'm really am very thankful to Paul for coming up with this solution. I had been struggling for sometime for the same problem faced by Diane. And it did work like a dream!!!
Thanks a lot Paul
Thanks to Diane for posting the question.
I am having the same problem, except my menu is all in javascript. It is positioned by absolute postion, but when you resize, expand or streatch the internet window the menu moves. (My page is a centered table and the menu moves outside that table.)
I made the changes to the style to relative postion and centered which works with the main menu, but then my drop downs are still out of wack. Is there anyway to fix this in one big shot or at all?
How do I fix the position of the layer so it stays in the same place on the webpage (which is in a table), no matter what happens in the browser window?Could you post a link or the code that you're using? Without that there's not much we can do.the page is at <!-- m --><a class="postlink" href="http://www.minihub.org/~diane/dean/index.html">http://www.minihub.org/~diane/dean/index.html</a><!-- m -->.
there are four <div> layers at the start of the body, which are all in the same position and hidden and shown in response to menu selections.
If I show my favourites sidebar in IE, the page looks as I want it, but if I take the sidebar away, the pictures are no longer in the correct position.
thanks,
dianesorry, try
<!-- w --><a class="postlink" href="http://www.minihub.org/~diane/dean/index.htmlHi">www.minihub.org/~diane/dean/index.htmlHi</a><!-- w -->,
It looks to me as though your problem is in fact the other way around. The layers have been absolutely positioned and are staying in the same place all the time while the rest of the content has been centred and moves with the screen resize.
When you use the favourites side bar you are just reducing the screen size etc. You would get the same effect if you dragged the right side of the screen over a bit.
I assume you want the layers to stay in a relative position to the rest of the content. One way to achieve this (without re-designing everything) is to construct a div around the whole content which you can centre and then apply a position relative to it. Which by inheritance will make the absolutely positioned divs/layers in your content absolutely positioned but relative to the position of the fluctuating new div. (does that make sense?).
Anyway something like this might work:
Put this style in-between the head tags on your page:
<style type="text/css">
.centre {
width: 750px;
margin-right: auto;
margin-left: auto;
position: relative;
}
/*hack for IE5*/
body {
text-align: center;
}
</style>
Next you will need to surround your whole page with this class as follows. Start on the next line after the opening <body> tag and close the div the line before the closing</body> tag.
<div class="centre">
all your original body content goes here
...
...
... etc
</div>
With any luck this should sort your problem out
Paulhi Paul
Thank you very much for your help.
that worked like a dream!
dianeI wanted to thank diane for asking this particular question over 3 years ago, and a huge thank you to Paul O'B for a reply that solved my problem.
This is definately a piece of code that many people will be looking for.
Thanks again.
Regards
PaulNot enough to do at SP, eh Paul?
I'm really am very thankful to Paul for coming up with this solution. I had been struggling for sometime for the same problem faced by Diane. And it did work like a dream!!!Thanks a lot Paul
Thanks to Diane for posting the question.
I am having the same problem, except my menu is all in javascript. It is positioned by absolute postion, but when you resize, expand or streatch the internet window the menu moves. (My page is a centered table and the menu moves outside that table.) I made the changes to the style to relative postion and centered which works with the main menu, but then my drop downs are still out of wack. Is there anyway to fix this in one big shot or at all?