Jörg: css: Rechteck mit Text daneben

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

  1. 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:

    • Einfach ein <p> um jeden Erklärblock
    • die Erklärungen sind eine Liste und die Rechtecke sind ::before-Pseudoelemente der <li> Elemente, sofern sie rein dekorativen Charakter haben
    • die Rechtecke sind mehr als nur Rechtecke, sie enthalten bspw. noch ein Bild oder weiteren Text, dann könnte man eine Description List bauen (mit <div> Elementen um <dt>/<dd>, damit dt und dd per flexbox nebeneinander können, oder mit einem Grid drumherum um das Ganze in 2 Spalten anzuordnen)

    So many possibilities, so little information 😏

    Rolf

    --
    sumpsi - posui - obstruxi
    1. 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

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

        Guckst Du

        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

        --
        sumpsi - posui - obstruxi
        1. 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.

          Guckst Du

          Jetzt haben wir zeitgleiche eine Lösung erarbeitet.

          Meine

          Danke für die Hilfe,

          Jörg

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

            --
            sumpsi - posui - obstruxi
            1. 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

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

              1. 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! 👍

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

                --
                sumpsi - posui - obstruxi
              3. @@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.

                🖖 Живіть довго і процвітайте

                --
                When the power of love overcomes the love of power the world will know peace.
                — Jimi Hendrix
                1. dl ist 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

                  1. @@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

                    🖖 Живіть довго і процвітайте

                    --
                    When the power of love overcomes the love of power the world will know peace.
                    — Jimi Hendrix
                    1. 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

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

                        --
                        sumpsi - posui - obstruxi
                        1. Hi Rolf,

                          Dazu müsstest Du einen Screenreader bemühen.

                          Verstehe, danke.

                          Jörg

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

                    --
                    sumpsi - posui - obstruxi
                    1. 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