SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fix section to top of page

    What's the best way to do this?

    http://page-test.co.uk/top.html

    I just want the top section to be fixed on page scroll but without other content being visible underneath it / at the side of it.

    Also, ideally I don't want to have to set a fixed offset value. E.g to offset the other content by 60px as the top section needs to be flexible height (if possible).

  2. #2
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there johnsmith153,

    try it like this...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Untitled Document</title>
    
    <style type="text/css">
    body {
        margin:52px 0 0;
        font-family:verdana,arial,sans-serif;
        font-size:16px;
        background-color:#fff;
     }
    #top-section {
        position:fixed;
        width:100%;
        top:0;
    } 
    #top-section div {
        height:30px;
        padding:10px;
        border:1px solid #000;
        color:#000;
        background-color:#fc9;
     }
    #bottom-section {
        padding:20px;
        color:#f0f0f0;
     }
    </style>
    
    </head>
    <body>
    
    <div id="top-section">
    <div>top section</div>
    </div>
    
    <div id="bottom-section">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p><p>
    Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
    lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
    ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
    euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu 
    et mauris scelerisque tristique. Donec fringilla mauris dolor, 
    sit amet vulputate lacus. Nulla feugiat mattis nulla non 
    tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis 
    nisi eget neque tempus facilisis eu quis sapien.
    </p><p>
    Ut et metus a massa rhoncus cursus. Integer luctus luctus enim, 
    tristique rhoncus enim feugiat eu. Etiam porttitor volutpat 
    massa sed congue. Sed eros nisl, volutpat ac dapibus quis, 
    ultricies id diam. Mauris at elit eget quam ullamcorper sagittis 
    ac vel lorem. Ut nec justo libero. Phasellus eget pharetra elit. 
    Proin viverra, neque non eleifend vehicula, nulla augue gravida 
    felis, non fermentum lorem odio ac nunc. Aliquam pretium 
    scelerisque consectetur. Proin ultrices urna non magna interdum 
    a sodales turpis suscipit. Mauris sollicitudin nisl ac arcu 
    sodales cursus. Maecenas bibendum neque vitae orci mollis ac 
    vulputate ante auctor. Sed sodales odio id ante sagittis 
    faucibus.
    </p>
    </div>
    
    </body>
    </html>
    
    coothead

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,494
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    Also, ideally I don't want to have to set a fixed offset value. E.g to offset the other content by 60px as the top section needs to be flexible height (if possible).
    It's not possible to automatically account for the height of the fixed element because fixed elements are removed from the flow and therefore the only way you can accommodate other elements around them is by using margins (as in cootheads code above) or padding to match the height of the fixed element.

    That's why fixed layouts often fail and fixed elements are best for simple one line header and footers that don't need to grow. You can of course use ems to cater for text resize but won't be able to cater for a variable height dependent on content though.

    To block out the content on the right of your fixed element you would need to do the same as cootheades code above but use a white background and then inside the main div create your smaller bordered element also with a white background to hide the text as it passes below.

  4. #4
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both for your help.

    I'll have to set the height then.

    I've got it working and it actually works on nearly all mobile devices which is great (except Windows Phone anyway).

    Thanks again.

  5. #5
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem, you're very welcome.

    coothead


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
  •