Matthias Scharwies: CSS/Anwendung und Praxis/Inhalte zentrieren

Meta

CSS/Anwendung und Praxis/Inhalte zentrieren

Matthias Scharwies
+4 Informationen zu den Bewertungsregeln

problematische Seite

Servus!

Der Artikel CSS/Anwendung und Praxis/Inhalte zentrieren ist in die Jahre gekommen.

Auf der Diskussionseite findet sich folgendes ToDo:

Flexbox ist ebenso für die Zentrierung geeignet.

body {
display: flex;
align-items: center;
justify-content: center;
}
  • Wie sieht eine sinnvolle Reihenfolge aus? Sollten die ganzen Krücken dann nicht lieber ins Museum?

Ich wäre dafür, den Artikel umzuarbeiten, Flexbox als erstes Beispiel zu verwenden, die anderen Beispiele jedoch zu belassen und ihre Nachteile aufzuzählen, anstatt sie kommentarlos zu depublizieren.

Herzliche Grüße

Matthias Scharwies

--
Es gibt viel zu tun: ToDo-Liste
Beitrag melden
+4
Informationen zu den Bewertungsregeln

  1. CSS/Anwendung und Praxis/Inhalte zentrieren

    Matthias Scharwies
    – Informationen zu den Bewertungsregeln

    problematische Seite

    Servus!

    Ich hab's jetzt mal überarbeitet:

    • Einleitung gekürzt

    • Beispiel mit flex

    • durch die Klassennamen ist klar(er), ob Container oder zu zentrierende Elemente formatiert werden müssen:

    .inhalte-werden-zentriert {
  display: flex;
  align-items: center;
  justify-content: center;
}

.zentriert {
  margin-left:auto;
  margin-right:auto;
}

    Für weitere Anregungen sind wir immer dankbar!

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun: ToDo-Liste
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS/Anwendung und Praxis/Inhalte zentrieren

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      problematische Seite

      @@Matthias Scharwies

      • durch die Klassennamen ist klar(er), ob Container oder zu zentrierende Elemente formatiert werden müssen:

      Präsentationsbezogene Klassen — pfui Deibel! Das Wiki sollte gute Beispiele bringen, nicht schlechte. Das wäre zu überarbeiten.

      Außerdem sollte Zentrieren mit line-height ersatzlos gestrichen werden. Wegen: ist Bullshit. Oder eindringlich davor gewarnt werden – nicht eine vage Darstellung von „Eventualitäten“.

      LLAP 🖖

      --
      „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS/Anwendung und Praxis/Inhalte zentrieren

        Matthias Apsel Homepage des Autors
        +1 Informationen zu den Bewertungsregeln

        problematische Seite

        Hallo Gunnar Bittersmann,

        • durch die Klassennamen ist klar(er), ob Container oder zu zentrierende Elemente formatiert werden müssen:

        Präsentationsbezogene Klassen — pfui Deibel! Das Wiki sollte gute Beispiele bringen, nicht schlechte. Das wäre zu überarbeiten.

        Bei solchen Beispielen steht ja grade die Funktionsweise im Vordergrund. Konkrete Inhalte gibt es keine. Deshalb finde ich die Wahl der Klassenbezeichner in diesen Fällen richtig.

        Außerdem sollte Zentrieren mit line-height ersatzlos gestrichen werden. Wegen: ist Bullshit. Oder eindringlich davor gewarnt werden – nicht eine vage Darstellung von „Eventualitäten“.

        Ja. eindringlich davor warnen. „Stellen Sie sicher, dass Ihr Text unter allen Umständen mit dem Bild in einer Zeile bleibt.“

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

        1. CSS/Anwendung und Praxis/Inhalte zentrieren

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          problematische Seite

          @@Matthias Apsel

          Präsentationsbezogene Klassen — pfui Deibel! Das Wiki sollte gute Beispiele bringen, nicht schlechte. Das wäre zu überarbeiten.

          Bei solchen Beispielen steht ja grade die Funktionsweise im Vordergrund.

          Vordergrund considered harmful.

          Leute (insb. Anfänger, für die der Kram ja gedacht ist) lernen aus Beispielen – und zwar nicht nur das, was der Ersteller gern in den den Vordergrund gestellt hätte. Deshalb dürfen Beispiele nicht das, was nicht im Vordergrund steht, vernachlässigen. Deshalb müssen Beispiele responsive design im Auge haben. Deshalb müssen Beispiele inclusive design im Auge haben und barrierefrei sein. Deshalb dürfen Beispiele nicht den Eindruck erwecken, Stylen ginge ausschließlich über Klassen.

          Deshalb finde ich die Wahl der Klassenbezeichner in diesen Fällen richtig.

          Nein. Sie geben ein schlechtes Beispiel. Davon gibt es im Web schon (zu) viele. Wenn SELFHTML besser sein will, darf so etwas nicht drin vorkommen.

          Außerdem sollte Zentrieren mit line-height ersatzlos gestrichen werden. Wegen: ist Bullshit. Oder eindringlich davor gewarnt werden – nicht eine vage Darstellung von „Eventualitäten“.

          Ja. eindringlich davor warnen. „Stellen Sie sicher, dass Ihr Text unter allen Umständen mit dem Bild in einer Zeile bleibt.“

          Du hast mich falsch verstanden. Eine eindringliche Warnung ist: Sie können niemals sicherstellen, dass Ihr Text in einer Zeile bleibt (außer bei einsilbigen Buttonbeschriftungen wie „Los!“). Deshalb ist line-height völlig ungeeignet, Text vertikal zu zentrieren.

          LLAP 🖖

          --
          „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln