SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Static Div's and scrolling

    I'm constructing a page that contains 2 Div's. One as a small title bar with some navigational controls, and then a second div, potentially containing alot of information which will probably scroll out of the viewport.

    I need to keep the first Div (title) on the page at all times while the user scrolls the page!!

    Can anybody offer any guidance on how to make this happen, I've tried fixing the position and setting z-indexes on one and both Div's but with no effect.

    Mitch

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    How about assigning "overflow:scroll" to the 2nd <div> and making its content area smaller? Something like this:
    Code:
    <html>
    <head>
    <style type="text/css">
    #topframe {
      width: 100%;
      height: 200px;
    }
    #content {
      height: 300px;
      overflow: scroll;
    }
    </style>
    </head>
    <body>
    <div id="topframe">
    Nav links, header images, etc...........
    </div>
    <div id="content">
    <h3>Welcome</h3>
    <p>Once this content area grows to more than 300 pixels in height, the scrollbars should appear.</p>
    </div>
    </body>
    Hope this helps!

  3. #3
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    almost

    That does work but it's not really what I was trying to achieve.

    in effect, I want one Div to be affected by viewport scrollbars but not the other (so it appears to float)

    Thanks for replying

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I understand what you're trying to accomplish, but fixed positioning is not supported well in all browsers yet. Wish I could help you out more.

  5. #5
    killall -9 lusers
    Join Date
    Oct 2002
    Location
    Cincinnati, Ohio, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed positioning works great in Gecko-based browsers (Mozilla, Netscape--recent versions, of course), but not at all in IE. I use it for the main navigation on my site ( http://www.goodchrist.com ). It keeps the navigation in view when the user scrolls down in Mozilla, but in IE, you still have to either scroll back up or all the way down (to the text nav at the bottom) to navigate. At least once IE catches up I won't have to change a thing (unless they do something stupid).

    I'd imagine you could come up with some sort of javascript hack to get the effect you're looking for cross-browser, I just didn't feel like going to the trouble for mine.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,523
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is probably not any help but:
    Mozilla 1.1 supports fixed positioning so your idea would work on that platform.

    IE6 supports fixed positioning of the background image. So if you only needed a title and not any navigation you could fix an image in one place on the background.
    i.e.
    Code:
    <style type="text/css">
    <!--
    body 
    {
    background-image: url("image.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position :50% 50%;
    }
    -->
    </style>
    Otherwise there's always frames or javascript - (both unpleasant).

    Paul


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
  •