Text/Wörter/Bild in jeder ecke

[Gunnar Bittersmann]

@@Stefan Münz

<div class="w3-display-container w3-green" style="height:250px;">
  <div class="w3-display-topleft w3-padding">Top Left</div>
  <div class="w3-display-topright w3-padding">Top Right</div>
  <div class="w3-display-bottomleft w3-padding">Bottom Left</div>
  <div class="w3-display-bottomright w3-padding">Bottom Right</div>
  <div class="w3-display-left w3-padding">Left</div>
  <div class="w3-display-right w3-padding">Right</div>
  <div class="w3-display-middle w3-padding">Middle</div>
  <div class="w3-display-topmiddle w3-hide-small w3-padding">Top Middle</div>
  <div class="w3-display-bottommiddle w3-hide-small w3-padding">Bottom Middle</div>
</div>

Probiere es aus und werde glücklich damit.

Am Ende sollte der Nutzer der Seite glücklich werden. Und das ist bei diesem Markup nicht gegeben: die Reihenfolge der divs ist falsch. Die Reihenfolge im DOM sollte mit der visuellen Reihenfolge auf dem Bildschirm übereinstimmen. Tut sie das nicht, liest ein Screenreader den Seiteninhalt völlig durcheinander vor.

Aber guck dir auch mal die URL-Adresse der eingebunden CSS-Datei an.

Gefrickel mit absoluter Positionierung. Warum sollte sich ein Anfänger das antun, wo es doch CSS Grid gibt? – Hier nicht nur das beste Mittel zum Layouten, sondern auch das einfachste.

LLAP 🖖