Linuchs: ausgeklapptes Menü verschwindet unter Text

problematische Seite

Moin,

es gibt Probleme mit dem z-index.

Das ausgeklappte Menü ist in vierter Ebene:

body > header > div > div id=remsoKopf_menu

Ab header haben alle Ebenen z-index:99

Das Menu überlappt den folgenden Text nicht. Woran liegt's? Und welche Ebene müsste eigentlich z-index:99 haben? Das müssen doch nicht alle sein.

Gruß, Linuchs

  1. problematische Seite

    @@Linuchs

    es gibt Probleme mit dem z-index.

    Und nicht nur damit. Deine Seite hat nur some user experience, abgekürzt SUX. (Billy Gregory)

    Zum Auf-/Zuklappen solltest du nicht den Checkbox-Hack nehmen, sondern einen Button und JavaScript. Siehe Seiten 94–97 in Inclusive Components.

    CSS: Menue per Klick auf ein image aufklappen

    😷 LLAP

    --
    „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
    1. problematische Seite

      Hallo Gunnar,

      solltest du nicht den Checkbox-Hack nehmen, sondern einen Button und JavaScript

      Der Eine sagt so, der andere so. Wenn ich frage, warum mein grüner Schal nicht wärmt, kommt bestimmt einer und meint, ich solle einen roten nehmen.

      Du meinst, die z-index-Frage wird durch Javascript geklärt?

      Jahrelang schrieb der Andere: Möglichst kein Javascript, könnte abgeschaltet sein.

      Linuchs

      1. problematische Seite

        @@Linuchs

        solltest du nicht den Checkbox-Hack nehmen, sondern einen Button und JavaScript

        Der Eine sagt so, der andere so.

        Die einen wissen, wovon sie sprechen, die anderen nicht.

        Wenn ich frage, warum mein grüner Schal nicht wärmt, kommt bestimmt einer und meint, ich solle einen roten nehmen.

        Wenn du hier keine Antworten bekommen möchtest, dann stell hier keine Fragen.

        Jahrelang schrieb der Andere: Möglichst kein Javascript, könnte abgeschaltet sein.

        Dann lass dir einen sinnvollen Fallback einfallen: Menü ohne JavaScript immer geöffnet oder ohne JavaScript gibt es einen Link zu einer anderen Seite mit dem Menü …

        Übrigens ist Javascript abgeschaltet kaum das Problem, das hatten wir schon mal.

        😷 LLAP

        --
        „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
  2. problematische Seite

    Hallo Linuchs,

    z-index wirkt auf Elemente, die einen Stacking Context erzeugen. Das geschieht beispielsweise durch position:relative. In basis.css:284 setzt Du das für <header> und <... class="main">.

    (Nebenbemerkung: <div class="main"> möchte gerne <main> heißen).

    Jedenfalls erzeugt diese Position-Angabe für header und .main einen Stacking-Context, und weil der Header vorher kommt, liegt .main in der natürlichen Ablageordnung der Dinge oben drüber. Ein z-index auf header genügt, um das zu ändern, anderswo ist er nicht nötig.

    Allerdings sind Computer kleine Eulenspiegler. Sie tun immer exakt das, was Du ihnen sagst. Und was sagst Du dem Header in basis.css:285?

    Rolf

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      Hallo Rolf,

      Und was sagst Du dem Header in basis.css:285?

      overflow:hidden, das habe ich übersehen. Danke dir.

      Nebenbemerkung: <div class="main"> möchte gerne <main> heißen

      Ich kann mehrere <div class="main"> oder auch <form class=main> haben, regelt die maximale Breite und die Positionierung in der Mitte des Viewports.

      ich denke das offizielle <main> soll wohl nur einmal vorkommen wie <header> und <footer>?

      Ich meine, der Firefox hat <header> und <footer> beim Drucken auf jede Seite gesetzt, jetzt nicht mehr.

      Gruß, Linuchs

      1. problematische Seite

        Hallo

        ich denke das offizielle <main> soll wohl nur einmal vorkommen wie <header> und <footer>?

        main darf im Dokument tatsächlich nur einmal vorkommen. Allerdings können header und footer mehrfach vorhanden sein.

        Ich meine, der Firefox hat <header> und <footer> beim Drucken auf jede Seite gesetzt, jetzt nicht mehr.

        Das war noch nie der Fall. Das verwechselst du mit thead und tfoot.

        Tschö, Auge

        --
        Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
        Hohle Köpfe von Terry Pratchett
        1. problematische Seite

          @@Auge

          main darf im Dokument tatsächlich nur einmal vorkommen.

          Nicht ganz.

          Es darf zu jedem Zeitpunkt nur jeweils ein sichtbares[1] main geben.

          <main hidden=""></main>
          <main></main>
          <main hidden=""></main>
          

          ist erlaubt.

          😷 LLAP

          --
          „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin

          1. auch im Sinne von: für AT „sichtbar“ ↩︎

        2. problematische Seite

          Hallo Auge,

          Ich meine, der Firefox hat <header> und <footer> beim Drucken auf jede Seite gesetzt, jetzt nicht mehr.

          Das war noch nie der Fall.

          Zumindest für den Seitenfooter war oder ist es so.

          Bis demnächst
          Matthias

          --
          Du kanhtml?ie=UTF8&nodeId=202035970]))ützen,
          indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
          1. problematische Seite

            Hallo Matthias,

            Ich meine, der Firefox hat <header> und <footer> beim Drucken auf jede Seite gesetzt, jetzt nicht mehr.

            Das war noch nie der Fall.

            Zumindest für den Seitenfooter war oder ist es so.

            damit meinst du vermutlich die Header- und Footer-Definitionen in den Druckeinstellungen. Die korrelieren aber nicht mit irgendeinem Element der Webseite.

            Live long and pros healthy,
             Martin

            --
            Paradox: Wieso heißen die Dinger Kühlkörper, obwohl sie höllisch heiß werden?
            1. problematische Seite

              Hallo Der Martin,

              damit meinst du vermutlich die Header- und Footer-Definitionen in den Druckeinstellungen.

              Nein.

              Bis demnächst
              Matthias

              --
              Du kannst das Projekt SELFHTML unterstützen,
              indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
              1. problematische Seite

                Hallo,

                damit meinst du vermutlich die Header- und Footer-Definitionen in den Druckeinstellungen.

                Nein.

                sondern ...?

                Live long and pros healthy,
                 Martin

                PS: Du bist in letzter Zeit sehr einsilbig geworden. Ich habe den Eindruck, du warst früher kommunikationsfreudiger und würde mir wünschen, dass du dorthin zurück findest.

                --
                Keyboard error or no keyboard present. Press F1 to continue.
                1. problematische Seite

                  Hallo Der Martin,

                  Nein.

                  sondern ...?

                  das Footerelement, das zum Hauptinhalt gehört. Und der Firefox unter Windows macht das auch immer noch so. Das Print-CSS, das zu dieser Seite gehört und normalerweise den Footer ausblenden würde, habe ich deaktiviert.

                  footer-Darstellung im Druck

                  Allerdings ist der footer hier fixiert. Mag sein, dass die Darstellung auf jeder Druckseite hier seine Ursache findet.

                  PS: Du bist in letzter Zeit sehr einsilbig geworden. Ich habe den Eindruck, du warst früher kommunikationsfreudiger und würde mir wünschen, dass du dorthin zurück findest.

                  Im konkreten Fall hing es damit zusammen, dass ich gestern nur mit dem Handy unterwegs war. Im allgemeinen jedoch damit, dass ich beruflich sehr gut ausgelastet bin und dann häufig einfach nur kaputt bin und keinen Nerv für ausführliche Beiträge habe.

                  Bis demnächst
                  Matthias

                  --
                  Du kannst das Projekt SELFHTML unterstützen,
                  indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                  1. problematische Seite

                    Hallo Matthias Apsel,

                    Allerdings ist der footer hier fixiert. Mag sein, dass die Darstellung auf jeder Druckseite hier seine Ursache findet.

                    Genauso ist es. Bekommt der footer position:static, erscheint er nur auf der letzen Seite und dort natürlich auch nicht ganz unten auf der Seite, sondern gleich unterhalb des Inhalts.

                    Bis demnächst
                    Matthias

                    --
                    Du kannst das Projekt SELFHTML unterstützen,
                    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      2. problematische Seite

        Hallo Linuchs,

        Ich kann mehrere <div class="main"> oder auch <form class=main> haben,

        Auf einer Seite? Hm. Vielleicht möchten das dann <section> Elemente sein. Ein <main> Element gehört bei semantischem Bau immer auf die Seite, dachte ich. Aber da bin ich nicht der zuständige Papst.

        Regelt die maximale Breite und die Positionierung in der Mitte des Viewports.

        Sollte man das nicht über max-width und margin:auto am body lösen?

        Wie auch immer. Ich habe heute nachmittag mal unseren Wiki-Artikel zum z-index neu gemacht. Vielleicht hilft der ja auch. Verbesserungsvorschläge sind gern gesehen.

        https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/z-index

        Rolf

        --
        sumpsi - posui - obstruxi
        1. problematische Seite

          Hallo Rolf,

          Auf einer Seite? Hm. Vielleicht möchten das dann <section> Elemente sein.

          In der Sackgasse war ich auch schon. Ein <section> Element verlangt eine Überschrift. Validator motzt, mozilla.org schreibt:

          „Jeder <section> Abschnitt sollte identifizierbar sein, üblicherweise durch Einfügen einer Überschrift (h1-h6 Element) als Kindelement des <section> Elementes.“

          Ich blende z.B. Fehlernachrichten und Hinweise ein, die mit class=main so breit sind und mittig platziert wie die ganze Seite.

          Und durfte die <section> Elemente wieder ersetzen. Man hat ja sonst nichts zu tun.

          Gruß, Linuchs

        2. problematische Seite

          Hallo,

          Verbesserungsvorschläge sind gern gesehen.

          Gleich im ersten Satz ist von „Reihenfolge“ die Rede. Wäre „Ebene“ besser?

          Gruß
          Kalk

          1. problematische Seite

            Hallo Tabellenkalk,

            hm. Den Begriff "Ebene" wollte ich nicht auch noch einführen. So besser?

            Die Eigenschaft '''z-index''' gibt an, in welcher Reihenfolge Elemente auf dem Ausgabemedium von hinten nach vorne angeordnet werden, was von Bedeutung ist, wenn die Elemente sich überlappen. Elemente mit einem größeren z-index liegen dabei näher am Betrachter und können Elemente mit kleinerem z-index überlagern.

            Gar nicht so einfach, das in einem Satz und mit möglichst wenigen irre führenden Vereinfachungen zu schreiben.

            Rolf

            --
            sumpsi - posui - obstruxi
        3. problematische Seite

          @@Rolf B

          Ein <main> Element gehört bei semantischem Bau immer auf die Seite, dachte ich.

          Wenn ausschließlich Hauptinhalt auf der Seite ist, dann braucht man wohl kein main-Element.

          Regelt die maximale Breite und die Positionierung in der Mitte des Viewports.

          Sollte man das nicht über max-width und margin:auto am body lösen?

          Das wird schwer, wenn man Elemente hat, die über die volle Bildschirmbreite gehen sollen – bspw. ein Seitenheader, dessen Textinhalt zwar beschränkt ist, dessen Hintergrund aber die ganze Bildschirmbreite ausfüllen soll, oder über die volle Breite gehende Bilder.

          Außerdem hat man bei body {margin: auto} den unschönen bis störenden Effekt, dass auf Systemen, wo die Scrollbar nicht über, sondern neben dem Inhalt liegt und Platz beansprucht, der Seiteninhalt hin- und herspringt, wenn eine Scrollbar erscheint oder wegfällt.

          Das kann man besser machen. CodepenPosting

          😷 LLAP

          --
          „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin