Web Analytics Made Easy -
StatCounter frame moving up and down when browser resized - CodingForum

Announcement

Collapse
No announcement yet.

frame moving up and down when browser resized

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • frame moving up and down when browser resized

    hi chaps

    I use frames in my site, and instead of the bottom frame being stuck to the frame above it like I want, it moves up and down when the browser is re-sized.

    Is it possible to fix it so it doesn't move


    thanks

    Masten

  • #2
    Re: frame moving up and down when browser resized

    Originally posted by masten
    hi chaps

    I use frames in my site,
    <snip />
    There is your problem, everything else is just a consequence
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

    Comment


    • #3
      Instead, try:
      Code:
      div#footer { position: fixed; bottom: 0 }
      With this for IE.
      David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
      W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

      Comment


      • #4
        vladdy: yeah I know professional hate frames but I dont know to do it any other way...

        me': im not a professional coder so Im not with you...

        how does:

        div#footer { position: fixed; bottom: 0 }

        help me...

        how do I implement that in the code, what do I attatch it to, does it go in the frameset of the frame???

        many thanks

        Masten

        Comment


        • #5
          Okay. Frames are bad: they're hard to bookmark, hard when you want to open a duplicate of that page, hard to navigate a lot of the time. Apart from that, a lot of the code you have to use is non-standard and it all ends up a mess. In several different documents.

          So, instead, if we want a part of the page to stay in a fixed position, we first mark it up as a part of the page:
          Code:
          <div id="fixedbit">
          
          content here
          
          </div>
          Note I've given it an ID to make it easy to identify. We then use something called CSS, which we should always use to tell the browser entirely how the page looks (all 'presenetational' tags in HTML like <font>, <b>, <i> are bad: imagine a machine that converts a page into braille. How would it react to <b>? It would have to do something to it that wouldn't be making it bold. That tag is a problem.) to make this div stay fixed. If you've never seen CSS before, check out the awesome tutorial over at w3schools. This is the CSS we use:
          Code:
          div#fixedbit { position: fixed; bottom: 0 }
          What this says is, 'Any div with an id of 'fixedbit' (# is the 'ID selector'): it needs to be fixed in respect to the viewport (so it won't move with the scrollbar), and it's bottom edge needs to be 0 pixels away from the bottom edge of the containing object (in this case the screen)'.

          Thus, it emulates frames.

          We have on problem: the most popular browser, Microsoft Internet Explorer (or IE) doesn't support position: fixed;. We have to use a different method. This page described that method.

          Now, you didn't have to be a professional coder to understand that after all
          David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
          W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

          Comment


          • #6
            me'

            OK, I get the first bit,

            I use:

            <div id="fixedbit">

            content here

            </div>


            and:

            div#fixedbit { position: fixed; bottom: 0 }




            but then the second bit about the fix for IE says use this:

            body
            {
            overflow: hidden;
            }
            div.content
            {
            height: 100%;
            overflow: auto;
            }


            so which do I use?

            many thanks

            Masten

            Comment

            Working...
            X