nicht angemeldet
Rolf B
Rolf B
Rolf B
MudGuard
Rolf B
Gunnar Bittersmann
Gunnar Bittersmann
Rolf B
Rolf B
Hallo,
ich möchte 3 farbige Rechtecke mit jeweils erklärendem Text daneben darstellen.
Die 3 Rechtecke sind nicht so schwierig, aber mir machts Probleme den Text daneben zu schreiben.
<span class='r1'> </span> = Erklärtext 1
<span class='r2'> </span> = Erklärtext 2
<span class='r3'> </span> = Erklärtext 3
.r1
{
background-color:red;
display: inline-block;
border-width:1px;
border-style:solid;
border-color:#808080;
padding:0.3em;
width:300px;
height: 10px;
margin: 2px;
}
.r2
{
background-color:blue;
display: inline-block;
border-width:1px;
border-style:solid;
border-color:#808080;
padding:0.3em;
width:300px;
height: 10px;
margin: 2px;
}
.r1
{
background-color:green;
display: inline-block;
border-width:1px;
border-style:solid;
border-color:#808080;
padding:0.3em;
width:300px;
height: 10px;
margin: 2px;
}
Wie bekomme ich die 3 Boxen samt Text (neben der Box) untereinander? Wenn ich ein echtes Block-Element aus der Box mache, steht der Text nicht mehr neben der Box. Für den Text ein eigenes Block-Element zu machen, finde ich auch seltsam und ein <br> noch viel seltsamer.
Jörg
Hallo Jörg,
Für den Text ein eigenes Block-Element zu machen, finde ich auch seltsam
Aber richtig. Das Rechteck gehört dann ggf. mit hinein.
Was man genau zu verwenden hat und wie zu strukturieren ist, kommt auf den Kontext an. Wichtig ist, dass die HTML Struktur der inhaltlichen Bedeutung entspricht.
Denkbar ist:
So many possibilities, so little information 😏
Rolf
Hallo Rolf,
Für den Text ein eigenes Block-Element zu machen, finde ich auch seltsam
Aber richtig. Das Rechteck gehört dann ggf. mit hinein.
Ok. Dann mach ichs auch so. Aber ehrlich, da finde ich eine Tabelle als Designelement wirklich einfacher und selbsterklärender.
- die Erklärungen sind eine Liste und die Rechtecke sind ::before-Pseudoelemente der <li> Elemente, sofern sie rein dekorativen Charakter haben
Ich glaube, so würde ichs bezeichnen. Es geht darum, zu einer nachfogenden Tabelle die Zeilenhintergründe zu erklären.
Zeile in grün = Bei diesen Einträgen gibts diese Besonderheit
Zeile in gelb = Bei diesen Einträgen...
usw.
Jörg
Hallo Jörg,
eine Legende sind keine tabellarischen Daten. Eine <table> ist demnach falsch. Das ist eine Description List (<dl> Element). Solange Du Dich darauf festlegst, dt und dd eins-zu-eins zu setzen, geht das als Grid.
Wenn Du mit dieser Legende Farben erklären willst, dann mach Dir auch gleich Gedanken darüber, wie Du die farbliche Hervorhebung für (Farben)-blinde umsetzt, oder generell für eine Sprachausgabe.
Rolf
Hi Rolf,
eine Legende sind keine tabellarischen Daten. Eine <table> ist demnach falsch.
Ich weiß. Deshalb ja auch meine Frage.
Das ist eine Description List (<dl> Element). Solange Du Dich darauf festlegst, dt und dd eins-zu-eins zu setzen, geht das als Grid.
Jetzt haben wir zeitgleiche eine Lösung erarbeitet.
Danke für die Hilfe,
Jörg
Hallo Jörg,
ich kann Dich zu nichts zwingen, aber ich finde die ul Lösung nicht so gelungen. Du musst mit Klassen herumturnen, um spans eine Bedeutung zu geben. Eine Description List bringt das "ab Werk" mit.
Du solltest auf jeden Fall die gemeinsamen CSS Eigenschaften der Rechtecke "ausklammern".
Rolf
Hi Rolf,
Du musst mit Klassen herumturnen, um spans eine Bedeutung zu geben. Eine Description List bringt das "ab Werk" mit.
Das stimmt. Das ist aber auch der einzige Nachteil, finde ich.
Ansonsten finde ich die normale Liste einfacher zu lesen.
Du solltest auf jeden Fall die gemeinsamen CSS Eigenschaften der Rechtecke "ausklammern".
Ja, das kann man machen.
Jörg
Hi,
ich kann Dich zu nichts zwingen, aber ich finde die ul Lösung nicht so gelungen. Du musst mit Klassen herumturnen, um spans eine Bedeutung zu geben. Eine Description List bringt das "ab Werk" mit.
da das ganze ja eh nur für sehende Leute funktioniert:
Den Erklärtext ins li, das farbige Rechteck als border-left definieren
😉
cu,
Andreas a/k/a MudGuard
Hi Andreas,
ich kann Dich zu nichts zwingen, aber ich finde die ul Lösung nicht so gelungen. Du musst mit Klassen herumturnen, um spans eine Bedeutung zu geben. Eine Description List bringt das "ab Werk" mit.
da das ganze ja eh nur für sehende Leute funktioniert:
Den Erklärtext ins li, das farbige Rechteck als border-left definieren
Boah, und das geht?
Ganz schön kreativ! 👍
Hallo MudGuard,
du hast das Sarkasmus oder Ironie-Tag zu setzen vergessen 😟
da das ganze ja eh nur für sehende Leute funktioniert:
Konkreter: Sehende, nicht farbwahrnehmungs-behinderte Leute
Farben sind als alleiniges Darstellungsmerkmal irgendeines Sachverhalts ungeeignet!
Rolf
@@MudGuard
da das ganze ja eh nur für sehende Leute funktioniert:
Nein, das sollte es nicht nur.
Ein (Farb-)Blinder und eine „normal“ Sehende arbeiten zusammen. Der (Farb-)Blinde könnte der Sehenden sagen: „Schau dir mal den rot markierten Bereich an!“ – wenn denn die Legende zugänglich ist.
Mache niemals Mutmaßungen, was Nutzer nicht können. Sie werden sich über kurz oder lang als falsch herausstellen. Eher über kurz.
Den Erklärtext ins li, das farbige Rechteck als border-left definieren
dl ist das Mittel der Wahl – wie von @Rolf B gezeigt. Mit zugänglichem Text, nicht nur visuelle Farbflächen.
🖖 Живіть довго і процвітайте
dlist das Mittel der Wahl – wie von @Rolf B gezeigt. Mit zugänglichem Text, nicht nur visuelle Farbflächen.
Ganz sicher. Aber nicht im fiddle, denn hier genau haben wir das Problem: Ich kann die dl, dd und dt in roter Schrift und auf dem schwarzen Hintergrund nicht auseinanderhalten. 😉
Zudem kommt es immer auf die Anwendung selber an, ob man zusätzlichen Erklärtext im Farbfeld haben möchte. Bei mir ist es so, dass ich das definitiv nicht möchte. Dass das manche User ggf. ausschließt? Ist mir bewußt und eingepreist. Alternativkosten nennt man sowas in der Wirtschaft und ist bei nahezu jeder Entscheidung so. Man kanns halt nicht allen recht machen.
Trotzdem ist Rolfs Lösung für mich sehr nütlich, denn ich kannte diese Art von Listen bisher nicht und habe mir viele Beispiele angesehen, die ich selber zuvor nur mittels einer Tabelle hätte lösen können. Insofern gut zu wissen, dass es hierfür in css etwas brauchbares gibt.
Jörg
@@Jörg
Aber nicht im fiddle, denn hier genau haben wir das Problem: Ich kann die dl, dd und dt in roter Schrift und auf dem schwarzen Hintergrund nicht auseinanderhalten. 😉
??
Im Übrigen halte ich JSFiddle als HTML/CSS-Spielwiese für nicht gut geeignet. Wie der Name schon sagt, ist das für was anderes gut.
Zudem kommt es immer auf die Anwendung selber an, ob man zusätzlichen Erklärtext im Farbfeld haben möchte. Bei mir ist es so, dass ich das definitiv nicht möchte.
Zugänglicher Text heißt nicht zwangsläufig sichtbarer Text. Man kann den ggfs. visuell verstecken.
☞ Codepen
🖖 Живіть довго і процвітайте
Hi Gunnar,
Aber nicht im fiddle, denn hier genau haben wir das Problem: Ich kann die dl, dd und dt in roter Schrift und auf dem schwarzen Hintergrund nicht auseinanderhalten. 😉
??
??
Zugänglicher Text heißt nicht zwangsläufig sichtbarer Text. Man kann den ggfs. visuell verstecken.
☞ Codepen
Wow, schönes Beispiel.
Aber wie (oder für wen) ist jetzt der Text noch zugänglich?
Kannst du mir das erklären?
Jörg
Hallo Jörg,
Aber wie (oder für wen) ist jetzt der Text noch zugänglich?
Dazu müsstest Du einen Screenreader bemühen.
Rolf
Hi Rolf,
Dazu müsstest Du einen Screenreader bemühen.
Verstehe, danke.
Jörg
Hallo Jörg,
Ganz sicher. Aber nicht im fiddle, denn hier genau haben wir das Problem: Ich kann die dl, dd und dt in roter Schrift und auf dem schwarzen Hintergrund nicht auseinanderhalten. 😉
Das war vor 2 Jahren oder so eine bewusste Entscheidung der jsFiddle-Autoren: Zwangsweiser Dark Mode. Weil eh "niemand" was anderes benutzt. Ich bin so ein Niemand und habe geflucht - aber die Lesbarkeit ist bei mir noch nicht kaputt. Vielleicht aber dein Monitor? Zuwenig Kontrast?
Codepen ist da - meine ich - noch schlimmer. Ob man da den Dark Mode als registrierter User abschalten kann weiß ich nicht, aber die Darstellung im Dark Mode finde ich noch kontrastschwächer als im jsFiddle.
@Gunnar:
Im Übrigen halte ich JSFiddle als HTML/CSS-Spielwiese für nicht gut geeignet.
Wenn man die Präprozessoren von Codepen mag/braucht, ist der sicher besser. Von der generellen Brauchbarkeit finde ich wenig Unterschied. Oder habe die besonderen Vorteile von Codepen noch nicht entdeckt. Auto-Run (was ich in Codepen massiv hasse und sofort abschalte), kann man als registrierter User im jsFiddle mittlerweile auch einschalten. Aber diese Diskussion ist vermutlich die gleiche wie über den Lieblingseditor, die Lieblingstextverarbeitung oder den Lieblingssänger und sollte nicht fortgesetzt werden 😉
Rolf
Hi Rolf,
Das war vor 2 Jahren oder so eine bewusste Entscheidung der jsFiddle-Autoren: Zwangsweiser Dark Mode. Weil eh "niemand" was anderes benutzt. Ich bin so ein Niemand und habe geflucht - aber die Lesbarkeit ist bei mir noch nicht kaputt. Vielleicht aber dein Monitor? Zuwenig Kontrast?
Ich fluche mit, denn auch ich verwende nie den Darkmode. Wenn ich mit Strg+ die Anzeige groß, größer, am größten mache, kann ichs auch lesen. Aber in meiner normalen Schriftgröße muss ich mich so sehr anstrengen, dass es schlicht sehr unangenehm für die Augen ist. Ok, vor 20 Jahren wäre das vielleicht anders gewesen...
Jörg