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

[Gunnar Bittersmann]

@@Ryuno-Ki

Das geht vielleicht sogar noch ein Tacken kürzer:

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

Es geht sogar noch ein Tacken kürzer:

(wenn es sich um ein modales Dialogfenster handelt).

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Matinee

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

Ich hab den URLs mal zu einem Link gemacht. In der Hilfe steht, wie’s geht.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Matinee

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

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

Ja, aber nur incl. Vendor-Prefixe. Sonst sind’s nur 96,3%. 😉

Alle gängigen Browser unterstützen es seit geraumer Zeit.

Opera Mini ist in einigen Gegenden der Welt sicher auch ein gängiger Browser. Unsere Breiten zählen wohl nicht dazu.

Geben tut es transform - translate seit 2015.

Und geben tut^[1] es auch translate als CSS-Eigenschaft. Alle gängigen Browser unterstützen es seit geraumer Zeit. Kein Grund mehr, das umständlich mit transform: translate() zu notieren.

Und nun rate mal, wer das nicht kennt! Meine „Unterhaltung“ mit ChatGPT:

Dumm wie Stulle, das Ding. Aber anstatt zuzugeben, von CSS keine Ahnung zu haben, lügt einem das Ding das Blaue vom Himmel herunter.

🖖 Live long and prosper

---

1. Meine Mutter sagte immer: „Tuten tut der Nachtwächter.“ Aber ich bleibe mal bei deiner Formulierung. 😉 ↩︎

[Gunnar Bittersmann]

@@Matinee

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

Gibt es solche Nutzer?

Und falls doch, dürften das immer noch weniger sein als diejenigen, bei denen JavaScript aus anderen Gründen nicht ausgeführt wird (z.B. Netzverbindung bricht ab, bevor das Script geladen wurde). Bei denen wird dein noscript-Hinweis aber nicht angezeigt.

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

Was immer da im Header steht, scheint nicht so wichtig zu sein, wenn du es mit dem noscript-Hinweis einfach überdeckst.

Der Hinweis sollte horizontal gesehen immer zentriert in der Mitte des header sein

Da den Hinweis kaum jemand je zu sehen bekommt, lohnt es da wirklich, groß Aufwand in dessen Positionierung zu stecken?

dessen Breite desktop-first abnimmt.

desktop-first? Media-Query? Ich komme da ohne aus.

🖖 Live long and prosper