Steve: "position:fixed;" geht doch mit IE?

Hi,

ich will ne Seite machen: http://127.0.0.1/homepages/site/ndspsp/index.php

jetzt soll der Footer und der Header so wie hier,http://www.bungie.net stehen bleiben und NICHT mitscrollen.

Könnt ihr mir sagen wie ich das im IE hinbekomme? position:fixed geht ja bekanntlich nicht. hab schon versucht das hinzubekommen die Seite zu zerlegen, aber der Quelltext ist so 0_o, naja!

schon mal danke im Vorraus!

-enjoy Steve aka [PJ]neverk1lled

  1. Hallo du da draußen,

    ich will ne Seite machen: http://127.0.0.1/homepages/site/ndspsp/index.php

    Beschäftige dich bitte mit dem Funktionsprinzip des Internets, insbesondere TCP/IP... ;-)

    jetzt soll der Footer und der Header so wie hier,http://www.bungie.net stehen bleiben und NICHT mitscrollen.

    Dort sehe ich nichts stehen bleiben.

    Könnt ihr mir sagen wie ich das im IE hinbekomme?

    • Willst du eine eigene Scrollbar für den Textframe, kannst du diesem eine Höhe zuweisen und ihm overflow:auto zuweisen.

    • Willst du eine normale Scrollbar, kannst du den Textframe in einen ‚Container‘ packen, diesen absolut so positionieren, dass er das gesamte Browserfenster ausfüllt. Nun legst du per overflow fest, dass body (oder war es html?) keine Scrollbar hat, dafür aber der Textframe (overflow:auto). Dann positionierst du deine Elemente, die stehen bleiben sollen, absolut, und definierst nur noch das entsprechende padding für den Textframe, womit der Text nicht von den feststehenden Elementen verdeckt wird – fertig!
      Denke daran, dass du diese Möglichkeit nur für den IE anwendest, da zum Beispiel die aktuellen Geckos ein Scrollen mit dem Scrollrad in einem Element mit Scrollbars (per CSS zugewiesen) noch nicht richtig unterstützen.

    Solltest du das noch nicht ganz verstanden haben – frage ruhig.

    Grüße von hier drinnen, aus Biberach an der Riss,
    Candid Dauth (Dogfish)

    --
    »Bismarck biss Mark, bis Mark Bismarck biss!«
    http://cdauth.net.tc/
    ie:{ fl:( br: va:} ls:[ fo:| rl:( n4:( ss:) de:> js:( ch:| sh:( mo:) zu:|
    1. Nochmal hallo,

      Könnt ihr mir sagen wie ich das im IE hinbekomme?

      • Willst du eine eigene Scrollbar für den Textframe, kannst du diesem eine Höhe zuweisen und ihm overflow:auto zuweisen.

      das würde mir schon reichen! Könnte das in etwa so aussehen? :

      <div>header</div>
      <div id=Scrollbar für den Textframe">viel Inhalt</div>
      <div>footer</div>

      <-- datei.css
      #Scrollbar für den Textframe { height : 80%;
                                     overflow : auto;
      }
      -->

      • Willst du eine normale Scrollbar, kannst du den Textframe in einen ‚Container‘ packen, diesen absolut so positionieren, dass er das gesamte Browserfenster ausfüllt. Nun legst du per overflow fest, dass body (oder war es html?) keine Scrollbar hat, dafür aber der Textframe (overflow:auto). Dann positionierst du deine Elemente, die stehen bleiben sollen, absolut, und definierst nur noch das entsprechende padding für den Textframe, womit der Text nicht von den feststehenden Elementen verdeckt wird – fertig!
        Denke daran, dass du diese Möglichkeit nur für den IE anwendest, da zum Beispiel die aktuellen Geckos ein Scrollen mit dem Scrollrad in einem Element mit Scrollbars (per CSS zugewiesen) noch nicht richtig unterstützen.

      Ich denke ich versteh, aber kannst mal bitte ein Beispiel geben? Also ganz simpel, damit auch ich es zu 100% verstehe.

      Solltest du das noch nicht ganz verstanden haben – frage ruhig.

      Schon getan!

      -enjoy Steve aka [PJ]neverk1lled

      1. Hallo du da draußen,

        <div>header</div>
        <div id=Scrollbar für den Textframe">viel Inhalt</div>
        <div>footer</div>

        <-- datei.css
        #Scrollbar für den Textframe { height : 80%;
                                       overflow : auto;
        }
        -->

        So halb.
        1. Mach die HTML-Kommentarzeichen aus dem CSS-Code raus.
        2. Positionierst du am besten alle drei Bereiche absolut. Also dann für den Header 10% und für den Footer auch, damit auch sicher der ganze Bildschirm und nicht mehr ausgefüllt wird.
        3. Leerzeichen in IDs sind nicht erlaubt (aber das weißt du bestimmt).

        Ich denke ich versteh, aber kannst mal bitte ein Beispiel geben? Also ganz simpel, damit auch ich es zu 100% verstehe.

        Mal ein kleiner Codeausschnitt:

        <body>
          <div id="header">
            bla
          </div>
          <div id="scrolling">
            bla
          </div>
          <div id="footer">
            bla
          </div>
        </body>

        CSS-Datei:
        /* Zuerst für moderne Browser mit position:fixed */
        /* ... */
        html,body { top:0; left:0; bottom:0; min-height:100%; margin:0; padding:0; }
        body { position:absolute; }
        #header { position:fixed; top:0; left:0; right:0; height:10%; }
        #footer { position:fixed; bottom:0; left:0; right:0; height:10%; }
        #scrolling { margin-top:10%; margin-bottom:10%; } /* Ich bin mir nicht sicher, auf was sich jetzt die 10% beziehen */

        /* Nun für den IE */

        * html scrolling { position:absolute; top:0; right:0; left:0; bottom:0; overflow:scroll; padding-top:10%; padding-bottom:10%; }
        * html header,* html footer { position:absolute; }

        Das ist jetzt die zweite Lösung. Ich hoffe, ich habe keinen Denkfehler gemacht.

        Grüße von hier drinnen, aus Biberach an der Riss,
        Candid Dauth (Dogfish)

        --
        »Bismarck biss Mark, bis Mark Bismarck biss!«
        http://cdauth.net.tc/
        ie:{ fl:( br: va:} ls:[ fo:| rl:( n4:( ss:) de:> js:( ch:| sh:( mo:) zu:|
        1. Und ein weiteres mal hallo,

          CSS-Datei:
          /* Zuerst für moderne Browser mit position:fixed */
          /* ... */
          html,body { top:0; left:0; bottom:0; min-height:100%; margin:0; padding:0; }
          body { position:absolute; }
          #header { position:fixed; top:0; left:0; right:0; height:10%; }
          #footer { position:fixed; bottom:0; left:0; right:0; height:10%; }
          #scrolling { margin-top:10%; margin-bottom:10%; } /* Ich bin mir nicht sicher, auf was sich jetzt die 10% beziehen */

          /* Nun für den IE */

          * html scrolling { position:absolute; top:0; right:0; left:0; bottom:0; overflow:scroll; padding-top:10%; padding-bottom:10%; }
          * html header,* html footer { position:absolute; }

          Bis hierhin hast du mir schon sehr weitergeholfen! In firefox sieht bereits jetzt schon alles so aus wie ich mir das vorstelle, aber ich muss im IE noch ne Möglichkeit finden wie die Scroll-Seite immer die richtig größe hat bei jeder Auflösung.

          Die 10% bei den du dir nicht sicher bist brauche ich für den Scrolling breich unten, denn mit padding funktioniert das leider nicht!

          -enjoy Steve aka [PJ]neverk1lled

          1. Hallo du da draußen,

            Die 10% bei den du dir nicht sicher bist brauche ich für den Scrolling breich unten, denn mit padding funktioniert das leider nicht!

            Da würde mir jetzt spontan nur einfallen, die Größen in anderen Einheiten anzugeben. Zum Beispiel in px, auch wenn ich dir das nicht empfehlen kann. Ich würde em nehmen – lies dir jedenfalls unbedingt das SelfHTML-Kapitel zu Einheiten durch. Beachte, dass die Höhe der beiden Leisten dem padding entsprechen müssen, und zwar am besten in der gleichen Einheit.

            Grüße von hier drinnen, aus Biberach an der Riss,
            Candid Dauth (Dogfish)

            --
            »Bismarck biss Mark, bis Mark Bismarck biss!«
            http://cdauth.net.tc/
            ie:{ fl:( br: va:} ls:[ fo:| rl:( n4:( ss:) de:> js:( ch:| sh:( mo:) zu:|
        2. Hallo du da draußen,

          [...]

          Zusätzlich würde ich auch noch
          * html, * html body { overflow:hidden; }
          definieren.

          Ich habe jetzt einmal ein Beispiel hochgeladen, habe aber gerade leider (leider? zum Glück!) keinen IE zur Hand, könnte das vielleicht mal jemand testen?

          http://www.phoenix-world.com/Candid/files/selfforum/position_fixed_ie.html

          Grüße von hier drinnen, aus Biberach an der Riss,
          Candid Dauth (Dogfish)

          --
          »Bismarck biss Mark, bis Mark Bismarck biss!«
          http://cdauth.net.tc/
          ie:{ fl:( br: va:} ls:[ fo:| rl:( n4:( ss:) de:> js:( ch:| sh:( mo:) zu:|
          1. Hi,

            Ich habe jetzt einmal ein Beispiel hochgeladen, habe aber gerade leider (leider? zum Glück!) keinen IE zur Hand, könnte das vielleicht mal jemand testen?

            http://www.phoenix-world.com/Candid/files/selfforum/position_fixed_ie.html

            tut's absolut nicht; zeigt weder Scrollbalken noch den Footer an.

            freundliche Grüße
            Ingo

            1. Hallo du da draußen,

              http://www.phoenix-world.com/Candid/files/selfforum/position_fixed_ie.html
              tut's absolut nicht; zeigt weder Scrollbalken noch den Footer an.

              Tatsächlich. Da hatte ich doch ein paar grundlegende Fehler gemacht. Jetzt funktioniert es zumindest im IE 6.0 (die anderen muss ich noch testen). Nur musste ich das etwas unelegant mit den Scrollbars lösen – der Header und der Footer hätten normalerweise die Scrollbars überdeckt. Nun habe ich einfach mal 16px Abstand rechts definiert. Hat jemand eine bessere Idee?

              Grüße von hier drinnen, aus Biberach an der Riss,
              Candid Dauth (Dogfish)

              --
              »Bismarck biss Mark, bis Mark Bismarck biss!«
              http://cdauth.net.tc/
              ie:{ fl:( br: va:} ls:[ fo:| rl:( n4:( ss:) de:> js:( ch:| sh:( mo:) zu:|
              1. Hallo ihr da draußen,

                Jetzt funktioniert es zumindest im IE 6.0 (die anderen muss ich noch testen).

                • Im IE 6.0 und 5.5 funktioniert es ohne Probleme.
                • Im IE 5.0 funktioniert es, man kann aber das Scrollrad nicht benutzen.
                • Der IE 4.0 ignoriert die Höhenangabe des Headers, bildet ihn auch über der Scrollleiste ab, man kann das Scrollrad nicht benutzen und der Footer wird überhaupt nicht angezeigt – aber wer lässt den IE 4.0 schon seine CSS-Daten sehen? ;-)
                • Wen wundert’s, dass es im IE 3.0 nicht funktioniert?

                Grüße von hier drinnen, aus Biberach an der Riss,
                Candid Dauth (Dogfish)

                --
                »Bismarck biss Mark, bis Mark Bismarck biss!«
                http://cdauth.net.tc/
                ie:{ fl:( br: va:} ls:[ fo:| rl:( n4:( ss:) de:> js:( ch:| sh:( mo:) zu:|
  2. ich will ne Seite machen: http://127.0.0.1/homepages/site/ndspsp/index.php

    Hab versehentlich auf meinem Localhost verlinkt sry! Der korrekte Lik lautet natürlich: http://projunkies.com/ndspsp/

    -enjoy Steve aka [PJ]neverk1lled

  3. Hallo Steve,

    was willst du nun eigentlich wissen?

    jetzt soll der Footer und der Header so wie hier,http://www.bungie.net stehen bleiben und NICHT mitscrollen.

    Ach ja? Bei mir (IE 5.5) scrollt der gesamte Seiteninhalt, Header und Footer eingeschlossen.

    Und auf der anderen Seite (http://projunkies.com/ndspsp/) sehe ich zwischen Header und Footer nur einen grauen Streifen mit dem test "open Beta-phase!" - was soll daran jetzt so interessant sein?

    In ratlosem Grübeln,

    Martin

    1. Hallo  Martin,

      was willst du nun eigentlich wissen?

      ich will wissen wie ich im IE ein Element z.B. ein Footer so positionieren kann, dass es _nicht_ mitscrollt.

      jetzt soll der Footer und der Header so wie hier,http://www.bungie.net stehen bleiben und NICHT mitscrollen.

      Ach ja? Bei mir (IE 5.5) scrollt der gesamte Seiteninhalt, Header und Footer eingeschlossen.

      ich benutze den IE 6.0 und da scrollt die Navi und Header nicht mit, wenn du Firefox installiert hast geh mal mit dem auf die Seite, dann wirst du wissen was ich meine.

      -enjoy Steve aka [PJ]neverk1lled

      1. Hi Steve,

        ich will wissen wie ich im IE ein Element z.B. ein Footer so positionieren kann, dass es _nicht_ mitscrollt.

        Tja, das würde ich auch gern wissen. Bis jetzt habe ich noch keine _zufriedenstellende_ Lösung gesehen.

        Ach ja? Bei mir (IE 5.5) scrollt der gesamte Seiteninhalt, Header und Footer eingeschlossen.

        ich benutze den IE 6.0 und da scrollt die Navi und Header nicht mit, wenn du Firefox installiert hast geh mal mit dem auf die Seite, dann wirst du wissen was ich meine.

        Ich hab auch so gewusst, was du meinst - und im Firefox tut's auch tatsächlich vernünftig.
        Aber dein Originalposting war etwas konfus. :)
        Aber ich hab's eben noch einmal zum Vergleich im IE6.0 (sechs punkt null!) versucht - Murx, da scrollt alles mit. Davon abgesehen kriege ich im IE6 oben ein Banner angezeigt, auf dem steht "You are viewing the site in a downgraded display". Na toll.
        Das ist mir im IE5.5 zuhause gestern gar nicht aufgefallen.

        Tschüss,

        Martin

        1. Hallo du da draußen,

          ich will wissen wie ich im IE ein Element z.B. ein Footer so positionieren kann, dass es _nicht_ mitscrollt.
          Tja, das würde ich auch gern wissen. Bis jetzt habe ich noch keine _zufriedenstellende_ Lösung gesehen.

          Was verstehst du unter einer zufriedenstellenden Lösung?

          Grüße von hier drinnen, aus Biberach an der Riss,
          Candid Dauth (Dogfish)

          --
          »Bismarck biss Mark, bis Mark Bismarck biss!«
          http://cdauth.net.tc/
          ie:{ fl:( br: va:} ls:[ fo:| rl:( n4:( ss:) de:> js:( ch:| sh:( mo:) zu:|
          1. Hallo,

            Was verstehst du unter einer zufriedenstellenden Lösung?

            Auf jeden Fall eine ohne Frames, ohne Javascript, und sie sollte auch im IE5.5 noch funktionieren.
            Ist das ein klares Anforderungsprofil?  ;)

            Nee, mal im Ernst: Der Vorteil von Framesets ist ja gerade, dass man sehr leicht Teile der Gesamtseite fest stehenlassen kann. Aber die Frames an sich möchte ich - wegen der sonstigen Nachteile - eigentlich vermeiden.
            Und da ich selbst den IE6 ablehne, muss das für mich alles auch noch im 5er funktionieren.

            Bye,

            Martin

            1. hi,

              Was verstehst du unter einer zufriedenstellenden Lösung?

              Auf jeden Fall eine ohne Frames, ohne Javascript, und sie sollte auch im IE5.5 noch funktionieren.
              Ist das ein klares Anforderungsprofil?  ;)

              nachdem wir das jetzt geklärt haben ...

              Bis jetzt habe ich noch keine _zufriedenstellende_ Lösung gesehen.

              verrate uns doch bitte noch, was du an den im netz verfügbaren workarounds für diese geschichte für _nicht_ zufriedenstellend erachtet hast.

              gruß,
              wahsaga

              --
              "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
              1. Hallo,

                verrate uns doch bitte noch, was du an den im netz verfügbaren workarounds für diese geschichte für _nicht_ zufriedenstellend erachtet hast.

                Ganz einfach: Alle Lösungen, die ich bisher gefunden habe, konnten feststehende Elemente (z.B. die Navi) z.B. links neben einem Content-DIV anordnen. Aber nicht am oberen oder unteren Bildschirmrand, weil der IE5 anscheinend die CSS-Eigenschaften top und bottom nicht oder nicht korrekt interpretiert.
                Wenn du mir da ein Beispiel geben könntest, das mich eines besseren belehrt, bin ich für den Moment glücklich.

                Besten Dank schon mal,

                Martin

                PS: Ach so, dass es für andere Browser (Opera, Moz, FF) auch den gleichen gewünschten Effekt haben soll, ist ja selbstverständlich. ;)

                1. Hi,

                  Aber nicht am oberen oder unteren Bildschirmrand, weil der IE5 anscheinend die CSS-Eigenschaften top und bottom nicht oder nicht korrekt interpretiert.
                  Wenn du mir da ein Beispiel geben könntest, das mich eines besseren belehrt, bin ich für den Moment glücklich.

                  Zwar nicht am oberen _und_ unteren Fensterrand, aber immerhin am oberen:
                  http://www.stern.de/computer-technik/index.html?nv=L1HP.
                  Funktioniert im IE5.5 und IE6 perfekt, im IE5.0x zwar auch, aber das Scrollen ist arg mühsam.

                  Oder ein eigenes Beispiel: oben und links. Funktioniert im IE5.0x auch nicht perfekt, aber das Scrollen geht besser (wenn auch nicht mit Scrollrad).

                  freundliche Grüße
                  Ingo

                  1. hi,

                    Zwar nicht am oberen _und_ unteren Fensterrand, aber immerhin am oberen:
                    http://www.stern.de/computer-technik/index.html?nv=L1HP.
                    Funktioniert im IE5.5 und IE6 perfekt, im IE5.0x zwar auch, aber das Scrollen ist arg mühsam.

                    mein IE 5.01 scrollt da flüssig - aber ohne einen fixed-ähnlichen effekt.

                    gruß,
                    wahsaga

                    --
                    "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
                    1. Hi,

                      Zwar nicht am oberen _und_ unteren Fensterrand, aber immerhin am oberen:
                      http://www.stern.de/computer-technik/index.html?nv=L1HP.
                      Funktioniert im IE5.5 und IE6 perfekt, im IE5.0x zwar auch, aber das Scrollen ist arg mühsam.

                      mein IE 5.01 scrollt da flüssig - aber ohne einen fixed-ähnlichen effekt.

                      ich hätte in den Quelltext sehen sollen:

                      <!--[if gte IE 5.5000]>

                      verhindert, daß Du das spezielle CSS bekommst, wenn Du tatsächlich nur den IE 5.01 installiert hast. Es funktioniert aber - bis auf das Scrollproblem (der IE reagiert _nur_ auf einzelne Klicks auf die Scrollpfeile).

                      freundliche Grüße
                      Ingo

  4. http://www.drweb.de/csspraxis/absolutes-positionieren.shtml

    1. Hallo du da draußen,

      http://www.drweb.de/csspraxis/absolutes-positionieren.shtml

      </faq/#Q-19> und den Rest der </faq/>!

      Abgesehen von deren Syntaxfehlern (des von dir ‚verlinkten‘ Artikels):

      #body2{ position:absolute; top:0; left:0; width:100%; height:100%; padding:10px; overflow:auto; }

      Womit #body2 schomal 100%+20px hoch und breit ist. Somit wird schonmal ein Teil der Seite abgeschnitten.

      Ansonsten ist es das was ich vorgeschlagen habe. Nur dass ich es anfangs ein bisschen umständlich ausgedrückt habe. Genau wie die.

      Grüße von hier drinnen, aus Biberach an der Riss,
      Candid Dauth (Dogfish)

      --
      »Bismarck biss Mark, bis Mark Bismarck biss!«
      http://cdauth.net.tc/
      ie:{ fl:( br: va:} ls:[ fo:| rl:( n4:( ss:) de:> js:( ch:| sh:( mo:) zu:|