marctrix: Fertiges Beispiel ohne Bootstrap

Beitrag lesen

Hej Bernd,

ich würde fast behaupten da man solche Boxen in der Regel selbst füllt kann man von einem User/Admin verlangen ein wenig drauf zu achten dass jede Box gleich viel Text hat.

Solche Einschränkungen sind umkonstruktiv. Ein Text sollte so lang sein, wie es der Sinn erfordert, nicht wie es das Layout vorgibt.

Klar kann man längere Texte oft im Umfang variieren, indem man einen weniger wichtigen Aspekt hinzunimmt oder weglässt. Aber bei so kurzen Anreißer wie in deinem Beispiel finde ich das sehr problematisch. Da ist eh nur für das wichtigste Platz. Bedeutet: wenn da eh nichts relativ unwichtiges drin steht, kann ich das auch nicht weglassen.

Mehr Infos in eine Satz zu quetschen kann man oft machen. Man hat der sehr viel Aussage — so viel, dass manche Menschen die nicht mehr aufnehmen können.

Fazit: man kann einen guten Anreißer nur auf eine bestimmte Zeichenlänge bringen, wenn man ihn verschlechtert. Optik ist das nicht wert.

Hast du ein Link wo ich dieses mit Flexbox nachlesen kann oder kannst du mir sagen nach was ich suchen soll?

Kein Flexbox. — Weißt du wie man ohne Flexbox horizontal zentriert? In einer Flexbox geht das auch vertikal. Für Zentrierungen braucht man das nicht, da es dafür Flexbox-Eigenschaften gibt. Aber um ein Element ganz an einen Rand zu drücken, arbeitet man mit Außenabständen. Egal ob etwas ganz links, ganz rechts, ganz oben oder ganz unteren stehen soll.

Aber Vorsicht: das wird den Möglichkeiten von Flexbox nicht gerecht, die ja eben nicht oben und unten kennt. Sie hat einen Anfang und ein Ende der Achse, auf der Elemente angeordnet sind. Diese Achse kann horizontal oder vertikal sein, man kann die Anordnung auch in umgekehrter Reihenfolge festlegen.

Das muss man vor allem bedenken, wenn man im RWD seine Elemente abhängig vom verfügbaren Platz umordnet. Das Anordnen von Elementen in einer Flexbox mit solchen Methoden oder auch die Einflussnahme auf Größen mittels height und width ist etwas, dass schon dem Wort "flex" widerspricht, dass nun ja der Namensgeber dieser Technik ist. Man kann es machen, man macht es oft, auch ich setze es gelegentlich ein, schöner ist es aber, ohne auszukommen. Und wie @Gunnar Bittersmann schon sagte: es gibt auch objektive Gründe, davon "Abstand zu nehmen". Ein weiterlesen-Link steht dann womöglich deutlich näher am nächsten Artikel als an dem, zu dem er gehört.

Übrigens habe ich im Gegensatz zu Gunnar gar kein Problem damit die ganze Box zu verlinken. Ein simples aria-hidden genügt, um den Content in Screenreadern nicht ausgeben zu lassen, so dass SR-Nutzern nur die Überschrift vorgelesen wird.

Marc

--
Ceterum censeo Google esse delendam
0 119

Navigation nachbauen

Bernd
  • css
  • html
  1. 0
    Gunnar Bittersmann
    1. -1
      Bernd
      1. 1
        Gunnar Bittersmann
        1. 0
          Bernd
          1. 1
            ursus contionabundo
            1. 0
              Bernd
              1. 1
                ursus contionabundo
                • meinung
            2. 0
              klawischnigg
              1. 1
                Gunnar Bittersmann
                • meinung
                1. 0
                  Bernd
                  1. 0
                    Christian Kruse
                    • moderation
                2. 0
                  klawischnigg
              2. 2
                marctrix
                1. 1
                  Christian Kruse
                  1. 0
                    marctrix
                2. 0
                  klawischnigg
                  1. 0
                    marctrix
                  2. 0
                    Gunnar Bittersmann
              3. 1
                beatovich
          2. 1
            Gunnar Bittersmann
            • meinung
            1. -1
              Bernd
              1. 1
                Gunnar Bittersmann
                1. -1
                  Bernd
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Bernd
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Bernd
                    2. 3
                      dedlfix
                      1. 0
                        Gunnar Bittersmann
                        1. 1
                          dedlfix
                          1. 0
                            Gunnar Bittersmann
                            1. 2
                              dedlfix
                              1. 0
                                Gunnar Bittersmann
                                1. -3
                                  Bernd
                                  1. 4

                                    Politische Ränder

                                    ursus contionabundo
                                    • meinung
                                    • politik
                                2. 2
                                  dedlfix
                                3. 0
                                  Matthias Apsel
                                  1. 0
                                    Gunnar Bittersmann
                                    1. 0

                                      Viel Ehr ...

                                      ursus contionabundo
                                  2. 0
                                    Bernd
                                    1. 0
                                      Christian Kruse
                  2. 2

                    Bitte nicht so. Danke!

                    ursus contionabundo
            2. 0
              Hans
              1. 0
                Matthias Apsel
              2. 3
                marctrix
                1. 0
                  Hans
                  1. 1
                    marctrix
                    • barrierefreiheit
                    • meinung
                    1. 0
                      Hans
                  2. 1
                    Gunnar Bittersmann
          3. 2
            marctrix
            1. 0
              Gunnar Bittersmann
              1. -1
                dedlfix
                1. 0
                  Gunnar Bittersmann
                  • meinung
                  1. -1
                    Bernd
                    1. 1
                      Gunnar Bittersmann
                      1. 0
                        Bernd
                        1. 1
                          Matthias Apsel
                          1. 0
                            Bernd
                            1. 0
                              marctrix
                        2. 2
                          marctrix
                          1. 0
                            Mitleser
                          2. 0
                            Bernd
                            1. 1
                              Gunnar Bittersmann
                              1. -2
                                Bernd
                                1. 1
                                  Gunnar Bittersmann
                                  1. 0
                                    Bernd
                                    1. 0
                                      Gunnar Bittersmann
                                      1. 0
                                        Bernd
                                        1. 1
                                          Gunnar Bittersmann
                                          1. 0
                                            Bernd
                                            1. 0
                                              marctrix
                                              1. 0
                                                Bernd
                                                1. 0
                                                  marctrix
                                                  1. 0
                                                    Bernd
                                                    1. 0
                                                      marctrix
                                                      1. 0
                                                        Bernd
                                                        1. 0
                                                          marctrix
                                                          1. 0
                                                            Bernd
                                                          2. 0
                                                            Matthias Apsel
                                                            1. 0
                                                              marctrix
                                            2. 0

                                              Fertiges Beispiel ohne Bootstrap

                                              Bernd
                                              1. 1
                                                Matthias Apsel
                                                1. 0
                                                  Bernd
                                                  1. 1
                                                    Matthias Apsel
                                                    1. 0
                                                      Bernd
                                                  2. 0
                                                    Matthias Apsel
                                                2. 0
                                                  Gunnar Bittersmann
                                                  1. 0
                                                    Bernd
                                                    1. 1
                                                      Gunnar Bittersmann
                                                      1. 0
                                                        Bernd
                                                        1. 0
                                                          Gunnar Bittersmann
                                                        2. 0
                                                          marctrix
                                                          • css
                                                          • flexbox
                                                          1. 1

                                                            ganze Box verlinken

                                                            Gunnar Bittersmann
                                                            • barrierefreiheit
                                                            • html
                                                            • star trek
                                                            1. 0
                                                              marctrix
                                                              • barrierefreiheit
                                                              • html
                                                            2. 0
                                                              ursus contionabundo
                                                              1. 0
                                                                MudGuard
                                                                • menschelei
                                                                1. 0
                                                                  ursus contionabundo
                                                                2. 0
                                                                  Gunnar Bittersmann
                                                              2. 1
                                                                Gunnar Bittersmann
                                                                • barrierefreiheit
                                                                • css
                                                                • html
                                                                1. 0
                                                                  ursus contionabundo
                                        2. 0
                                          marctrix
                                      2. 0
                                        marctrix
                                        1. 0
                                          Bernd
                                          1. 0
                                            marctrix
                                  2. 0
                                    Bernd
                            2. 1
                              beatovich
                              1. 0
                                Bernd
                          3. 1
                            marctrix
                            1. 0
                              Gunnar Bittersmann
                              1. 0
                                marctrix
                                1. 0
                                  Gunnar Bittersmann
                                  1. 1
                                    marctrix
                                    1. 0
                                      Gunnar Bittersmann
                                      1. 0
                                        marctrix
                      2. 0
                        Matthias Apsel
                        1. 0
                          marctrix
                        2. 0

                          Aufträge aus moralischen Gründen abzulehnen ...

                          ursus contionabundo
                    2. 1
                      beatovich