Unsere COPD Webseite: Beitragsinhalt mittig bekommen

[COPD]

Hallo an jeden Leser. Schön das Du noch in Foren aktiv bist 🥰

Ich habe heute an unserer Webseite über die COPD Krankheit herumgedoktert. Alles hat so weit geklappt und es wird langsam responsiv nur schaffe ich es ums verplatzen nicht die l_sidebar auf die richtige Seite zu bekommen. Der Hauptinhalt soll mittig sein und die r_sidebar natürlich auf die rechte Seite.

Kann sich das bitte mal jemand anschauen der mir den Fehler erklärt und vielleicht auch noch einen Lösungsansatz liefert? Erreichbar ist die Seite über Copd-Krankheit.de

PS. Bitte nicht über mobile Geräte aufrufen, da sonst nicht die korrekte Seite ausgeliefert wird.

So soll es wieder aussehen:

[Matthias Scharwies]

Hallo,

Ich habe heute an unserer Webseite über die COPD Krankheit herumgedoktert.

Ja, so kann man's nennen!

Bitte nicht übelnehmen, aber bevor wir über die linke Sidebar reden, musst du

• ein Impressum haben, du sprichst in der Datenschutzerklärung drauf an, ich hab's jetzt in der linken Sidebar gefunden - evtl unten im footer noch einen Link.
  • die Datenschutzerklärung zeigt mir, dass du mit Google AdSense Geld verdienen möchtest, überleg dir das noch mal.
  • Dein Cookie-Banner kann man nur akzeptieren, nicht ablehnen, das ist illegal! (Opt-out-Lösung)
• deine div-Suppe in zeitgemäßes HTML(5) umschreiben
• der Validator meckert gar nicht so viel

PS. Bitte nicht über mobile Geräte aufrufen, da sonst nicht die korrekte Seite ausgeliefert wird.

Fehler!

1. Zuerst gutes Markup, das auch ohne CSS dargestellt wird.
2. dann Mobile first und
3. dann erst mehrspaltig!

Herzliche Grüße

Matthias Scharwies

[MrMurphy]

Für ein responsives Design solltest du zwei grundsätzliche (veraltete) Dinge ändern:

1. Unnötige Container entfernen (beispielsweise div id=wrap oder div id=oopd-wrapper).

2. Auf float verzichten und CSS-Grid (display: grid;) oder Flexbox (display: flex;) verwenden.

[COPD]

Auf Flex umstellen wollte ich bzw. habe ich aber dann fingen die Probleme an. Auf meinem Mobilgerät stimmt mittlerweile gar nichts mehr wenn ich die Desktop Version darauf ansurfe 😫

@Matthias Scharwies & @Mr.Murphy, danke. Ich weiß da ist noch ein bißchen Chaos drin. Daran möchte ich mich später noch versuchen.

@Rolf, vielen Dank. Mit order 1, 2 und 3 schaffe ich die richtige Reihenfolge.

Auf dem PC sieht es jetzt zumindest gut aus und funktioniert. Auf Mobilgeräten bei ansurfen der Desktop Version ragt die l_sidebar über dem Inhalt. Zumindest beim Chrome Browser.

[Matthias Scharwies]

Servus!

Auf Flex umstellen wollte ich bzw. habe ich aber dann fingen die Probleme an. Auf meinem Mobilgerät stimmt mittlerweile gar nichts mehr wenn ich die Desktop Version darauf ansurfe 😫

@Matthias Scharwies & @Mr.Murphy, danke. Ich weiß da ist noch ein bißchen Chaos drin. Daran möchte ich mich später noch versuchen.

Bitte zieh das vor. Es hilft Dir! Später etwas glattzuziehen, ist aufwendiger.

@Rolf, vielen Dank. Mit order 1, 2 und 3 schaffe ich die richtige Reihenfolge.

Nein, @Rolf B Das war imho kein guter Tipp. Das HTML sollte die Reihenfolge auf dem Monitor wiederspiegeln, sonst könnten Tastaturnutzer sich ganz woanders wiederfinden, was verwirrt.

Auf dem PC sieht es jetzt zumindest gut aus und funktioniert. Auf Mobilgeräten bei ansurfen der Desktop Version ragt die l_sidebar über dem Inhalt. Zumindest beim Chrome Browser.

Entferne alle Breitenangaben (und auch Mehrspaltigkeit)! Dann stellt CSS alles untereinander und nichts ist außerhalb des Viewports.

In einer media query regelst du dann ,wie es auf breiteren Bildschirmen aussieht.

Herzliche Grüße

Matthias Scharwies

[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

[COPD]

Ich danke euch, auch für die Denkanstöße. An den wichtigen Punkt Screenreader Unterstützung hatte ich gar nicht gedacht. Das ist gerade für ältere Patienten ein nicht zu verachtendes Hilfsmittel. Das HTML sollte jetzt in der richtigen Reihenfolge sein (Inhalt, Seitenleisten).

Nun hätte ich gerne noch, dass auf Mobilgeräten die linke Seitenleiste unter den Hauptinhalt rutscht. Warum Sie das nicht tut ist mir auf dem Rätsel. Auf dem PC (FF) skaliert alles so wie es soll.

Ansonsten werde ich das für heute erst mal gut sein lassen (müssen) und mich morgen und die nächsten Tage noch mal daran setzen.

[Rolf B]

Hallo COPD,

Matthias schrieb, die Anordnung im DOM sollte der Anordnung auf dem Bildschirm entsprechen. Du hast es jetzt so, dass man zuerst in den Inhalt tabbt und dann in die linke und rechte Sidebar.

ICH würde das gut finden.

Wenn Du auf schmalen Bildschirmen beide Seitenleisten unter dem Hauptteil stehen haben möchtest und das ordentlich per Grid erledigen willst, dann musst Du einiges umbauen. Ich fürchte, dein Wordpress-Theme schießt da ganz schön quer. Aus den Handgelenk habe ich das jetzt nicht hinbekommen.

Die Idee ist jedenfalls, im "Normal-Layout" alles untereinander zu haben und im "Wide-Layout" mittels Grid die Elemente nebeneinander zu setzen. Die Grundidee steht hier im Wiki, aber es ist nicht wenig Arbeit.

Rolf