Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Fixed position relative to parent container

  1. #1
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Fixed position relative to parent container

    I did a lot of research on this but apparently it's not possible with pure html/css as position:fixed only fixes it to browser window, so I thought I'd ask in this section.
    I have a page container, and inside it are two sections. The left section is a vertical nav bar with some links, while the right section is the actual page content. I want the right side to be scrollable, but the left side to be fixed to the page container (ie won't scroll when I scroll that page), but be able to move when I scroll the entire browser window.

    Code:
    <div id="pagecontainer">
    
        <div id="linkspage">
    
            <div class="sidelinks"> <!--UNSCROLLABLE-->
                <a href="#page1" class="link">Link 1</a>
                <p>
                <a href="#page2" class="link">Link 2</a>
                <p>
                <a href="#page3" class="link">Link 3</a>
                <p>
                <a href="#page4" class="link">Link 4</a>
                <p>
            </div>
    
            <div class="linkscontent"> <!--SCROLLABLE-->
                content of links page
            </div>
    
        </div>
    
        //OTHER PAGES
    
    </div>
    I've already tried to set #pagecontainer and #linkspage to position:relative, and .sidelinks to position:absolute, that doesn't do anything as far as I can tell... or it just doesn't do what I want.

    Here's a picture:



    Thanks.

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,381
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    You mean something like the following?
    Code:
    <div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background: #dedede">
    
    <div style="position: absolute; left: 80px; top:2%; width:18%; bottom: 2%; border: 2px solid black; padding: 10px; z-index:1; background: white; overflow: auto">
    link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>
    </div>
    
    <div style="position: absolute; left:20%;margin-left:100px; right: 60px; top:2%; bottom: 2%; border: 2px solid black; padding: 10px; background: white; z-index:1;overflow: auto">
    text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
    </div>
    
    main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>
    
    </div>

  3. #3
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    You're basically separating the nav bar and page content into separate divs directly on the .pagecontainer div. It will work but only because they're completely unrelated to each other... But the format of my page is #pagecontainer -> #linkspage, then inside #linkspage there are two divs .sidelinks and #linkscontent. I need to keep the nav bar and page content inside the same div because they're on the same page, and it's easier to fade it in/out when I just call:

    Code:
    $('linkspage').fadeIn();
    Instead of

    Code:
    $('.sidelinks').fadeIn();
    $('#linkscontent').fadeIn();
    That will be very messy treating .sidelinks and #linkscontent as two separate pages.

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,381
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    I don't see the problem, sorry. Can you give me a demo of the problematic page(s)?

  5. #5
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    The problem is I've got like 30 pages. If I separate each nav bar into its own page the code will be extremely messy.

    Instead of:

    Code:
    <div id="pagecontainer">
    
        <div id="page1">
    
            <div class="sidelinks"> <!--UNSCROLLABLE-->
                //links for page 1
            </div>
    
            <div class="pagecontent"> <!--SCROLLABLE-->
                content of page 1
            </div>
    
        </div>
    
        <div id="page2">
    
            <div class="sidelinks"> <!--UNSCROLLABLE-->
                links for page 2
            </div>
    
            <div class="pagecontent"> <!--SCROLLABLE-->
                content of page 2
            </div>
    
        </div>
    
        <div id="page3">
    
            <div class="sidelinks"> <!--UNSCROLLABLE-->
                links for page 3
            </div>
    
            <div class="pagecontent"> <!--SCROLLABLE-->
                content of page 3
            </div>
    
        </div>
    
        <div id="page4">
    
            <div class="sidelinks"> <!--UNSCROLLABLE-->
                links for page 4
            </div>
    
            <div class="pagecontent"> <!--SCROLLABLE-->
                content of page 4
            </div>
    
        </div>
    
    </div>
    Which clearly nests each page within #pagecontainer, and each page's contents within #page,
    If I separate each navbar into a different page I'll end up with:

    Code:
    <div id="pagecontainer">
    
        <div id="page1">
    
            <div class="pagecontent"> <!--SCROLLABLE-->
                content of page 1
            </div>
    
        </div>
    
        <div id="page2">
    
            <div class="pagecontent"> <!--SCROLLABLE-->
                content of page 2
            </div>
    
        </div>
    
        <div id="page3">
    
            <div class="pagecontent"> <!--SCROLLABLE-->
                content of page 3
            </div>
    
        </div>
    
        <div id="page4">
    
            <div class="pagecontent"> <!--SCROLLABLE-->
                content of page 4
            </div>
    
        </div>
    
        <div class="sidelinks" id="page1links"> <!--UNSCROLLABLE-->
            //links for page 1
        </div>
    
        <div class="sidelinks" id="page2links"> <!--UNSCROLLABLE-->
            //links for page 2
        </div>
        
        <div class="sidelinks" id="page3links"> <!--UNSCROLLABLE-->
            //links for page 3
        </div>
       
        <div class="sidelinks" id="page4links"> <!--UNSCROLLABLE-->
            //links for page 4
        </div>
    
    </div>
    The navbar links would have the same hierarchy as the pages themselves. With 30+ pages this would get extremely messy and confusing, as the navbar should be a child div of the page, not a completely independent div.

    When I fade in a page, instead of simply calling:

    Code:
    $('#page1').fadeIn();
    Now I'll need to remember to both the page and the navbar assigned to that page:

    Code:
    $('#page1,#page1links').fadeIn();

  6. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,381
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    It is not required to write down the page links for every page.
    I created something for you that does what you want (I guess), see this.
    I left out certain things (like your classes) because they are not needed in the basic script.
    If this is not what you want, just tell me exactly what you need.
    I did not take into account your jquery lines.

  7. #7
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I need the links on each page because it's different for each page. On page 1 the links might be "a" "b" "c" "d", on page 2 it would be "x" "y" "z".

  8. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,381
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    Quote Originally Posted by windbrand View Post
    I need the links on each page because it's different for each page. On page 1 the links might be "a" "b" "c" "d", on page 2 it would be "x" "y" "z".
    Then once you have "x" "y" "z" to the left (in a fixed position), how would you ever get back to "a", or "b", etc.?

  9. #9
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Because the links don't link to each other, they link to sub-pages for each page. For example on page 1 I might have links that link to page 1-a, page 1-b, page 1-c, the links on page 2 might be 2-a, 2-b, 2-c.

  10. #10
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,381
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    Quote Originally Posted by windbrand View Post
    Because the links don't link to each other, they link to sub-pages for each page. For example on page 1 I might have links that link to page 1-a, page 1-b, page 1-c, the links on page 2 might be 2-a, 2-b, 2-c.
    That does not resolve the problem (= once you have "x" "y" "z" to the left (in a fixed position), how would you ever get back to "a", or "b", etc.?). It can only be solved by adding links for "a", or "b", etc. in the sub-pages for "x" "y" "z". If that's what you want, it can be done.

Similar Threads

  1. Resolved position relative problem in ie8
    By james438 in forum CSS
    Replies: 3
    Last Post: 09-28-2011, 03:50 AM
  2. Replies: 6
    Last Post: 01-12-2011, 08:22 PM
  3. Replies: 1
    Last Post: 12-10-2010, 02:32 AM
  4. relative paths in Ajax div container
    By arachnid in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 11-02-2007, 04:54 PM
  5. position:absolute/relative
    By Tonka in forum JavaScript
    Replies: 1
    Last Post: 09-24-2004, 09:56 AM

Bookmarks

Posting Permissions

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