Scribd Logo
Upload

Welcome to Scribd!

  • Using CSS Fixed Position Elements Across Browsers 1735 1

    Uploaded by

    Thestrall Nurhidayat
    3 views4 pages

    Original Title

    Using CSS Fixed Position Elements Across Browsers 1735 1 (1)

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views4 pages

    Using CSS Fixed Position Elements Across Browsers 1735 1

    Uploaded by

    Thestrall Nurhidayat

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    <--- -------------------------------------------------------------------------------------- ---Blog Entry: Using CSS Fixed Position Elements Across Browsers Without Javascript Author: Ben

    Nadel / Kinky Solutions Link: http://www.bennadel.com/index.cfm?event=blog.view&id=1735 Date Posted: Oct 16, 2009 at 9:34 AM ---- -------------------------------------------------------------------------------------- ---> <!DOCTYPE HTML> <html> <head> <title>Using CSS Fixed Position Across Browsers</title> <style type="text/css"> html, body { margin: 0px 0px 0px 0px ; padding: 0px 0px 0px 0px ; } #site-body-container {} #site-body-content { padding: 15px 15px 15px 15px ; } div.fixed-position { background-color: #F0F0F0 ; border: 1px solid #CCCCCC ; height: 48px ; line-height: 50px ; position: fixed ; text-align: center ; width: 148px ; z-index: 1000 ; } div.fixed-n { left: 50% ; margin-left: -75px ; top: 0px ; } div.fixed-n-e { right: 0px ; top: 0px ; } div.fixed-e {

    margin-top: -25px ; right: 0px ; top: 50% ; } div.fixed-s-e { bottom: 0px ; right: 0px ; } div.fixed-s { bottom: 0px ; left: 50% ; margin-left: -75px ; } div.fixed-s-w { bottom: 0px ; left: 0px ; } div.fixed-w { margin-top: -25px ; left: 0px ; top: 50% ; } div.fixed-n-w { left: 0px ; top: 0px ; } /* -------------------------------------------------- */ /* -- IE 6 FIXED POSITION HACK ---------------------- */ /* -------------------------------------------------- */ html, body, #site-body-container { _height: 100% ; _overflow: hidden ; _width: 100% ; } #site-body-container { _overflow-y: scroll ; _overflow-x: hidden ; _position: relative ; } div.fixed-position { _position: absolute ; } /* For the scrollbar. */ div.fixed-n-e, div.fixed-e, div.fixed-s-e { _margin-right: 16px ;

    } /* For the scrollbar. */ div.fixed-n, div.fixed-s { _margin-left: -83px ; } </style> </head> <body> <div class="fixed-position fixed-n"> North </div> <div class="fixed-position fixed-n-e"> North East </div> <div class="fixed-position fixed-e"> East </div> <div class="fixed-position fixed-s-e"> South East </div> <div class="fixed-position fixed-s"> South </div> <div class="fixed-position fixed-s-w"> South West </div> <div class="fixed-position fixed-w"> West </div> <div class="fixed-position fixed-n-w"> North West </div> <!-- ------- --> <!-- ------- --> <div id="site-body-container"> <div id="site-body-content"> <div style="height: 3000px ;"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum enim in mauris luctus convallis. Aliquam erat volutpat. Suspendisse potenti. Duis blandit, urna vitae feugiat porttitor, risus est ornare metu

    s, at dignissim urna velit id enim. Donec lect us nisi, consectetur eget sollicitudin id, bibend um laoreet velit. <p> </div> </div> </div> </body> </html>

    You might also like