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