Design Umsetzung

[Bernd]

Hallo,

eine Frage an die CSS Spezialisten, wie würdet ihr folgendes umsetzten?

Desktop-Ansicht:

Handy-Ansicht

Zwei <a></a> die nebeneinander sind? oder zwei <div></div>? Aber wie bekomme ich das oder in die Mitte?

[beatovich]

hallo

Hallo,

eine Frage an die CSS Spezialisten, wie würdet ihr folgendes umsetzten?

Desktop-Ansicht:

Handy-Ansicht

Zwei <a></a> die nebeneinander sind? oder zwei <div></div>? Aber wie bekomme ich das oder in die Mitte?

Ein oder lässt sich mit einem select oder mit input type=radio realisieren.

für alles andere verwende man aria="presentational"

3 Elemente mit display:flex zu stacken, dürfte wohl nicht so schwierig sein.

[encoder]

Mein erster Gedanke war, seit wann schreibt man "oder" zwischen verschiedene Links?
Geht es um einen Kunden der gestern gehört hat dass es Internet gibt und heute eine Webseite haben will?

[Tabellenkalk]

Hallo,

Mein erster Gedanke war, seit wann schreibt man "oder" zwischen verschiedene Links?

Seit wann weiß ich nicht, aber wenn man es macht, dann doch um einen vollständigen Satz hinzukriegen. Daran mangelt es hier leider eklatant…

Edith merkt auch noch an, dass das Verb „kontaktieren“ lautet.

Gruß
Kalk

[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 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

☞ Guckst du.

Unschön daran: die magic numbers, insbesondere die im Media-Query.

Der Breakpoint richtet sich nach dem (längsten) Inhalt und hängt auch von der verwendeten Schriftart ab (welche das beim Nuzter jeweils ist, weiß man nicht).

Ich habe noch keine Möglichkeit gefunden anzugeben: wenn beide Links ohne Zeilenumbruch nebeneinander passen, stelle sie nebeneinander dar – aber beide gleich breit. Wenn sie nicht nebeneinander passen, stelle sie übereinander dar – aber beide gleich hoch. Die Boxen dabei bitte nur so breit wie nötig.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

☞ Guckst du.

Unschön daran: die magic numbers, insbesondere die im Media-Query.

Der Breakpoint richtet sich nach dem (längsten) Inhalt und hängt auch von der verwendeten Schriftart ab (welche das beim Nuzter jeweils ist, weiß man nicht).

Die magic number wird man los, wenn man den Media-Query loswird. Eine CSS-Lösung wollte mir dazu nicht einfallen.

Also nicht mit CSS prüfen, ob zwei gleichbreite Boxen nebeneinander passen, sondern mit JavaScript.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@Bernd

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).

Warum nicht in dasselbe Grid?

Erster Link von Position eins bis 3, zweiter Link von drei bis fünf, das "oder" von zwei bis vier - je nachdem ob man in der horizontalen oder vertikalen Ansicht ist nimmt man grid-column oder grid-row. Gut man braucht media-queries. Brauchst du auch.

Klingt mir erst mal, ob es einen Versuch wert ist (der Teufel liegt bekanntlich oft im Detail und ich komme gerade nicht dazu, es auszuprobieren, mir fällt aber gerade nichts ein, was dagegen sprechen sollte…)

Marc

[Gunnar Bittersmann]

@@marctrix

Warum nicht in dasselbe Grid?

Erster Link von Position eins bis 3, zweiter Link von drei bis fünf, das "oder" von zwei bis vier

Ja, das sollte auch gehen.

je nachdem ob man in der horizontalen oder vertikalen Ansicht ist nimmt man grid-column oder grid-row. Gut man braucht media-queries.

Und darin muss man das von dir Gesagte angeben …

mir fällt aber gerade nichts ein, was dagegen sprechen sollte…)

Hört sich unnötig kompliziert an.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@Gunnar Bittersmann

mir fällt aber gerade nichts ein, was dagegen sprechen sollte…)

Hört sich unnötig kompliziert an.

Keine Ahnung. Ich mag es, wenn ich eh Inhalte in Grid positioniere, dann auch für alle Elemente eines Moduls/UI-Elementes/Was-auch-immer in derselben Denke/Layoutmethode zu bleiben. Mir kommt es seltsam vor, zwei Elemente mittels grid anzuordnen, ein drittes aber mittels position: absolute (zumal sich das dritte sowohl logisch, als auch optisch mittendrin befindet) — ich bevorzuge es, die Methode erst zu wechseln, wenn das unumgänglich ist.

Marc

[Gunnar Bittersmann]

@@marctrix

Keine Ahnung. Ich mag es, wenn ich eh Inhalte in Grid positioniere, dann auch für alle Elemente eines Moduls/UI-Elementes/Was-auch-immer in derselben Denke/Layoutmethode zu bleiben.

Hab ich dann mal gemacht.

Zum Vergleich im diff-Checker:

LLAP 🖖

[Rolf B]

Look Ma, no media break and no styling markup (.conjunction)! Just a flex-wrap and a ::before.

https://jsfiddle.net/Rolf_b/rspcuawz/

Hat natürlich andere Nebenwirkungen.

• der Flex-Container geht über die ganze Breite
• der Rahmen wird mit einem Schatten gefaked

Rolf

[Gunnar Bittersmann]

@@Rolf B

Look Ma, no media break

Dafür eine magic number: .verteiler a { width: 12em }. Meh.

Nö, so war das nicht gedacht.

and no styling markup (.conjunction)! Just a flex-wrap and a ::before.

Hatte ich auch erst so, fand dann aber, dass das „oder“ zum Inhalt, also ins Markup gehört.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

ja, mag sein dass die magic number am Rahmen besser ist. Damit könnte man dann die Flexbox zwischen row und column Mode umschalten. Grid ist natürlich noch besser, das 1fr ermittelt die Breite selbst. Deine beiden "auto" Spalten habe ich nicht verstanden. Das scheint was mit dem "oder" zu hexen. Aber was?

Das "oder" halte ich aber für reine Deko. Sollte ein Screenreader das wirklich vorlesen?

Was ist eigentlich mit meiner Idee, Schatten statt Rahmen zu verwenden um das Problem der Rahmenverdopplung zu umgehen? Ist das zulässig?

Was mich aber an meiner und deiner Lösung am meisten stört, ist eine ganz andere magische Nummer: die 2. Der dritte lauert garantiert schon im Hirn des Auftraggebers.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Deine beiden "auto" Spalten habe ich nicht verstanden. Das scheint was mit dem "oder" zu hexen. Aber was?

Die beiden 1fr-Spalten bzw. -Zeilen machen sich so breit bzw. hoch wie möglich. Die beiden auto-Spalten bzw. -Zeilen machen sich so breit bzw. hoch wie nötig, d.h. sie passen sich dem Inhalt an – wie du vermutest hast: dem „oder“-Dingens.

Ich hätte auch jeweils 1fr 1.25em 1.25em 1fr angeben können und auf die Breiten- und Höhenangaben für .conjunction verzichten können, hielt es aber hier für besser, das „oder“-Dingens bestimmt seine Größe selbst anstatt sie von außen (vom Grid) bestimmt zu bekommen.

Der Screenshot mit dem Firefox-Entwicklerwerkzeug sollte das verdeutlichen:

Die Box mit „Timm Thaler“ geht in der Breitansicht von Zeilenlinie 1 bis −1 (d.h. bis zum Ende) und von Spaltenlinie 1 bis 3. Die Box mit „Das verkaufte Lachen“ geht ebenfalls über die volle Höhe, aber von Spaltenlinie −3 bis −1. Ich hätte auch abgeben können von 3 bis 5, habe mich aber aus Symmetriegründen für −3 bis −1 entschieden. (Bei der Schmalansicht sind Zeilen und Spalten vertauscht.)

Das „oder“-Dingens geht in Zeilen und Spalten jeweils von Linie 2 bis −2, was dasselbe ist wie 2 bis 4 oder −4 bis −2. Wieder: Symmetrie.

Wäre das Hexenwerk damit aufgeklärt?

---

Das "oder" halte ich aber für reine Deko. Sollte ein Screenreader das wirklich vorlesen?

Screenreader lesen auch CSS-generierten Inhalt vor. (IIRC nicht alle, aber die meisten.)

Was ist eigentlich mit meiner Idee, Schatten statt Rahmen zu verwenden um das Problem der Rahmenverdopplung zu umgehen? Ist das zulässig?

Erlaubt ist was gefällt. Mir gefällt es aber nicht, Rahmen als Schatten zu generieren. Auch wenn’s genauso aussieht, der Code-Lesbarkeit kommt das sicher nicht zugute.

Was mich aber an meiner und deiner Lösung am meisten stört, ist eine ganz andere magische Nummer: die 2. Der dritte lauert garantiert schon im Hirn des Auftraggebers.

Du meinst eine dritte Link-Box?

LLAP 🖖

[Rolf B]

Hallo Gunnar,

danke für die Sezierung. Ja, ich meinte einen dritten Link.

Rolf

[’sup]

Hi,

Die komplette Navigation wird ein Flex-Container. Durch die Kombination von flex-wrap und flex-basis wird das ganze Ding responsiv, ohne einen Media-Query setzen zu müssen. Die Begrenzung der Breite erfolgt durch eine (zugegeben zufällig gewählte) max-width. Schöner wäre natürlich, wenn sich die max-width am Inhalt orientieren würde. Das habe ich aber nicht hinbekommen …

⇒ Codepen