Sebastian: Liste nach hover auf Anfang setzen

SELF-Forum

Liste nach hover auf Anfang setzen

Sebastian
– Informationen zu den Bewertungsregeln

Hallo.
Ist folgendes eigentlich OHNE JAVASCRIPT möglich:

Ich habe eine Combobox mit CSS erstellt:
Titel

  • Unterpunkt1
  • Unterpunkt2
  • Unterpunkt3
  • Unterpunkt4
  • Unterpunkt5
  • Unterpunkt6
  • Unterpunkt7
  • ..

Diese Combobox hat eine :hover Eigenschaft, um sie aufzuklappen, wenn man über "Titel" geht. Es erscheinen dann die Unterpunkte mit einem vertikalen Scrollbalken.

Jetzt das Problem: Wenn man die Combobox mit dem Scrollbalken scrollt scrollt auch der "Titel" mit. Verlässt man nun die Combobox, indem man den Mousecursor neben die Liste bewegt schließt sie sich und dort wo der "Titel" stand steht nun der Teil der Liste, der beim Verlassen der Liste an dessen Position stand.

Optimal wäre es, wenn man mittels CSS OHNE JS beim Verlassen der Liste (und dessen Zuklappen) die Combobox wieder auf Anfang (also auf "Titel") bringen könnte..

MfG,

Sebastian

JSP:
<div class="stupidieGruppe" style="margin-bottom: 1em;margin-left:0.9em;margin-top:1em">
  <a class="aussGruppen" href="#"><span class="menutag">Titel</span>
  <table><tr><td>
      <a class="innen-1" href="..">Unterpunkt1</a>
      <a class="innen-1" href="..">Unterpunkt2</a>
      <a class="innen-1" href="..">....</a>

</td></tr></table>
  </a>
 </div>

CSS:
.stupidieGruppe {
 display: block;
 position: absolute;
 top: 175px;
 left: 193px;
 z-index: 5;
}
a.aussGruppen { /** Die Combobox, wenn sie nicht aufgeklappt ist **/
 float: left;
 width: 166px;
 height: 1.3em;
 overflow: hidden;
 display: block;
 font-weight: bold;
 text-align: left;
 text-decoration: none;
 background-color: #C5DAEB;
 color: #000000;
 border: 1px solid;
 border-color: #C5DAEB;
}
a:hover.aussGruppen { /** Die Combobox, wenn sie aufgeklappt ist **/
 overflow: visible;
 top:30px;
 height: 200px;
 background-color: #C5DAEB;;
 color: #fff;
 overflow-y:scroll;
 height: 200px;
}
a:hover.aussGruppen table { /** Die Tabelle, die beim Mouse-Hover angezeigt wird **/
 display: block;
 background-color: #80A3FF; /* hell-blau*/
 color: #000000;
 border-collapse: collapse;
}
a.innen-1 { /** Die Felder der aufgeklappten Tabelle **/
 display: block;
 width: 164px; /* fuer 5er IEs anpassen, sonst 'zuckt' es */
 padding: 0px 0;
 font-size: 100%; /* fuer 5er IEs auf 80% reduzieren */
 font-weight: bold;
 text-align: left;
 text-decoration: none;
 border-bottom: 1px solid #ffffff;
 background-color: #CDCECE;
 color: #000000;
 font-size: 12px;

}
a:visited.innen-1 { /** Darstellung der besuchten Links der Combobox  **/
 background-color: #CDCECE;
 color:#000000;
}
a:hover.innen-1 { /** Darstellung der Links der Combobox bei Mouse-Hover **/
 position: relative;
 background-color: #80A3FF; /* hell-blau*/
 color: #000000;
}
span.menutag { /** Formatierung für den Titel der Combobox  **/
 display: block;
 cursor: default;
 font-size: 12px;
 position:fixed;
 z-index:10;
}

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Liste nach hover auf Anfang setzen

    Thomas J.S.
    – Informationen zu den Bewertungsregeln

    Hallo,

    Jetzt das Problem: Wenn man die Combobox mit dem Scrollbalken scrollt scrollt auch der "Titel" mit. Verlässt man nun die Combobox, indem man den Mousecursor neben die Liste bewegt schließt sie sich und dort wo der "Titel" stand steht nun der Teil der Liste, der beim Verlassen der Liste an dessen Position stand.

    Optimal wäre es, wenn man mittels CSS OHNE JS beim Verlassen der Liste (und dessen Zuklappen) die Combobox wieder auf Anfang (also auf "Titel") bringen könnte..

    <a class="aussGruppen" href="#"><span class="menutag">Titel</span>
      <table><tr><td>
          <a class="innen-1" href="..">Unterpunkt1</a>
          <a class="innen-1" href="..">Unterpunkt2</a>
          <a class="innen-1" href="..">....</a>

    </td></tr></table>
      </a>

    Davon abgesehen, dass ein <table> nichts in einem <a> verloren hat, kann ich das von dir beschriebene Verhalten nicht nachvollziehen.

    Der IE machts es genau so wie du es dir vorstellst.
    IM Firefox sieht dein Code so aus:

    und im Opera so:

    Grüße
    Thomas

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Liste nach hover auf Anfang setzen

      Sebastian Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hi, danke für die Antwort.

      Davon abgesehen, dass ein <table> nichts in einem <a> verloren hat, kann ich das von dir beschriebene Verhalten nicht nachvollziehen.

      [NUR HINTERGRUND]
      Die Table ist der Workaround für den IE und wird wie hier unter "Drop Down" angegeben http://barrierefrei.e-workers.de/workshops/tricks/menues.php verwendet. Für den FF wird sie durch <!--[if IE]> Unterscheidung nicht verwendet
      [/NUR HINTERGRUND]

      Das Verhalten tritt auf bei einer Liste mit sehr vielen Elementen, für die dann auch der Scrollbalken benötigt wird:

      Gruß,

      Sebastian

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Liste nach hover auf Anfang setzen

        wahsaga Homepage des Autors
        – Informationen zu den Bewertungsregeln

        hi,

        Die Table ist der Workaround für den IE und wird wie hier unter "Drop Down" angegeben http://barrierefrei.e-workers.de/workshops/tricks/menues.php verwendet. Für den FF wird sie durch <!--[if IE]> Unterscheidung nicht verwendet

        Das ändert nichts daran, dass Table in A nichts verloren hat.

        Du setzt also dem IE bewusst fehlerhaften Code vor, und vertraust auf irgendeine Fehlerkorrektur.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Liste nach hover auf Anfang setzen

          Sebastian
          – Informationen zu den Bewertungsregeln

          Das ändert nichts daran, dass Table in A nichts verloren hat.

          Du setzt also dem IE bewusst fehlerhaften Code vor, und vertraust auf irgendeine Fehlerkorrektur.

          Hi Wahsaga.

          von http://barrierefrei.e-workers.de:
          "Der Trick heißt Redundanz. Für alle normalen Browser nutzen wir die Eigenschaft span:hover, um das Dropdown zu realisieren. Da der IE dies nur mit Script-Krücken interpretieren kann, die wir aus Kompatibilitätsgründen vermeiden wollen, füttern wir ihn mit einem redundanten Menüblock (und einem angepaßten Stylesheet) via a:hover. Dafür bieten sich 'Conditional Comments' an, damit die ganzen Extras störungsfrei eingebunden werden können."

          Aufruf in der JSP-Datei:
           <div id="menueboxGruppen">
            <div id="menue">
             <div class="aussen">
              <span class="menutag"><bean:write name="seitenparameter" property="comboHeader"/></span>
              <c:forEach items="${tabellenCombo}" var="combo">
               ${combo}
              </c:forEach>
             </div>
            </div>
           </div>

          <!--[if IE]>
           <div class="stupidieGruppe" style="margin-bottom: 1em;margin-left:0.9em;margin-top:1em">
            <a class="aussGruppen" href="#"><span class="menutag"><bean:write name="seitenparameter" property="comboHeader"/></span>
            <table><tr><td>
             <c:forEach items="${tabellenCombo}" var="combo">
                ${combo}
             </c:forEach>
            </td></tr></table>
            </a>
           </div>
          <![endif]-->

          Aber bitte beim Thema bleiben. Dies soll keine Diskussion über Conditional Comments oder redundanten Menüblöcke werden!

          Gruß,

          Sebastian

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Liste nach hover auf Anfang setzen

            wahsaga Homepage des Autors
            – Informationen zu den Bewertungsregeln

            hi,

            von http://barrierefrei.e-workers.de: [...]
            Dafür bieten sich 'Conditional Comments' an, damit die ganzen Extras störungsfrei eingebunden werden können."

            Woher wollen die wissen, dass das ganze "störungsfrei" ist, wenn sie bewusst _Fehler_ einbauen.

            Aber bitte beim Thema bleiben. Dies soll keine Diskussion über Conditional Comments oder redundanten Menüblöcke werden!

            Es geht nicht um die Rednundanz an sich, sondern um den fehlerhaften Code, der hier mutwillig eingesetzt wird.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

      2. Liste nach hover auf Anfang setzen

        Thomas J.S.
        – Informationen zu den Bewertungsregeln

        Hallo,

        Davon abgesehen, dass ein <table> nichts in einem <a> verloren hat, kann ich das von dir beschriebene Verhalten nicht nachvollziehen.

        [NUR HINTERGRUND]
        Die Table ist der Workaround für den IE und wird wie hier unter "Drop Down" angegeben http://barrierefrei.e-workers.de/workshops/tricks/menues.php verwendet. Für den FF wird sie durch <!--[if IE]> Unterscheidung nicht verwendet
        [/NUR HINTERGRUND]

        Das Verhalten tritt auf bei einer Liste mit sehr vielen Elementen, für die dann auch der Scrollbalken benötigt wird:

        Ich möchte keinem auf die Füße treten - und dir würde das auch nicht helfen - aber: der Code so wie er da ist ist unbrauchbar. Das Mott der Webseite lautet (angeblich):
        "Die saubere Trennung der Struktur eines Dokuments von seiner Formatierung ermöglicht den barrierefreien Zugang für Menschen mit unterschiedlicher Wahrnehmung und unterschiedlicher technischer Ausstattung."

        Der Code zeigt dir genau das Gegenteil, es wird damit gezeigt, wie man soetwas auf keinem Fall machen sollte. Ein "Der folgende Block bedient nur IEs! Durch diese Redundanz vermeiden wir den Einsatz von Javascript" ist in diesem Fall wirklich kein Argument.

        Was dir aber hilft ist ein:

        a.aussGruppen table { display: none; }

        in deinem CSS. Wird auch nicht immer perfekt sein: manchmal bleibt unterhalb vom "titel" ein grauer Streifen über, der beim 'drüberhovern' wieder die Liste öffnet.

        Wenn ich jetzt bösartig sein will, würde ich sagen: du sagst den machern der Code, sie sollen ihn gefälligst so machen, dass er auch funktioniert.

        Grüße
        Thomas

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln