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 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"?