Floatende Infobox und Reihenfolge im DOM

[jensp]

Hallo zusammen,

folgende Aufgabenstellung: Zusätzlichen zu einem Text soll eine Box mit zusätzlichen Informationen (z.B. Kontaktdaten eines Ansprechpartners, weiterführenden Links o.ä.) angezeigt werden. Bei breiten Viewports soll diese Box an der rechten Seite positioniert sein und vom Text umflossen werden. Bei schmalen Viewports soll die Box unterhalb liegen. Soweit alles kein Problem. Dazu sind aber hier zwei Fragen aufgetaucht:

• Kann man das Markup (abgesehen von fehlender Überschrift etc.) noch verbessern?
• Gibt es eine Möglichkeit das gleiche Layout für breite Viewports zu produzieren, wenn dass sich aside-Element im nach dem div befindet? Meiner Ansicht nach nicht, aber eventuell übersehe ich was.

Beste Grüße

Jens

[MrMurphy1]

Hallo

Das div-Element weglassen löst deine Probleme.

Gruss

MrMurphy

[Henry]

Hallo MrMurphy1,

Das div-Element weglassen löst deine Probleme.

Welche Probleme?

@jensp

• Kann man das Markup (abgesehen von fehlender Überschrift etc.) noch verbessern?

Warum Flexbox? geht doch auch zb. so., wobei float und das dazugehörige clear auch nicht unbedingt meine erste Wahl wäre, aber in diesem kleinen Fall, ok.

*zur info. IE11 kenn kein <main>

• Gibt es eine Möglichkeit das gleiche Layout für breite Viewports zu produzieren, wenn dass sich aside-Element im nach dem div befindet? Meiner Ansicht nach nicht, aber eventuell übersehe ich was.

Verstehe ich nur teilweise… Was die Platzierung im Code betrifft, ja geht auch aber dann nur, soweit ich das sehe, scriptgesteuert. Macht hier aber nicht wirklich Sinn.

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

*zur info. IE11 kenn kein <main>

Und? Was willst du damit sagen? Dass man noch <main role="main"> schreiben sollte?

LLAP 🖖

[Henry]

Hallo Gunnar,

Und? Was willst du damit sagen? Dass man noch <main role="main"> schreiben sollte?

Nein, weil auch das geht nicht. <div role="main"> geht.

Henry

[Auge]

Hallo

Und? Was willst du damit sagen? Dass man noch <main role="main"> schreiben sollte?

Nein, weil auch das geht nicht. <div role="main"> geht.

Das heißt, man solle auf immer <div role="main"> benutzen, weil es noch auf ewig Nutzer des IEs geben könnte? Für die gibt es html5shim. Wer selbst mit dem Hammer draufhauen will, setzt mit JS document.createElement('main'); (eventuell mit IE-Detektion) und legt in CSS main { display:block; } fest. Fertig ist der Lack. Dem hypothetischen einen IE-Nutzer, der JS deaktiviert hat, wird <main> halt vorhenthalten.

Tschö, Auge

[Henry]

Hallo Auge,

Das heißt, man solle auf immer <div role="main"> benutzen, weil es noch auf ewig Nutzer des IEs geben könnte?

Ja unbedingt, rofl! 😉 Nein, natürlich nicht, das muss jeder für sich selbst entscheiden. Aber ich mache es so, solange der Anteil der Nutzer sich oberhalb 5% bewegt(Ich habe da eh meine eigenen Ansichten, was diese ewigen neuen Tags betrifft). Hatte es ja auch nur zur Info reingeschrieben.

Gruss
Henry

[jensp]

Hallo zusammen,

nur zur Info: für die Seite, auf das Konstrukt (oder das was sich dann aus der Diskussion hier ergibt) eingesetzt wird, ist der Anteil der IE11 Nutzer geringer als der Durchschnitt (unter 2%, in den letzten Monaten sogar teilweise unter 1%). Die meisten Besucher benutzen Chrome oder Firefox in einer aktuellen Version (mind. aktuelle ESR)

IE11-Kombatibilität wird allerdings trotzdem am Ende noch mal geprüft, um sicherzustellen, dass alle Informationen auch für IE11-Nutzer zugänglich sind. Allerdings gibt es eventuell ein paar Abstriche am Design für IE11-Nutzer.

Beste Grüße

Jens

[Henry]

Hallo jensp,

IE11-Kombatibilität wird allerdings trotzdem am Ende noch mal geprüft, um sicherzustellen, dass alle Informationen auch für IE11-Nutzer zugänglich sind. Allerdings gibt es eventuell ein paar Abstriche am Design für IE11-Nutzer.

Dann wäre vielleicht eine Umsetzung mit GRID, je nachdem wie die Seite am Ende komplett aussieht, ratsamer als Flexbox.

Gruss
Henry

[Gunnar Bittersmann]

@@jensp

Bei schmalen Viewports soll die Box unterhalb liegen. Soweit alles kein Problem.

Doch, das Umsortieren von Flexitems mit order ist ein Problem. Visuell kommt der Haupttext vor der Zusatzinformation; ein Screenreader liest aber erst die Zusatzinformation vor, dann den Haupttext. Das dürfte etliche Nutzer verwirren.

Und wenn in Haupttext und Zusatzinformation noch interaktive Elemente (Links, Buttons, …) sind, springt der Fokus bei Tastaturnavigation wild umher – die Seite wird so ziemlich unbedienbar.

TL;DR: order ist – wenn überhaupt – mit Bedacht einzusetzen. Also eher gar nicht.

LLAP 🖖

[jensp]

Hallo Gunnar,

deshalb ja die Frage, ob man das gleiche Layout für die breiten Viewports auch produzieren kann, wenn das aside nach dem Haupttext steht.

Beste Grüße

Jens

[Henry]

Hallo jensp,

deshalb ja die Frage, ob man das gleiche Layout für die breiten Viewports auch produzieren kann, wenn das aside nach dem Haupttext steht.

Das verstehe ich immer noch nicht. Was haben denn, in diesem Fall, die Viewports mit der Anordnung zu tun?

Habe das Beispiel noch mal angepasst inkl. mediaquery und ohne maincontainer. Was die breiten Viewports betrifft… einfach mal vergrößern/ziehen. Denke aber du meinst was anderes, nur was?

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

Denke aber du meinst was anderes, nur was?

„Bei schmalen Viewports soll die Box unterhalb liegen.“

LLAP 🖖

[Henry]

Hallo Gunnar,

„Bei schmalen Viewports soll die Box unterhalb liegen.“

ah ok. Dachte zwar nicht, dass das gemeint war wegen dem hier

ob man das gleiche Layout für die breiten Viewports auch produzieren kann

aber da kein Einspruch erfolgte, vermute ich du hast recht, danke.

Gruss
Henry

[Gunnar Bittersmann]

@@jensp

deshalb ja die Frage, ob man das gleiche Layout für die breiten Viewports auch produzieren kann, wenn das aside nach dem Haupttext steht.

Irgendwann, wenn es denn mal diese Regions in CSS gibt …

Bei Floats ist es nunmal so, dass das, was umflossen werden soll, vorher stehen muss.

Aber auch kein Problem: Du kannst ja das aside-Element clonen. Da du Inhalte nicht doppelt pflegen möchtest, wäre JavaScript dafür das Mittel der Wahl.

Das aside-Element steht nach dem Haupttext; der Clon davor. Du musst nur dafür sorgen, dass je nach Viewportbreite jeweils nur eins davon sichtbar ist. Dabei darf das aside-Element nur dann ausgeblendet werden, wenn der Clon existiert, d.h. wenn das JavaScript ausgeführt wurde. Dazu hinterlässt das JavaScript eine Spur, z.B. in Form eines data-Attributs beim aside-Element.

Guckst du.

LLAP 🖖