kerle-perle: feste Navigatiobsleiste

Hallo,

ich habe eine Frage:
Ích teile das Fenster in die klassische Form oben Header, links Navi und Mitte Content mittels Layer ein.

Wenn ich jetzt den Content-Teil scrolle, ist es dann möglích den Header und die Navileiste fest stehen zu lassen? (Wie man es bei Frames kennt)

Danke für Eure Hilfe im voraus und viele Grüße!

  1. aloha heja he

    Wenn ich jetzt den Content-Teil scrolle, ist es dann möglích den Header und die Navileiste fest stehen zu lassen? (Wie man es bei Frames kennt)

    position:fixed;

    http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position

    man liest sich
    Wilhelm

    1. Super elegante Lösung!

      Gruss Stefan

      1. aloha heja he

        Super elegante Lösung!

        Allerdings nicht fuer den IE ;-)

        Da muss man wie http://www.fabrice-pascal.de/artikel/posfixedie6/index.php etwas tricksen.

        man liest sich
        Wilhelm

    2. Hallo,

      position:fixed;

      Finde ich persoenlich grosse Scheisse. SCNR.
      Dann noch lieber Frames - die kann man als Benutzer wenigstens knacken,
      und man kann in den einzelnen Frames scrollen, wenn man nicht alles sieht.
      Mit position:fixed verschwendet der Autor wertvollen Bildschirm-Platz des Benutzers.
      Es gibt IMHO nichts, was so wichtig waere, dass man es "immer sehen muss".
      Und wenn der Bildschirm klein ist und der Autor nicht schlau genug war, mit
      einer overflow-Angabe vorzusorgen, sieht man unter Umstaenden nicht einmal
      das ganze Menue, hat aber keine Chance, den Rest zu sehen.

      So, nach dieser Polemik noch zwei Links zum Thema, die vielleicht helfen,
      einige der Fehler und Probleme zu vermeiden, die man mit position:fixed kriegt:
      http://www.jendryschik.de/wsdev/css/fixed/
      http://molily.de/css-position-fixed

      Gruesse,

      Thomas

      --
      Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
      Ich mag es, wenn URLs verlinkt sind (</faq/#Q-19>).
      Oft gestellte PHP-Fragen beantwortet die dclp-FAQ bestens: http://www.dclp-faq.de/
      1. Hi,

        Mit position:fixed verschwendet der Autor wertvollen Bildschirm-Platz des Benutzers.
        Es gibt IMHO nichts, was so wichtig waere, dass man es "immer sehen muss".

        grundsätzlich stimme ich Dir ja zu, aber ich sehe auch Ausnahmen. Während ein fix positionierter Header eigentlich immer Platzvergeudung ist, kann eine feststehende Navigation am Seitenrand durchaus Sinn machen, da der übrige Platz zur Anzeige von Fließtext i.d.R. nicht nur ausreicht, sondern oft aus Gründen der Lesbarbeit limitiert wird.
        Wo siehst Du z.B. den Unterschied zwischen einem Design, bei dem der Inhaltsbereich einen festen Randabstand nach links hat und sich dadurch nicht unter die Navigation schieben kann?
        Eine feststehende Navigation erspart hier zumindest das zurückscrollen.

        Aber zum Thema: auf einen feststehenden Header würde ich ncht nur aus Platzgründen verzichten, sondern auch, weil sich das (im Gegensatz zu einem feststehenden Seitenbereich) nur sehr schlecht und nicht 100%ig für den IE umsetzen läßt.

        freundliche Grüße
        Ingo

        1. Hallo,

          Wo siehst Du z.B. den Unterschied zwischen einem Design, bei dem der Inhaltsbereich einen festen Randabstand nach links hat und sich dadurch nicht unter die Navigation schieben kann?

          Ich denke da vor allem an "kleine" Bildschirme.
          Handys, Handhelds, Sehbehinderte, ...
          (Und nein, dass man bei einigen Browsern CSS abschalten kann,
          lasse ich diesmal nicht gelten.)

          Nehmen wir mal ein Beispiel:
          Links Navigation, 200px breit.
          Rechts Content, mit einem 500px breiten Bild.
          Bildschirmbreite: 640px.

          Bei einer Layout-Tabelle oder entsprechenden CSS-Konstrukten
          fuer Zwei-Spalten-Layouts scrolle ich einmal horizontal nach rechts.
          Das Menue ist jetzt nur noch teilweise sichtbar, was mir voellig egal
          ist, denn ich will ja den Content sehen, und das gelingt auch: ich sehe
          jetzt ungestoert das ganze Bild auf einmal.

          Bei Frames oeffne ich nur die Seite mit dem Content in einem
          eigenen Fenster und sehe nun das ganze Bild auf einmal.

          Bei position:fixed habe ich keine Chance, die Navigation
          wegzuschieben und das ganze Bild auf einmal zu sehen.
          (Nein, ich meine nicht: nur das Bild - via Kontextmenue,
          Adresse kopieren oder so. Das gilt nicht. Ich will das Bild
          in seinem Zusammenhang auf der Seite selbst sehen.)
          Mit etwas Glueck (d.h. dank "richtiger" Reihenfolge im HTML
          oder mit Angabe von z-indexen) ueberlagert der Content
          beim horizontalen Scrollen die Navigation, aber schoen ist
          sowas nicht.

          Ich lasse mich aber gerne durch ein Online-Beispiel (am liebsten
          real, nicht "Lorem Ipsum" Testcase) eines besseren belehren. ;-)

          Gruesse,

          Thomas

          --
          Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
          Ich mag es, wenn URLs verlinkt sind (</faq/#Q-19>).
          Oft gestellte PHP-Fragen beantwortet die dclp-FAQ bestens: http://www.dclp-faq.de/
          1. Hi,

            Nehmen wir mal ein Beispiel:
            Links Navigation, 200px breit.
            Rechts Content, mit einem 500px breiten Bild.
            Bildschirmbreite: 640px.

            Bei position:fixed habe ich keine Chance, die Navigation
            wegzuschieben und das ganze Bild auf einmal zu sehen.

            zugegeben, sowas kann ziemlich ärgerlich werden und sollte natürlich beachtet werden. Bei solchen Konstruktionen würde ich Deinem geänderten Beitragstitel auch zustimmen.

            Ich lasse mich aber gerne durch ein Online-Beispiel (am liebsten
            real, nicht "Lorem Ipsum" Testcase) eines besseren belehren. ;-)

            ok, z.B. http://www.dm-formationen2004.de/impressum.html - wobei hier die Startseite und "Karten" leider auch gleichzeitig ein Negativbeispiel darstellen, denn diese benötigen schon mindestens ein ca. 800px breites Fenster.

            freundliche Grüße
            Ingo

            1. Hallo,

              ok, z.B. http://www.dm-formationen2004.de/impressum.html

              Danke. Habs angeguckt mit Mozilla.
              Der Content-Bereich _dieser_ Seite enthaelt kein breites Bild oder aehnliches.
              Somit laesst sich das Fenster auf ca. 550 Pixel verschmaelern, ohne dass
              es zu Problemen kommt.
              Bei noch schmalerem Fenster erscheint dann ein horizontaler Scrollbalken,
              der jeweils nur den Content scrollt, wobei es zu den genannten
              Ueberlagerungen kommt, d.h. der Inhalt verschwindet hinter der Navigation,
              vermutlich, weil Du im HTML-Quelltext die Reihenfolge 1. Inhalt, 2. Navi hast.
              Abhilfe koenntest Du ggf. mit (z.B. absoluter) Positionierung der Inhalts
              und z-index schaffen. Auf eigenes Risiko!

              Wie Du richtig erkannt hast, tritt das von mir beschriebene Problem
              eben vor allem dort auf, wo der Content-Bereich "breite" Inhalte hat,
              also beispielsweise Bilder oder Tabellen, wie z.B. hier:
              http://www.dm-formationen2004.de/karten.html
              http://www.dm-formationen2004.de/ort.html

              Vorbildlich finde ich an diesen Seiten uebrigens, dass sie dank einem
              guten Print-Stylesheet gut ausdruckbar sind. Bravo!

              Freundliche Gruesse,

              Thomas
                (begeisterter Hobby-Taenzer - ohne Turniere gluecklich ;-)

              1. Hi,

                Abhilfe koenntest Du ggf. mit (z.B. absoluter) Positionierung der Inhalts
                und z-index schaffen. Auf eigenes Risiko!

                nein danke.. ich finde in diesem Ausnahmefall eine funktionierene Navigation wichiger als den Inhalt, der dann halt etwas verdeckt wird. Außerdem erwarte ich auf diesen Seiten ehrlich gesagt keine Besucher mit weniger als 800px (möglicher) Fensterbreite.

                Vorbildlich finde ich an diesen Seiten uebrigens, dass sie dank einem
                guten Print-Stylesheet gut ausdruckbar sind. Bravo!

                Danke. War mir auch gerade in diesem Fall sehr wichtig. Am meisten Arbeit hatte mir hierbei übrigens der Sitzplan bei 'Karten' gemacht (Hintergrundfarben werden ja kaum mitgedruckt..).

                freundliche Grüße
                Ingo

          2. aloha heja he

            Ich denke da vor allem an "kleine" Bildschirme.
            Handys, Handhelds, Sehbehinderte, ...

            Ich bitte allerdings zu beachten, dass nicht alle Inhalte im weiten Netz fuer Handys oder Handhelds geeignet sind und dies bewusst. Es gibt Content, der einfach einen normalen Monitor voraussetzt. Klar, ich hoere Deinen Einwand "Dann ist es kein guter Content", aber Du darfst Deine Einstellung nicht immer zum Mass fuer Andere machen. Ich z.B. sehe das Netz nicht mehr nur als reines Nachschlagewerk sondern auch als visuelle Plattform.

            Bei position:fixed habe ich keine Chance, die Navigation
            wegzuschieben und das ganze Bild auf einmal zu sehen.
            (Nein, ich meine nicht: nur das Bild - via Kontextmenue,
            Adresse kopieren oder so. Das gilt nicht.

            Die Fixierung hat Vor- und Nachteile wie vieles was mit HTML/CSS moeglich waere, aber bei diesem macht dieser Browser Mucken, bei anderen Kniffen ein anderer, beim naechsten der Hardware-Client.

            Irgendeinen Tod stirbt man IMHO immer.

            man liest sich
            Wilhelm

            1. Hi Wilhelm,

              Ich bitte allerdings zu beachten, dass nicht alle Inhalte im weiten Netz fuer Handys oder Handhelds geeignet sind und dies bewusst.

              selbst wenn sie sich eignen würden, so ignorieren die meisten das für sie vorgesehene Stylesheet. Wäre dem nicht so, ließen sich viele Inhalte einfacher an die beschränkten Platzverhältnisse anpassen.

              Es gibt Content, der einfach einen normalen Monitor voraussetzt.

              Womit wir wieder beim Thema Handheld wären? *g*

              Bei position:fixed habe ich keine Chance, die Navigation
              wegzuschieben und das ganze Bild auf einmal zu sehen.

              Wenn ein Teil daneben mitscrollt auch nicht. Das ist kein Argument gegen position:fixed, sondern eines für Layout per float.

              Irgendeinen Tod stirbt man IMHO immer.

              Naja, solang's nur ein kleiner ist...

              Grüße,
               Roland

              1. aloha heja he

                selbst wenn sie sich eignen würden, so ignorieren die meisten das für sie vorgesehene Stylesheet. Wäre dem nicht so, ließen sich viele Inhalte einfacher an die beschränkten Platzverhältnisse anpassen.

                Leider.

                Bei position:fixed habe ich keine Chance, die Navigation
                wegzuschieben und das ganze Bild auf einmal zu sehen.

                Wenn ein Teil daneben mitscrollt auch nicht. Das ist kein Argument gegen position:fixed, sondern eines für Layout per float.

                Grau ist alle Theorie. ;-) Bei [pref:t=76753&m=442348] konnte ich die Probleme mit float/clear nicht loesen und bin wieder brav zu absolute (IE) und fixed (Rest) gedackelt.

                BTW: Die Chancen-Aussage war nicht von mir.

                man liest sich
                Wilhelm

              2. Hallo Roland,

                selbst wenn sie sich eignen würden, so ignorieren die meisten [Handhelds/Handys] das für sie vorgesehene Stylesheet. Wäre dem nicht so, ließen sich viele Inhalte einfacher an die beschränkten Platzverhältnisse anpassen.

                Genau. Das ist ein grosser Jammer... ;-)

                Bei position:fixed habe ich keine Chance, die Navigation
                wegzuschieben und das ganze Bild auf einmal zu sehen.
                Wenn ein Teil daneben mitscrollt auch nicht.

                Was meinst Du?

                Ich meine folgendes: Layout-Tabelle oder Spalten-Layout mit CSS
                (z.B. mit position:absolute oder mit margin-left fuer den Content).
                Linke Spalte Navigation, rechte Spalte Content mit breitem Bild oder so.
                Hier laesst sich eben durch horizontales Scrollen die Navigation wegschieben
                und der Content - so er denn auf den Bildschirm passt - auf einmal und
                ohne Ueberlagerungen sehen.

                Das ist kein Argument gegen position:fixed, sondern eines für Layout per float.

                Jaja, float-Loesungen waeren schoen... ;-)

                Freundliche Gruesse,

                Thomas

  2. Ja, aber nicht 100% statisch...

    Du kannst Layer und Div Bereiche mit CSS und JavaScript (=>DHTML) so kontrollieren, dass sie immer an einer festen stelle sind.

    Dazu schau dir mal das Beispiel unter http://selfhtml.teamone.de/dhtml/beispiele/navigation.htm an.

    Wenn Du den Inhalt eines Tabellenfeldes scrollen willst, kannst Du das über einen CSS Befehl steueren, der aber meines Wissens nicht dokumentiert ist. Beispiele hierzu findest Du auf Directbox.com (die lassen die Emails auf diese weise scrollen). Ich komme von hier aus leider nicht auf diese seite, womit ich dir auch nicht den code raussuchen kann, sorry.

    Gruss, Stefan

    1. Hallo.

      Wenn Du den Inhalt eines Tabellenfeldes scrollen willst, kannst Du das über einen CSS Befehl steueren, der aber meines Wissens nicht dokumentiert ist.

      Aktualisiere dein Wissen auf http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#overflow -- und vergiss in diesem Zusammenhang den Begriff "Befehl".
      MfG, at