www.webdeveloper.com
Results 1 to 14 of 14

Thread: layer positioning problems

  1. #1
    Join Date
    May 2003
    Posts
    4

    layer positioning problems

    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?

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773

  3. #3
    Join Date
    May 2003
    Posts
    4
    the page is at http://www.minihub.org/~diane/dean/index.html.

    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,
    diane

  4. #4
    Join Date
    May 2003
    Posts
    4

  5. #5
    Join Date
    Nov 2002
    Location
    Hampshire, England
    Posts
    42
    Hi,

    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:
    Code:
    <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.
    Code:
    <div class="centre">
    
    all your original body content goes here
    ...
    ...
    ... etc
    
    </div>
    With any luck this should sort your problem out

    Paul

  6. #6
    Join Date
    May 2003
    Posts
    4
    hi Paul

    Thank you very much for your help.
    that worked like a dream!

    diane

  7. #7
    Join Date
    Sep 2006
    Posts
    1

    Smile Layer positioning

    I 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

    Paul

  8. #8
    Join Date
    May 2005
    Posts
    2,040

  9. #9
    Join Date
    Mar 2007
    Posts
    1

    Layer positioning in browser

    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.

  10. #10
    Join Date
    Mar 2007
    Posts
    2

    Question menu positioning

    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?

  11. #11
    Join Date
    May 2008
    Location
    canada
    Posts
    2

    Hack For Internet Explorer

    thanks for the code that fixed my problem perfectly in fire fox but in Internet Explorer The position is all wrong.

    http://tmvc.com/TMVC/web-content/index2_test4.html

    I am beginer so I expect that there is conflicting code somewhere or I need the hack can anyone help?

  12. #12
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773

  13. #13
    Join Date
    May 2008
    Location
    canada
    Posts
    2

    Hack?

    .centre {
    width: 1420px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    }
    /*hack for IE5*/
    body {
    text-align: center;

    /*hack for IE5*/

    does anybody know this hack.

  14. #14
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles