nicht angemeldet Bimmelbeule
Gunnar Bittersmann
Gunnar Bittersmann
Bimmelbeule
Gunnar Bittersmann
Bimmelbeule
Rolf B
Bimmelbeule
Rolf B
Rolf B
Bimmelbeule
Rolf B
Hallo!
Ich beschäftige mich gerade mit einem dreispaltigen Layout mit Flexbox…
Das CSS und die Testseite funktionieren einwandfrei. Bei 50em bricht sowohl die Navigation als auch die aside um. Soweit, sogut.
Ich möchte aber jetzt, noch ein zusätzliches Media Querie bei 65em einfügen, wo nur die aside zwischen dem Haupttext (main) und dem Footer rutscht, die Navigation aber erst mal auf der linken Seite bleibt, bis sie bei 50em ebenfalls umbricht (und dann zwischen aside und Footer steht). Ich blicke das nicht! Kann mir bitte freundlicherweise jemand vom Schlauch helfen?
Das CSS sieht so aus:
Matthias Scharwiesbody {
max-width: 80em;
margin: 0 auto;}
.container {
display: flex;
flex-direction: column;
}
@media (min-width: 50em) {
.container {
flex-direction: row;
flex: 1;
}
main {
flex: 1;
}
nav {
order: -1;
}
nav, aside {
flex: 0 0 5em;
}
}
Die Testdatei ist hier: Testseite
@@Bimmelbeule
Das CSS und die Testseite funktionieren einwandfrei.
Nein, das tun sie nicht. Denn:
@media (min-width: 50em) { nav { order: -1; }
Das rückt die Navigation visuell an den Anfang. Bei Bedienung mit Tastatur kommt man aber an die Links nicht ran; die kommen erst unerwartet ganz am Ende.
Die visuelle Reihenfolge sollte der Reihenfolge im DOM entsprechen; andernfalls dürften sehende Tastaturnutzer und sehende Screenreader-Nutzer ziemlich verwirrt sein.
Hatten wir doch gerade erst.
Wenn du die Navigation auf verschiedenen Viewports wirklich an verschiedenen Stellen haben willst, dann musst du sie auch an verschiedenen Stellen im DOM haben. Das heißt: doppelt im DOM, wobei jeweils nur eine angezeigt wird und die andere auf display: none gesetzt ist – und damit auch nicht mehr im accessibility tree ist.
TL;DR: Hände weg von order!
🖖 Живіть довго і процвітайте
@@Bimmelbeule
Das CSS und die Testseite funktionieren einwandfrei.
Nein, das tun sie nicht.
Doch, das tun sie! ツ
Alle gängigen Browser können sie anzeigen und sie bestehen die W3C-Tests; sowohl das HTML als auch das CSS ist valide.
Hatten wir doch gerade erst.
Ja, das stößt auch gerade bei mir einen Prozess des umdenkens an… ich werde mich dort auch noch dazu äußern… aber das ist (vorläufig) eine andere Baustelle.
@@Bimmelbeule
Alle gängigen Browser können sie anzeigen und sie bestehen die W3C-Tests; sowohl das HTML als auch das CSS ist valide.
Fein, dann kannste ja die Icons auf deine Seite klatschen. 😆
„Valides HTML“ sagt, dass du die HTML-Elemente und -Attribute richtig verwendet hast. Das sagt nichts darüber, ob du die richtigen HTML-Elemente und -Attribute verwendet hast.
Spoiler: Hast du nicht. Axe Devtools meckert das falsche h4-Element an. Und auch das fehlende lang-Attribut beim html-Element.
Valider Code ist gut und schön, sagt aber noch nichts über Usability, Accessibility und User Experience aus.
Ja, das stößt auch gerade bei mir einen Prozess des umdenkens an…
🖖 Живіть довго і процвітайте
Servus!
„Valides HTML“ sagt, dass du die HTML-Elemente und -Attribute richtig verwendet hast. Das sagt nichts darüber, ob du die richtigen HTML-Elemente und -Attribute verwendet hast.
Gut auf den Punkt gebracht! Wär das was für die Zitatesammlung?
Ich hab's mal hier eingefügt: https://wiki.selfhtml.org/wiki/Validator
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
Wär das was für die Zitatesammlung?
Auf jeden Fall eher als die diversen Scherze, mit denen man mich in der Sammlung verewigt hat.
Da Du es nicht eingetragen hast, habe ich das jetzt übernommen. Vote For It!
Rolf
@@Bimmelbeule
Ich beschäftige mich gerade mit einem dreispaltigen Layout mit Flexbox…
Mir scheint, dass du dich damit selbst ins Knie f██.
Zum Layouten einer Seite scheint mir Grid im Allgemeinen das bessere Werkzeug zu sein. Zumal man damit sich selbst erklärenden Code schreiben kann, der das Layout visualisiert: Beispiel
Aber auch da gilt natürlich, dass man die Zellen nicht irgendwo wild im Grid rumplatzieren sollte, sondern die visuelle Reihenfolge sollte mit der Reihenfolge im DOM übereinstimmen.
🖖 Живіть довго і процвітайте
@@Bimmelbeule
Zum Layouten einer Seite scheint mir Grid im Allgemeinen das bessere Werkzeug zu sein. Zumal man damit sich selbst erklärenden Code schreiben kann, der das Layout visualisiert: Beispiel
Danke für den Tipp!
Als ich mir vor zwei oder drei Jahren mal kurz grid angeschaut habe, war mir das noch "zu neu"… mittlerweile ist es ja einigermaßen abgehangen…
Dein Beispiel hat nochmal Interesse an grid in mir erweckt. Denn – in der Tat – obwohl ich keine Ahnung von grid habe, bilde ich mir ein direkt die Hälfte verstanden zu haben. Das gefällt mir sehr gut! Weniger gut gefällt mir, das es scheint, das man deutlich mehr CSS-Code braucht… aber vielleicht kann ich das ja noch "vereinfachen".
Werde ich mich in den nächsten Wochen mal näher mit beschäftigen!
Nichtsdestotrotz suche ich noch immer eine Lösung für mein oben geschildertes Dreispalten-Flexbox-Problem. Ich bin mit der Seite schon ziemlich weit (die Testseite war nur ein Minimal-Beispiel) und möchte das jetzt zeitnah abschließen.
@@Bimmelbeule
obwohl ich keine Ahnung von grid habe, bilde ich mir ein direkt die Hälfte verstanden zu haben.
Grid ist einfach, sagt Vasilis. Und yours truly auch.
*freu* Ich treff Vasilis in ein paar Tagen wieder.
Weniger gut gefällt mir, das es scheint, das man deutlich mehr CSS-Code braucht… aber vielleicht kann ich das ja noch "vereinfachen".
Das Mehr an Code ist die Vereinfachung. Bei CSS Grid kann man Linien und Bereichen Namen geben. Das macht den Code nicht kürzer, aber besser lesbar.
Du kannst auch die Zellen jeweils mit Nummern für grid-row und grid-column plazieren. In der Kürze liegt die Würze, aber zu scharf macht das Gericht nicht unbedingt besser.
Nichtsdestotrotz suche ich noch immer eine Lösung für mein oben geschildertes Dreispalten-Flexbox-Problem.
Rumhantieren mit Flexbox ist bei mir oft trial and error.
und möchte das jetzt zeitnah abschließen.
Denkbar, dass du mit Grid trotz kleiner Lernkurve schneller zum Ziel kommst.
🖖 Живіть довго і процвітайте
@@Bimmelbeule
Nichtsdestotrotz suche ich noch immer eine Lösung für mein oben geschildertes Dreispalten-Flexbox-Problem.
Rumhantieren mit Flexbox ist bei mir oft trial and error.
Ich bin froh, das es nicht nur mir so geht… ツ
und möchte das jetzt zeitnah abschließen.
Denkbar, dass du mit Grid trotz kleiner Lernkurve schneller zum Ziel kommst.
Ich wechsele ungern während der Fahrt den Zug! Aber wenn es keine Flexbox-Lösung für mein Problem gibt (was mich allerdings wundern würde), bleibt mir wohl nichts anderes übrig… ich warte aber noch ein paar Tage, ob sich nicht doch noch jemand freundlicherweise meiner erbarmt…
Hallo Bimmelbeule,
wenn der Zug nicht ankommt, ist ein Wechsel wohl unumgänglich.
Aber - ankommen kann man schon.
https://jsfiddle.net/Rolf_b/cfrbyq94/
Wie Gunnar schrieb, braucht man die Navi zweimal, damit die DOM Reihenfolge mit der Tab-Reihenfolge übereinstimmt.
Und damit die "Unten" Navigation für Screenreader-User erreichbar ist, habe ich noch einen "Skip To Nav" Link an den Anfang gesetzt, der im 65em Modus auf display:none gesetzt wird - dann ist die Top-Navi aktiv und man braucht ihn nicht. EVENTUELL braucht man dann ersatzweise einen "Skip to Main" Link.
Damit es funktioniert, braucht man zwei Flexboxen. Eine innere Flexbox für Haupttext und Aside, und eine äußere, um bei Bedarf die Navigation davorstellen zu können.
Ich glaube, dass Grid logischer ist.
Rolf
Super! Vielen Dank für deine Mühe!
Damit es funktioniert, braucht man zwei Flexboxen. Eine innere Flexbox für Haupttext und Aside, und eine äußere, um bei Bedarf die Navigation davorstellen zu können.
Oh, das finde ich tatsächlich sehr unschön… kein Wunder, das ich im Interweb keine Beispiele/Vorlagen dazu gefunden habe…
Ich glaube, dass Grid logischer ist.
[seufz] Ja, bei einem dreispaltigen Szenario scheint das so zu sein…
Hallo Bimmelbeule,
man kann es möglicherweise mit flex-wrap auch so hinbekommen, dass man nur eine Flexbox braucht. Ich glaube aber, dass man dann einen Haufen magischer Zahlen verteilen muss.
Rolf
Hallo Bimmelbeule,
ich bitte um Entschuldigung - es geht doch mit einer einzigen Flexbox.
-> https://jsfiddle.net/Rolf_b/cfrbyq94/2/
Unter 50em: Keine Flexbox Ab 50em: Flexbox, aber nav (Oben) ausgeblendet -> 2 Spalten, Nav darunter Ab 65em: nav (Oben) als Kindelement der Flexbox einblenden, nav (Unten) ausblenden -> 3 Spalten, Nav links
Da hab ich zu kompliziert gedacht.
Aber um 2 Instanzen der Navigation kommst Du wohl nicht herum. Nicht wegen der Flexbox, sondern wegen der Bedienbarkeit.
Rolf
-> https://jsfiddle.net/Rolf_b/cfrbyq94/2/
Unter 50em: Keine Flexbox Ab 50em: Flexbox, aber nav (Oben) ausgeblendet -> 2 Spalten, Nav darunter Ab 65em: nav (Oben) als Kindelement der Flexbox einblenden, nav (Unten) ausblenden -> 3 Spalten, Nav links
Nochmal vielen Dank für deine Mühe! ツ
Das geht schon mal in die richtige Richtung… eine Kleinigkeit passt noch nicht (vielleicht habe ich mich schlecht ausgedrückt)…
unter 50em (korrekt):
| 1. Spalte |
|---|
| main |
| aside |
| nav |
über 65em (korrekt):
| 1. Spalte | 2. Spalte | 3. Spalte |
|---|---|---|
| nav | main | aside |
zwischen 50em und 65em soll aber aside unten sein und nicht nav (falsch):
| 1. Spalte | 2. Spalte |
|---|---|
| main | aside |
| nav |
Ich dachte eher an:
| 1. spalte | 2. Spalte |
|---|---|
| nav | main |
| aside |
Ich scheitere gerade, dein Beispiel umzudrehen… wahrscheinlich sehe ich den Wald vor lauter Bäumen nicht mehr… ツ
Ich werde es morgen nochmal versuchen…
Rolf
Hallo Bimmelbeule,
das ist mit einer gemeinsamen Kraftanstrengung von flex-wrap, width, calc und margin-left machbar, WENN die leere Zelle unter "nav" wirklich leer sein soll.
Wenn Du aber sowas haben willst (muss ich jetzt als ASCII Art zeichnen, keine Ahnung ob und wie sich sowas downmarken lässt)
+-------+---------------+
| | |
| NAV | INHALT |
| | |
| +---------------+
| | ASIDE |
+-------+---------------+
dann brauchst Du zwei Flexboxen. Oder Grid.
Wenn das nav tatsächlich nicht höher werden muss als der Inhalt, dann geht es so: https://jsfiddle.net/Rolf_b/cfrbyq94/3/. Es ist aber schon Gefummel.
Mit Grid dagegen sähe es so aus:
https://jsfiddle.net/Rolf_b/roLh0snk/
Die Navigation geht vertikal bis zum footer. Wenn Du das nicht willst, ändere das Grid-Template ab. Da steht das "nav" in zwei Zeilen; ersetze das untere durch einen anderen Namen (wenn Du Inhalt für diese Zelle hast) oder einfach durch ein "-".
Rolf
Hallo Rolf!
Wenn Du aber sowas haben willst (muss ich jetzt als ASCII Art zeichnen, keine Ahnung ob und wie sich sowas downmarken lässt)
+-------+---------------+ | | | | NAV | INHALT | | | | | +---------------+ | | ASIDE | +-------+---------------+dann brauchst Du zwei Flexboxen. Oder Grid.
Du hast natürlich recht! Ich will es so haben, wie auf deiner ASCII-Grafik (so hätte ich das auch visualisieren sollen).
Wenn das nav tatsächlich nicht höher werden muss als der Inhalt, dann geht es so: https://jsfiddle.net/Rolf_b/cfrbyq94/3/. Es ist aber schon Gefummel.
Mit Grid dagegen sähe es so aus:
https://jsfiddle.net/Rolf_b/roLh0snk/
Die Navigation geht vertikal bis zum footer. Wenn Du das nicht willst, ändere das Grid-Template ab. Da steht das "nav" in zwei Zeilen; ersetze das untere durch einen anderen Namen (wenn Du Inhalt für diese Zelle hast) oder einfach durch ein "-".
Ein drittes Mal bedanke ich mich bei Dir! Du hast dir ja echt ein Bein ausgerissen, um mir zu helfen!
Ich glaube, das mir die zwei Flexboxen noch weniger gefallen, als die deutlich größere CSS-Datei bei grid…
Ich sehe es ein; ich werde mich wohl mit grid beschäftigen müssen… obwohl ich vermutlich nur deine Lösung leicht verändern muss (grid scheint ja wirklich leicht verständlich zu sein).
Nochmal; Danke, Rolf, für deine Arbeit! Und meinen Dank auch allen anderen, die zur Lösung meines Problems beigetragen haben.
P.s. »Linkadillo for your Cigarillo« 😂
Einen schönen Tag noch!
Rolf
Hallo!
Kurze Rückmeldung…
Ich habe das jetzt tatsächlich mit grid realisiert…
Mit Grid dagegen sähe es so aus:
Dank der großartigen Vorarbeit von Rolf gestaltete sich das deutlich einfacher als ich angenommen habe.
Auch konnte ich Rolfs Beispiel – ohne mich zusätzlich informieren zu müssen – so eindampfen, das der Code angenehm kurz ist (grid ist wirklich erstaunlich intuitiv). Für dreispaltiges Layout ist das ab jetzt mein Standard!