Enrico: Windows-eigene Scrollbalken (vertikal) ist immer deaktiviert

Hallo liebe Helfer in der Not,

folgende Definitionen liegen nachfolgendem Problem zugrunde:

--------
      CSS-Code
      --------

html
      {
         overflow-y: scroll;
      }

body
      {
         background: url(../Grafiken/Layout/Body_Hintergrund.png);
         color:      #ffffff;
         height:     100%;
         width:      100%;
      }

---------
      html-Code
      ---------

<body>
         <div id="Durchgehender_Rahmen_1"></div>
         <div id="Durchgehender_Rahmen_2"></div>
         <div id="Durchgehender_Rahmen_3"></div>
         <div id="Gitterkonstruktion">
            ...Navigation...
         </div>
         <div id="Umrandung_Seiten">
            <div id="Container_Seiten">
               ...eigentliche Inhalte unterschiedlichster Längen...
            </div>
         </div>
      </body>

Das gesamte Layout (sämtliche div-Bereiche außer "Container_Seite") habe ich fixiert, so dass sie beim Scrollen ihre Position behalten.

Leider wird mir die Scrollfunktion bei überlangem Text nicht zur Verfügung gestellt, d.h. wenn ich überlangen Text in den div-Bereich "Container_Seiten" ausgeben lasse, bleibt der Scrollbalken trotzdem "deaktiviert".

Angaben der Höhe der (wohl) relevanten div-Bereiche "Umrandung_Seite" und "Container_Seite" sind nicht möglich, da ich sonst keine Ausdehnung bis zum unteren Rand des Browserfensters habe.

Was habe ich hier vergessen bzw. falsch notiert?

Vielen Dank für eure Unterstützung.

Gruß
Enrico

  1. Om nah hoo pez nyeetz, Enrico!

    Das gesamte Layout (sämtliche div-Bereiche außer "Container_Seite") habe ich fixiert, so dass sie beim Scrollen ihre Position behalten.

    auf den ersten Blick würde ich sagen: Zu viele Divs, HTML-Elemente zu Gestaltungszwecken zu missbrauchen, ist kein guter Stil. Meist lässt sich ein ähnlicher Effekt mit Hintergrundgrafiken o.ä. erreichen.

    Leider wird mir die Scrollfunktion bei überlangem Text nicht zur Verfügung gestellt, d.h. wenn ich überlangen Text in den div-Bereich "Container_Seiten" ausgeben lasse, bleibt der Scrollbalken trotzdem "deaktiviert".

    Dann liegt das wohl an Eigenschaften dieser Elemente.

    Angaben der Höhe der (wohl) relevanten div-Bereiche "Umrandung_Seite" und "Container_Seite" sind nicht möglich, da ich sonst keine Ausdehnung bis zum unteren Rand des Browserfensters habe.

    Auch da gibt es bestimmt Möglichkeiten.

    Zeig doch mal ein Online-Beispiel.

    Matthias

    --
    1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
    1. Hallo Martin,

      hab einen Screenshot erstellt (das Layout befindet sich noch im Aufbau):

      http://imageshack.us/photo/my-images/96/screenshotnii.png/

      Ich hoffe, dies hilft Dir weiter, was ich will:

      Alles soll fixiert bleiben, die eigentlichen Inhalte "verschwinden" beim Scrollen, ich kann aber nicht scrollen, wie bereits geschrieben.

      Gruß
      Enrico

      1. Hallo Enrico,

        hab einen Screenshot erstellt (das Layout befindet sich noch im Aufbau):
        http://imageshack.us/photo/my-images/96/screenshotnii.png/

        das ist wenig hilfreich.

        Dein CSS bewirkt, dass man nicht scrollen kann. Wenn wir Dir helfen sollen, solltest Du so wichtige Informationen nicht zurückhalten.

        Freundliche Grüße

        Vinzenz

        1. Hallo Vinzenz,

          dies sind alle Informationen, die ich liefern kann:

          ---------------------
          css (zusammengefasst)
          ---------------------

          html
          {
             overflow-y: scroll;
          }

          body
          {
             background: url(../Grafiken/Layout/Body_Hintergrund.png);
             color:      #ffffff;
             height:     100%;
             width:      100%;
          }

          div#Durchgehender_Rahmen_1
          {
             background:  url(../Grafiken/Layout/Rahmen_waagrecht.png) repeat-x;
             height:      24px;
             left:        50%;
             position:    fixed;
             right:       0px;
             top:         0px;
          }

          div#Durchgehender_Rahmen_2
          {
             background:  url(../Grafiken/Layout/Rahmen_waagrecht.png) repeat-x;
             height:      24px;
             left:        0px;
             position:    fixed;
             right:       0px;
             top:         96px;
          }

          div#Durchgehender_Rahmen_3
          {
             background:  url(../Grafiken/Layout/Rahmen_waagrecht.png) repeat-x;
             height:      24px;
             left:        0px;
             position:    fixed;
             right:       50%;
             top:         144px;
          }

          div#Gitterkonstruktion
          {
             background:  url(../Grafiken/Layout/Gitterkonstruktion.png) no-repeat;
             height:      158px;
             left:        50%;
             margin-left: -424px;
             position:    fixed;
             top:         10px;
             width:       800px;
          }

          div#Umrandung_Seiten
          {
             background:  url(../Grafiken/Layout/Umrandung_Seiten.png) repeat-y;
             bottom:      0px;
             left:        50%;
             margin-left: -366px;
             position:    fixed;
             top:         159px;
             width:       732px;
          }

          div#Container_Seiten
          {
             bottom:   0px;
             left:     10px;
             position: absolute;
             right:    10px;
             top:      6px;
          }

          ----
          html
          ----

          <!doctype html>
          <html lang="de">
             <head>
                <meta charset="UTF-8">
                <title>Willkommen beim Ersten Dartverein Altdorf e.V.</title>
                <link rel="stylesheet" href="Module/Allgemein.css">
                <link rel="stylesheet" href="Module/Layout.css">
             </head>
             <body>
                <div id="Durchgehender_Rahmen_1"></div>
                <div id="Durchgehender_Rahmen_2"></div>
                <div id="Durchgehender_Rahmen_3"></div>
                <div id="Gitterkonstruktion">

          </div>
                <div id="Umrandung_Seiten">
                   <div id="Container_Seiten">

          </div>
                </div>
             </body>
          </html>

          Gruß
          Enrico

          1. Moin!

            Hallo Vinzenz,

            dies sind alle Informationen, die ich liefern kann:

            Dein Problem ist logisch. Alle Divs sind fixiert festgenagelt, die Seite hat keinerlei Höhe. Erst innerhalb der fixierten Divs gibts dann den Inhalt.

            Als Browser würde ich da auch nix scrollen.

            Fixierte Layouts sind nicht ratsam.

            - Sven Rautenberg

            1. Hallo Sven,

              danke für Deinen Denkanstoß, der mich zur Lösung geführt hat :-)

              Ich habe den div-Bereich, in dem die Seiteninhalte angezeigt werden, als eigenständigen und absolut positionierten div definiert mit folgenden css-Angaben:

              div#Gitterkonstruktion
              {
                 background:  url(../Grafiken/Layout/Gitterkonstruktion.png) no-repeat;
                 height:      158px;
                 left:        50%;
                 margin-left: -424px;
                 position:    fixed;
                 top:         10px;
                 width:       800px;
                 z-index:     1;
              }

              div#Umrandung_Seiten
              {
                 background:  url(../Grafiken/Layout/Umrandung_Seiten.png) repeat-y;
                 bottom:      0px;
                 left:        50%;
                 margin-left: -366px;
                 position:    fixed;
                 top:         159px;
                 width:       732px;
              }

              div#Container_Seiten
              {
                 bottom:      0px;
                 left:        50%;
                 margin-left: -356px;
                 position:    absolute;
                 top:         166px;
                 width:       712px;
              }

              ...und schon klappt es :-)

              Gruß
              Enrico

  2. Hallo,

    Angaben der Höhe der (wohl) relevanten div-Bereiche "Umrandung_Seite" und "Container_Seite" sind nicht möglich, da ich sonst keine Ausdehnung bis zum unteren Rand des Browserfensters habe.

    Was habe ich hier vergessen bzw. falsch notiert?

    die CSS-Angaben für die selbst Deiner Meinung nach relevanten Elemente anzugeben.

    »          <div id="Durchgehender_Rahmen_1"></div>  
    
    >          <div id="Durchgehender_Rahmen_2"></div>  
    >          <div id="Durchgehender_Rahmen_3"></div>  
    >          <div id="Gitterkonstruktion">  
    >             ...Navigation...  
    >          </div>  
    >          <div id="Umrandung_Seiten">  
    >             <div id="Container_Seiten">  
    >                ...eigentliche Inhalte unterschiedlichster Längen...  
    >             </div>  
    >          </div>  
    
    

    Das gesamte Layout (sämtliche div-Bereiche außer "Container_Seite") habe ich fixiert, so dass sie beim Scrollen ihre Position behalten.

    tolle Idee :-(

    Kein Wunder, dass die Browserhersteller nach Möglichkeiten alle Browserleisten ausblenden wollen. 450 Pixel CI, die den Benutzer [1] nicht interessiert, die aber mit Navigation 90% des Viewports des Netbooks ausmachen und nicht aus dem sichtbaren Bereich zu schieben sind.

    Vertikales Scrolling ist was wunderbares und *ich* möchte nicht einen Großteil meines Bildschirms mit weitestgehend nutzloser Deko und der Navigationsleiste vollgemüllt haben, wenn ich an den *Inhalten* interessiert bin.

    Freundliche Grüße

    Vinzenz

    [1] ich weiß, dass viele Kunden das für sehr wichtig halten ...

    1. Hi,

      Kein Wunder, dass die Browserhersteller nach Möglichkeiten alle Browserleisten ausblenden wollen.

      die Browserhersteller? - Im Gegenteil, die packen doch immer mehr Symbolleisten und Sidebars dazu.
      Aber ich als Nutzer bin daran interessiert, die möglichst alle auszublenden. Die einzigen Browser-Controls, die ich ständig griffbereit haben möchte, sind Menüzeile, Adresszeile und Statuszeile.

      Vertikales Scrolling ist was wunderbares und *ich* möchte nicht einen Großteil meines Bildschirms mit weitestgehend nutzloser Deko und der Navigationsleiste vollgemüllt haben, wenn ich an den *Inhalten* interessiert bin.

      Da stimme ich im Wesentlichen zu - aber ich finde es auch sehr komfortabel, die Hauptnavigation einer Site permanent verfügbar zu haben, egal, wo ich gerade hinscrolle. Natürlich muss das in einem vernünftigen Umfang bleiben; ein Menü, das ein Drittel der Bildfläche einnimmt, will ich auch nicht.

      Ciao,
       Martin

      --
      Die letzten Worte des Systemadministrators:
      Nur gut, dass ich ein intaktes Backup habe.
      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      1. Om nah hoo pez nyeetz, Der Martin!

        Da stimme ich im Wesentlichen zu - aber ich finde es auch sehr komfortabel, die Hauptnavigation einer Site permanent verfügbar zu haben, egal, wo ich gerade hinscrolle.

        Ja, bei Bedarf fixieren - Artikel, Umsetzung

        Bei Traumferienwohnungen.de ist es auch gut umgesetzt. Man beachte im linken Menü die Änderung des aktiven Reiters je nach Scrollweite.

        Matthias

        --
        1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif