Design Umsetzung

[Gunnar Bittersmann]

@@Bernd

Desktop-Ansicht:

Handy-Ansicht

Bezeichnungen wie „Desktop-Ansicht“ und „Handy-Ansicht“ sollten aus der Denke verschwinden. Sie führen grundsätzlich in die Irre.

Wie soll’s bei einem Desktop-Nutzer aussehen, der die Schrift stark vergrößert hat? Wie soll’s auf einem Handy im Querformat aussehen? Siehste, die Begriffe taugen nicht.

Es gibt „breit“ und „schmal“ – und das hat rein gar nichts mit irgendwelchen Geräten zu tun.

„Breit“ meint hier: beide Links passen nebeneinander; „schmal“ meint: sie passen nicht nebeneinander.

Zwei <a></a> die nebeneinander sind? oder zwei <div></div>?

<a> ist fein; <div> brauchst du keine.

Zwei Boxen, die dieselbe Breite und Höhe haben sollen – das hört sich nach Grid an. Damit die Box nicht breiter wird als nötig: max-width: max-content.

Die Gridzellen haben jeweils einen Rahmen; wo sie zusammenstoßen, ist der dann doppelt so dick. Deshalb bekommt die Grid-Box ebenfalls einen Rahmen in dieser Dicke verpasst.

Aber wie bekomme ich das oder in die Mitte?

Absolut positioniert. Mit left: 50%; top: 50% positionierst du die linke obere Ecke des „oder“ in die Mitte der Grid-Box (die Prozentangaben beziehen sich auf Breite/Höhe der Grid-Box); mit transform: translate(-50%, -50%) schiebst du das „oder“ in die Mitte (die Prozentangaben beziehen sich auf Breite/Höhe der „oder“-Box).

☞ Guckst du.

LLAP 🖖