nicht angemeldet
Linuchs
Gunnar Bittersmann
Rolf B
Linuchs
Auge
Rolf B
Linuchs
Tabellenkalk
Rolf B
Gunnar Bittersmann
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
@@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
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
@@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
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
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
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
@@Auge
maindarf im Dokument tatsächlich nur einmal vorkommen.
Nicht ganz.
Es darf zu jedem Zeitpunkt nur jeweils ein sichtbares[1] main geben.
Matthias Apsel
Der Martin<main hidden="">…</main>
<main>…</main>
<main hidden="">…</main>
ist erlaubt.
😷 LLAP
auch im Sinne von: für AT „sichtbar“ ↩︎
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
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
Hallo Der Martin,
damit meinst du vermutlich die Header- und Footer-Definitionen in den Druckeinstellungen.
Nein.
Bis demnächst
Matthias
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.
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.
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
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
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
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
Hallo,
Verbesserungsvorschläge sind gern gesehen.
Gleich im ersten Satz ist von „Reihenfolge“ die Rede. Wäre „Ebene“ besser?
Gruß
Kalk
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
@@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. Codepen • Posting
😷 LLAP