Anzeigen/Verbergen von div-Bereichen mit eingebetteten Listen

[Enrico]

Hallo,

wiedermal plagt mich ein css-Problem, diesmal mit der (Nicht)Sichtbarkeit von div-Bereichen.

Ich will meinen Anzeige-div über eigene Grafiken und Javascript scrollen lassen und dabei,
je nach Dokumentenhöhe/Scrollweite die Scrollgrafiken aktiv bzw. inaktiv darstellen.

Da ich bei der Überlegung auch berücksichtigen muß, dass die Links im aktiven Modus bei
MouseOver die Scrollroutine aufrufen, dies im inaktiven Zustand aber logischerweise unsinnig
ist, dachte ich mir, dass die beste Lösung wäre, zwei sich überlagernde div-Bereiche zu
definieren, von denen einer zu Beginn sichtbar und der andere unsichtbar ist.

Je nach Dokumentenhöhe/Scrollweite sollen die beiden Bereiche ausgetauscht werden.

Hier die css-Definitionen:

div.Scrolling_Oben_aktiv,
   div.Scrolling_Oben_inaktiv,
   div.Scrolling_Unten_aktiv,
   div.Scrolling_Unten_inaktiv
   {
      height:            119px;
      position:          absolute;
      width:             24px;
   }

div.Scrolling_Oben_aktiv,
   div.Scrolling_Unten_aktiv
   {
      visibility:        visible;
   }

div.Scrolling_Oben_inaktiv,
   div.Scrolling_Unten_inaktiv
   {
      visibility:        hidden;
   }

div.Scrolling_Oben_aktiv,
   div.Scrolling_Oben_inaktiv
   {
      top:               22px;
      right:             22px;
   }

div.Scrolling_Oben_aktiv,
   div.Scrolling_Oben_inaktiv
   {
      top:               22px;
      right:             22px;
   }

ul.Scrolling_Oben
   {
      list-style-type:   none;
      margin:            0px;
      padding:           0px;
   }

ul li.Seitenanfang_inaktiv,
   ul li.Seitenanfang,
   ul li.Seitenanfang:hover,
   ul li.Hochscrollen_schnell,
   ul li.Hochscrollen_schnell:hover,
   ul li.Hochscrollen_langsam,
   ul li.Hochscrollen_langsam:hover,
   ul li.Runterscrollen_langsam_inaktiv,
   ul li.Runterscrollen_langsam,
   ul li.Runterscrollen_langsam:hover,
   ul li.Runterscrollen_schnell_inaktiv,
   ul li.Runterscrollen_schnell,
   ul li.Runterscrollen_schnell:hover
   ul li.Seitenende_inaktiv,
   ul li.Seitenende,
   ul li.Seitenende:hover
   {
      height:            24px;
      position:          relative;
      width:             24px;
   }

ul li.Seitenanfang_inaktiv,
   ul li.Seitenanfang,
   ul li.Seitenanfang:hover
   {
      top:               0px;
   }

ul li.Hochscrollen_schnell_inaktiv,
   ul li.Hochscrollen_schnell,
   ul li.Hochscrollen_schnell:hover
   {
      top:               24px;
   }

ul li.Hochscrollen_langsam_inaktiv,
   ul li.Hochscrollen_langsam,
   ul li.Hochscrollen_langsam:hover
   {
      top:               47px;
   }

ul li.Seitenanfang_inaktiv
   {
      background:      url(../../GRAFIKEN/SCHALTFLAECHEN/Seitenanfang_inaktiv.png) no-repeat;
   }

...weitere Definitionen der anzuzeigenden Grafiken...

Der zugehörige html-Code hat folgenden Aufbau:

<div class="Scrolling_Oben_aktiv">
      <ul class="Scrolling_Oben">
         <li class="Seitenanfang"></li>
         <li class="Hochscrollen_schnell"></li>
         <li class="Hochscrollen_langsam"></li>
      </ul>
   </div>
   <div class="Scrolling_Oben_inaktiv">
      <ul class="Scrolling_Oben">
         <li class="Seitenanfang_inaktiv"></li>
         <li class="Hochscrollen_schnell_inaktiv"></li>
         <li class="Hochscrollen_langsam_inaktiv"></li>
      </ul>
   </div>

Aber egal, was ich anstelle, ob ich mit "visibility" oder "display" arbeite, die div-Bereiche
werden mir nicht angezeigt.

Ich hoffe, Ihr könnt mir sagen und weiterhelfen, warum sie nicht angezeigt werden.

Wie desöfteren in letzter Zeit:

Vielen lieben Dank für Eure Unterstützung.

Gruß
Enrico

[Felix Riesterer]

Lieber Enrico,

ich habe Dein generelles Anliegen nicht ganz verstanden.

Gehe ich richtig in der Annahme, dass Du die regulären GUI-Elemente eines Browsers (in diesem Falle Scrollbars mit ihren Bedienfeldern) durch eine eigene JavaScript-gesteuerte Lösung ersetzen willst? Dann frage ich Dich: Was passiert, wenn der User kein JavaScript zur Verfügung hat?

Was Dein Anzeigeproblem angeht, so könnte ich mir vorstellen, dass Du mit dem z-index experimentieren könntest. Bist Du Dir denn sicher, dass alle Elemente die Klassen erhalten, die sie auch erhalten sollen? Prüfst Du das live mit dem Firebug? Dann könntest Du dort nämlich mit dem z-index spielen.

Liebe Grüße,

Felix Riesterer.

[Enrico]

Hallo Felix,

nachdem ich jetzt 2 zuviel gesetzte Kommas gefunden habe, habe ich mich doch
entschieden, die browsereigenene Scrollleiste wieder zu "reaktivieren", weil
dies doch sinniger ist (umsonst gibt es sie ja schliesslich auch nicht).

Man muß ja Vorhaben nicht komplizierter machen, als sie ohnehin sind :-)

Gruß
Enrico