An Viewportbreite flexibel anpassende Zentrierung eines noscript-Hinweises

[Matinee]

Hallo,

ich habe einen noscript-Hinweis für die User, die JS deaktiviert haben.

Er erscheint mit position: absolute und z-index 9 "auf" dem header-Element, das position relative hat.

Der Hinweis sollte horizontal gesehen immer zentriert in der Mitte des header sein, dessen Breite desktop-first abnimmt. Der noscript-Hinweis selbst (zwei kurze Sätze, mit <br> getrennt) verändert seine Breite je nach Zeilenumbruch ebenfalls.

Mit folgendem Code, den mir die Google-KI liefert und der mir angesichts des von mir noch nie benutzten "transform" nichts sagt, scheint es zu klappen. Das heißt, der Hinweis bleibt immer horizontal zentriert, von desktop bis kleinem Smartphone, obwohl header und noscript beide ihre Breite ändern.

Kann ich den Code bedenkenlos so nehmen, funktioniert das zuverlässig in allen mobile- und desktop-Browsern?

header > noscript {
    position: absolute; 
    z-index: 9; 
    top: -3%;
    **left: 50%; 
    transform: translate(-50%);** 
    ...
    ...

[Gunnar Bittersmann]

@@Matinee

Mit folgendem Code, den mir die Google-KI liefert

KI hat kein Wissen über das, was sie ausspuckt. Sie würfelt und gibt das aus, was anhand der Trainingsdaten am wahrscheinlichsten erscheint.

Da die Trainingsdaten in Sachen HTML und CSS grottenschlecht sind, kann KI da auch kaum was Vernünftiges liefern.

Kann ich den Code bedenkenlos so nehmen, funktioniert das zuverlässig in allen mobile- und desktop-Browsern?

header > noscript {
    position: absolute; 
    z-index: 9; 
    top: -3%;
    **left: 50%; 
    transform: translate(-50%);** 
    ...
    ...

Vermutlich nicht. Interessant wären zur Beurteilung noch die Teile hinter den Punkten.

Zentrieren mit position: absolute; left: 50%; transform: translate(-50%) hat man irgendwann mal so gemacht, als es noch kaum bessere Methoden dafür gab. Also so bis vor 5 Jahren.

Mittlerweile geht das deutlich besser. Aber da das kaum in den Trainingsdaten vorkommt, „weiß“ die KI davon nichts.

🖖 Live long and prosper

[Matinee]

Da die Trainingsdaten in Sachen HTML und CSS grottenschlecht sind, kann KI da auch kaum was Vernünftiges liefern.

Ich bin durchaus kein Freund der KI. Lebensphilosophisch gedacht brauchen wir mehr menschliche Intelligenz, nicht mehr künstliche. Mehr Effektivität hilft gar nichts und ist gefährlich, wenn die gleichen Menschen sie bedienen, die eben gerade nicht intelligenter, besser gesagt "weiser" werden.

In fachlichen Fragen rund um Webdesign bekomme ich aber gelegentlich durchaus gute Anhaltspunkte, auf denen sich aufbauen lässt.

Vermutlich nicht. Interessant wären zur Beurteilung noch die Teile hinter den Punkten.

Das sind nur noch ein paar Designstylings, die sollten keinen Unterschied machen, aber du hast Recht, ich sollte immer gleich alles an Code posten:

    padding: 1%; 
    background-color: white;
    text-align: center;
    font-size: 0.875rem; 
    border: 6px double red;
    border-radius: 6px;

Zentrieren mit position: absolute; left: 50%; transform: translate(-50%) hat man irgendwann mal so gemacht, als es noch kaum bessere Methoden dafür gab. Also so bis vor 5 Jahren.

Ich bin ja auch ein alter Sack, von daher passt das schon…

position absolute/relative nutze ich eh und wenn es mit zwei weiteren Zeilen Code wie gewünscht in allen Browsern funktioniert, was will ich mehr?

Mit caniuse lassen sich solche Kombis von Eigenschaften nicht prüfen, aber wenn es eine alte Methode zum Zentrieren ist, dann sollten es alle Mobil- und Desktopbrowser "können"?

[Ryuno-Ki]

Moin Matinee,

ich hab dafür gerne https://css-tricks.com/centering-css-complete-guide/ als Lesezeichen zur Hand.

Gruß,

[Matinee]

Hallo Ryuno-Ki,

guter Link, danke.

Habe mich am Wochende noch etwas umgesehen im Web, aber bei CSS-tricks ist es recht systematisch zusammengefasst.

position in Kombi mit transform: translate() scheint eine der durchaus gängigen Methoden zu sein, ein Blockelement zu zentrieren.

Habe auch eine Abfrage bei caniuse zu transform - translate() gefunden, die 96,4% ergibt:

https://caniuse.com/mdn-css_types_transform-function_translate

Alle gängigen Browser unterstützen es seit geraumer Zeit. Geben tut es transform - translate seit 2015.

[Matthias Scharwies]

Servus!

Hallo Ryuno-Ki,

guter Link, danke.

Habe mich am Wochende noch etwas umgesehen im Web, aber bei CSS-tricks ist es recht systematisch zusammengefasst.

position in Kombi mit transform: translate() scheint eine der durchaus gängigen Methoden zu sein, ein Blockelement zu zentrieren.

Habe auch eine Abfrage bei caniuse zu transform - translate() gefunden, die 96,4% ergibt:

https://caniuse.com/mdn-css_types_transform-function_translate

Alle gängigen Browser unterstützen es seit geraumer Zeit. Geben tut es transform - translate seit 2015.

@Gunnar Bittersmann schrieb am Samstag:

Zentrieren mit position: absolute; left: 50%; transform: translate(-50%) hat man irgendwann mal so gemacht, als es noch kaum bessere Methoden dafür gab. Also so bis vor 5 Jahren.

Im SELF-Wiki gibt es einen Artikel, der neuer ist:

"Zentrierte Inhalte" leitet in der Suche auf:

CSS/Tutorials/Ausrichtung/Inhalte_zentrieren

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

nav a {
    display: block;
    height: 100%;
    text-align: center;
    align-content: center;
}

Herzliche Grüße
Matthias Scharwies

[Ryuno-Ki]

Moin Matthias,

Im SELF-Wiki gibt es einen Artikel, der neuer ist:

"Zentrierte Inhalte" leitet in der Suche auf:

CSS/Tutorials/Ausrichtung/Inhalte_zentrieren

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

Das geht vielleicht sogar noch ein Tacken kürzer:

.inhalte-werden-zentriert {
  display: flex;
  place-items: center;
}

Ich kenn das aber eher mit display: grid;.

Gruß,

[Matthias Scharwies]

Servus!

Moin Matthias,

Im SELF-Wiki gibt es einen Artikel, der neuer ist:

"Zentrierte Inhalte" leitet in der Suche auf:

CSS/Tutorials/Ausrichtung/Inhalte_zentrieren

Ich kenn das aber eher mit display: grid;.

Im Tutorial:

Die einfachste Umsetzung gelingt durch Anwenden des Flexbox- oder Grid-Layouts.

Herzliche Grüße
Matthias Scharwies