Unsere COPD Webseite: Beitragsinhalt mittig bekommen

[Rolf B]

Hallo COPD,

der copd-wrapper ist eine Flexbox, die Sidebars sind gefloatet. Das mixt sich nicht, Flexbox hat Vorrang.

Bei Float musste man die gefloateten Elemente im DOM zuerst haben. Bei Flexbox sollten sie in der Reihenfolge angeordnet sein, wie sie auch auf dem Bildschirm erscheinen sollen. Heißt: r_sidebar hinter das content-div.

Oder im CSS die order-Eigenschaft verwenden, gib r_sidebar order:3 und sie flutscht nach rechts.

Die height-Angabe brauchst Du bei den sidebars mit Flex jedenfalls nicht mehr. Das ist ein float-Relikt und kann zusammen mit der float-Eigenschaft weg. Flexbox hat für align-items als Standardwert stretch, d.h. alle Flex-Items werden auf die gleiche Höhe gebracht.

Was ist der Unterschied zwischen Umsortieren und order-Eigenschaft? Die Tabulator-Reihenfolge. Die richtet sich - solange man nicht mit tabindex herumwirbelt - nach der Reihenfolge im DOM.

D.h. wenn Du die r_sidebar hinter content schiebst, läuft der Tab-Focus vom Suchen-Button auf die Willkommen-Überschrift. Wenn Du order verwendest, springt er auf den rauchen aufhören Link (von denen Du zwei hast - versuche mal das rauchen-aufhoeren.gif hin den Textlink hineinzunehmen, dann ist es ein dekoratives Bild ohne eigenen Link und bekommt alt="").

Du solltest auch über einen Skip-Link ganz zu Beginn nachdenken, also einer, der beim ersten Aufruf der Seite den Tab-Fokus bekommt und der den Fokus auf die Willkommen-Überschrift setzt. Deine Navigation ist nämlich so riesig, dass man sich müde tabbt, bis man beim Inhalt ist. Alternativ mach einen "Nav"-Link und sorge dafür, dass der Fokus erstmal auf dem Inhalt landet. Das ist keine Erbsenzählerrei, überlege, wie ein Screenreader einem Menschen, der sich alt und sehschwach über seine COPD informieren will, deine Seite vorträgt.

Übrigens ist dein Cookie-Banner eine Katastrophe. Dunkelgrau auf Schwarz? Wortwörtlich ein Dark-Pattern 😉

Und schließlich noch der Hinweis auf Grid-Layout: Hiermit kann man über @media-Abfragen erreichen, dass bei bestimmten Umschaltpunkten das gesamte Seitenlayout umgestaltet wird, indem man die grid-template-areas einfach neu setzt. Flexbox mit Wrap ist auch eine Möglichkeit, aber nicht so flexibel.

Rolf