CSS Hilfe benötigt

[Passwort]

Hallo

Ich habe aktuell ein (vermutlich) CSS Problem mit einer Seite. Es geht um das Titelbild. In diesem Titelbild befindet sich ein Text. Auf einem grossen Monitor sieht das alles gut aus, aber auf dem schmalen Handybildschirm ist der Text gequetscht. Da ich mich in CSS nicht gut auskenne, hoffe ich, dass Ihr mir helfen könnt 😀

Das Titel-Hintergrundbild wird im header-Tag aufgerufen:

<header class="d-block">
         <div class="Titel">
             T&ouml;sstal spielt
        </div> <br>
       <div class="Untertitel">
             Das Spiele-Wochenende im T&ouml;sstal
        </div> 
    </header>

Und der dazu passende CSS Code ist der folgende:

<style>
    header {
      background-image: url('<?= RESSOURCE_URL ?>/img/game-340574_1280.jpg');
      height: 30vh; 
      background-repeat: no-repeat; 
      background-size: cover;
    }
    .Titel {
      position: absolute;
      top: 8vh;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: "Lucida Handwriting", "Brush Script MT", Cursive;
      font-size: 6em;
      font-style: oblique;
      font-weight: bold;
      color: white;
    } 
    .Untertitel {
      position: absolute;
      top: 15vh;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: "Lucida Handwriting", "Brush Script MT", Cursive;
      font-size: 2em;
      font-style: oblique;
      font-weight: bold;
      color: white;
    }
</style>

Wie es dann aussieht: So sieht das auf dem grossen Monitor aus

Ab hier kommts schon zu einem Seitenumbruch, obwohl an den Seiten noch Platz wäre.

So ungefähr sieht es am Handy aus.

Ich dachte eigentlich, dass die Schrift mit kleiner werdendem Bereich auch kleiner wird, oder hängt das nur von der Höhe ab?

Besten Dank falls Ihr eine Lösung parat habt. Die Screenshots haben jeweils Original-Grösse.

[Gunnar Bittersmann]

@@Passwort

<header class="d-block">
         <div class="Titel">
             T&ouml;sstal spielt
        </div> <br>
       <div class="Untertitel">
             Das Spiele-Wochenende im T&ouml;sstal
        </div> 
    </header>

Da stimmt so einiges nicht. Ich vermute, das soll eine Überschrift sein? Es mag wie eine aussehen, aber es ist keine.

So ist es eine:

<hgroup>
  <h1>Tölsstal spielt</h1>
  <p>Das Spiele-Wochenende im Tölsstal</p>
</hgroup>

Mir scheint, es sollte aber eher „Das Spiele-Wochenende im Tölsstal“ die eigentliche Überschrift sein (das, was in der document outline als Überschrift erscheint und was von Screenreadern als Überschrift angesagt wird):

<hgroup>
  <p>Tölsstal spielt</p>
  <h1>Das Spiele-Wochenende im Tölsstal</h1>
</hgroup>

Oder wenn beides die Überschrift sein soll (was ich nicht glaube):

<h1>
  <span>Tölsstal spielt</span>
  <span class="visually-hidden">–</span>
  <span>Das Spiele-Wochenende im Tölsstal</span>
</h1>

Das Escapen des Umlauts ist ebenso überflüssig wie das <br>-Element.

Was p und was h1 ist, hat nichts mit den Schriftgrößen zu tun. Diese werden per CSS angegeben.

---

    header {
      height: 30vh; 

Warum relativ zur Viewporthöhe? Das heißt, auf Telefonen (im Hochformat) sehr hoch? Und im Querformat womöglich nicht hoch genug, dass der Text reinpasst?

Warum nicht einfach so hoch, wie es der Text erfordert?

---

    .Titel {
      position: absolute;
      top: 8vh;
      left: 50%;
      transform: translate(-50%, -50%);

Warum absolute Positionierung? Wegen Zentrierung? Die geht anders; hier wohl einfach mit text-align: center.

---

Besten Dank falls Ihr eine Lösung parat habt.

Ohne Problembeschreibung gibt es keine Lösung. Zur Problembeschreibung gehört ein Link zur fraglichen Seite oder zu einem Online-Beispiel, wo das Problem sichtbar ist.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

das ist Tösstal, nicht Tölstal. Das ö hat Dich verwirrt 😉

Das gezeigte CSS erklärt jedenfalls nicht, warum die Schrift auf einem größeren Monitor größer wird. Die Fontsize ist ja in em angegeben. Ich vermute eine font-size Angabe in vh oder vw auf body oder :root als Sünder. Die gehört da definitiv nicht hin.

Auf dem Handy würde ich vermuten, dass die Viewportangabe fehlt, das Handy deswegen die 960px Emulation aktiviert und alle vh/vw Berechnungen für den Eimer sind.

Ohne Onlinebeispiel ist das alles jedenfalls Spökenkiekerei (sofern ein Schweizer dieses Wort versteht 😉)

Rolf

[Gunnar Bittersmann]

@@Rolf B

Auf dem Handy würde ich vermuten

Und solche Vermutungen spare ich mir. Die können zufällig richtig sein oder auch nicht. Wie Schrödingers Katze tot oder lebendig. Was das Viech nun gerade ist, erfährt man erst, wenn man nachschaut. Und wenn man nichts zum Schauen hat, kann man halt nichts sagen.

Kwakoni Yiquan

[Passwort]

ALso, die Seite ist hier. Die Seite ist aber noch nicht fertig und das Gerüst stammt auch nicht von mir, ich habe nur den Inhalt beigesteuert.

Das ganze soll durchaus die Überschrift sein, hinterlegt durch das Hintergrundbild und darauf denn der Text (Titel gross und Untertitel etwas kleiner wie man es oft hat). Das CSS habe ich mir auch von einer Seite "geklaut", wo beschrieben wurde, wie man Text in ein Bild bekommt und dann an den Feldern etwas rumgespielt.

Meine Absicht war, dass der Text mit kleiner werdender Breite auch kleiner wird und es nicht zu einem Zeilenumbruch kommt.

Viewport ist angegeben (mir erst jetzt aufgefallen). Und wenn man <br> nicht mehr verwenden soll, was denn da als Ersatz? <p> halte ich persönlich für ungenügend.

[Passwort]

---

    header {
      height: 30vh; 

Warum relativ zur Viewporthöhe? Das heißt, auf Telefonen (im Hochformat) sehr hoch? Und im Querformat womöglich nicht hoch genug, dass der Text reinpasst?

Warum nicht einfach so hoch, wie es der Text erfordert?

Ja... wie geht das am optimalsten? Was ich damit bezweckt habe ist, dass das eingebundene Bild bei 30vh abgeschnitten wird, das Bild ansich geht unten noch weiter.

---

    .Titel {
      position: absolute;
      top: 8vh;
      left: 50%;
      transform: translate(-50%, -50%);

Warum absolute Positionierung? Wegen Zentrierung? Die geht anders; hier wohl einfach mit text-align: center.

Nein, mit text-align: center ist das ganz chaotisch, das habe ich probiert. Das wird da irgendwie so halb und ganz links angezeigt.

[Rolf B]

Hallo Passwort,

"optimal" ist ein Superlativ, das Wort "am optimalsten" gibt es nicht. "Am besten" wäre korrekt.

Warum relativ zur Viewporthöhe? Was ich damit bezweckt habe ist, dass das eingebundene Bild bei 30vh abgeschnitten wird,

Das war nicht gemeint. Die Frage ist: weshalb limitierst Du abhängig von der Viewporthöhe? Normalerweise würde man das abhängig vom Inhalt des Headers machen.

Ich guck mir jetzt deinen Arbeitsstand mal live an.

Rolf

[Rolf B]

Hallo Passwort,

erste Ergebnisse:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

width=device-width reicht. Der Rest ist eh Default. Man findet oft noch initial-scale=1.0 - aber das ist eigentlich auch Default.

    header {
      background-image: url('/toesstal/public/img/game-340574_1280.jpg');
      height: 20vh; 
      background-repeat: no-repeat; 
      background-size: cover;
    }
    .Titel {
      position: absolute;
      top: 8vh;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: "Lucida Handwriting", "Brush Script MT", Cursive;
      font-size: 6em;
      font-style: oblique;
      font-weight: bold;
      color: white;
    } 
    .Untertitel {
      position: absolute;
      top: 15vh;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: "Lucida Handwriting", "Brush Script MT", Cursive;
      font-size: 2em;
      font-style: oblique;
      font-weight: bold;
      color: white;
    }

Warum versuchst Du, mit Gewalt herbeizuführen, was der Browser ganz von alleine kann?

Der left:50% bewirkt, dass die Divs umbrechen, wenn sie über den rechten Rand des Fensters hinausragen würden. Der transform ändert das nicht mehr, der findet erst nach der eigentlichen Layout-Phase statt.

Die absolute Positionierung bewirkt, dass text-align im Header nicht funktioniert und dass er sich nicht an seinen Inhalt anpassen kann.

Entferne die absolute Positionierung. Entferne top, left und transform. Entferne im header-Element die Höhenangabe und setze text-align:center. Und schon ist alles schick. EVENTUELL könntest Du dem Header noch eine Mindesthöhe geben. Würde ich aber nicht empfehlen. Eher eine Prise Padding oben und unten. Wenn Du Abstand zwischen Titel und Untertitel haben willst, gib - beispielsweise - dem Untertitel die margin-top Eigenschaft. Wenn Du h1 für die Überschrift und p für die Zusatzüberschrift verwendest, musst Du die Margins vermutlich ohnehin anpassen.

Was man noch ergänzen könnte, ist eine Anpassung der Font-Size basierend auf der Viewport-Breite. Sowas geht, font-size:2vw wird verstanden. Welchen Faktor man verwendet, da muss man sich herantasten, und man muss auch mit clamp() (Was ist das?) dafür sorgen, dass die Schrift nicht zu klein und zu groß wird. D.h. wenn der Viewport SEHR klein ist, wirst Du einen Zeilenumbruch beim Untertitel nicht vermeiden können.

Das, was ich im Seiteninspektor zusammengesetzt habe, sieht so aus:

    header {
      background-image: url('/toesstal/public/img/game-340574_1280.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      text-align: center;
      font-family: "Lucida Handwriting", "Brush Script MT", Cursive;
      font-style: oblique;
      font-weight: bold;
      color: white;
    }
    .Titel {
      font-size: clamp(2em,9vw,6em);
    } 
    .Untertitel {
      font-size: clamp(1.3em,3vw,2em);
    }

Font und Farbe kannst Du im header festlegen. Titel und Untertitel erben das. Nur die Fontsize muss getrennt festgelegt werden.

Welche Grenzen Du für clamp() möchtest, ist Dir überlassen. Mach's aber nicht zu klein!

Beim Hintergrund könntest Du noch überlegen, ob Du mit background-position den Bildausschnitt anders auswählst. Man sieht jetzt den oberen, unscharfen Teil. Mit background-position: center würdest Du die Bildmitte verwenden.

Wie Du den Menübutton mit Bootstrap richtig steuerst, weiß ich nicht. So, wie es jetzt ist, gefällt es mir im Breitenbereich 768px-990px jedenfalls nicht. Da steht der Menübutton einsam am linken Rand und darunter ist leerer Raum.

Das Ganze klingt jedenfalls nach einer Superveranstaltung. Ist mir zu weit weg, sonst käme ich hin 😀

Rolf

[Passwort]

Warum versuchst Du, mit Gewalt herbeizuführen, was der Browser ganz von alleine kann?

Ich kenne mich mit CSS kaum aus. Bin da eher ein "Vorlage nehmen und an den Werten schrauben" Typ.

Entferne die absolute Positionierung. Entferne top, left und transform. Entferne im header-Element die Höhenangabe und setze text-align:center. Und schon ist alles schick. EVENTUELL könntest Du dem Header noch eine Mindesthöhe geben. Würde ich aber nicht empfehlen. Eher eine Prise Padding oben und unten. Wenn Du Abstand zwischen Titel und Untertitel haben willst, gib - beispielsweise - dem Untertitel die margin-top Eigenschaft. Wenn Du h1 für die Überschrift und p für die Zusatzüberschrift verwendest, musst Du die Margins vermutlich ohnehin anpassen.

Nein, ich wollte alles formatierungsgedöns im .Titel bzw. .Untertitel machen.

Das, was ich im Seiteninspektor zusammengesetzt habe, sieht so aus:

    header {
      background-image: url('/toesstal/public/img/game-340574_1280.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      text-align: center;
      font-family: "Lucida Handwriting", "Brush Script MT", Cursive;
      font-style: oblique;
      font-weight: bold;
      color: white;
    }
    .Titel {
      font-size: clamp(2em,9vw,6em);
    } 
    .Untertitel {
      font-size: clamp(1.3em,3vw,2em);
    }

Font und Farbe kannst Du im header festlegen. Titel und Untertitel erben das. Nur die Fontsize muss getrennt festgelegt werden.

Danke. Das habe ich mal ausprobiert. Die Schrift ist jetzt aber ganz links.

Beim Hintergrund könntest Du noch überlegen, ob Du mit background-position den Bildausschnitt anders auswählst. Man sieht jetzt den oberen, unscharfen Teil. Mit background-position: center würdest Du die Bildmitte verwenden.

Ok versuche ich. Unscharf war aber mehr oder weniger Absicht. Das Hintergrundbild ist aber eh noch nicht final.

Wie Du den Menübutton mit Bootstrap richtig steuerst, weiß ich nicht. So, wie es jetzt ist, gefällt es mir im Breitenbereich 768px-990px jedenfalls nicht. Da steht der Menübutton einsam am linken Rand und darunter ist leerer Raum.

Bootstrap hat der Seitenersteller gemacht, ich weiss da nichts darüber. Habe auch nicht die Zeit, mich da reinzuarbeiten, das ist ziemlich mächtig.

Das Ganze klingt jedenfalls nach einer Superveranstaltung. Ist mir zu weit weg, sonst käme ich hin 😀

Muss ich sie verlängern? 😉 Ein Kollege macht solche Veranstaltungen über eine Woche lang. Aber wollen wirs hoffen, das ist für mich jetzt das erste Mal.

[Gunnar Bittersmann]

@@Passwort

Was ich damit bezweckt habe ist, dass das eingebundene Bild bei 30vh abgeschnitten wird, das Bild ansich geht unten noch weiter.

Da sind wir beim ersten Problem: Das Bild ist mit über 200 kB viel zu groß. Ein Großteil davon wird ja – wie du gerade sagtest – gar nicht angezeigt. Das meiste davon ist als Hintergrundbild auch gar nicht geeignet, weil zu kleinteilig, worauf die Überschrift schlecht zu lesen ist.

Schlecht zu lesen ist sie auch, weil der Farbkontrast zu gering ist; das Bild muss dunkler sein.

Ich habe mal die oberen 320 Pixel ausgeschnitten, Helligkeit und Kontrast vermindert, dafür die Sättigung etwas erhöht. Durch die verminderte Bildgröße und dass der Bildinhalt im verbliebenen Teil unscharf ist (was für ein Hintergrundbild ja gut ist), komme ich locker unter 20 kB.

Ach so, Lesbarkeit und Kontrast: Du musst unbedingt eine Hintergrundfarbe angeben. Das Hintergrundbild kann aus irgendeinem Grund nicht geladen werden, und Weiß auf Weiß liest sich nicht so gut.

Sieht dann so aus: Tösstal spielt.

Zur Schrift: die Lucida Handwriting hab ich nicht installiert, kann ich nichts zu sagen. Bei mir wird die Brush Script MT verwendet, und die sieht auf deiner Seite nicht gut aus, weil die Verbindungen der Buchstaban nicht stimmen. Sollte die Schrift so schlecht gemacht sein? Nein, ist sie nicht.

Die Schrift darf nicht gefettet werden! (Es ist auch generell keine gute Idee, den Browser Schrift fetten zu lassen. Wenn Fettschrift, muss man einen Font dafür haben.)

Genausowenig gut ist, Schrift vom Browser schrägstellen zu lassen. (Wenn Kursivschrift, muss man einen Font dafür haben.) Die Brush Script MT ist bereits von sich aus schräg; noch schräger sieht blöd aus.

Bei der Brush Script MT ist auch der Zeilenabstand zu groß; das ist eins deiner Layoutprobleme. Ich hab den runtergesetzt. Wie das bei Lucida Handwriting aussieht, kann ich nicht sagen. Es keine so gute Idee, zwei ziemlich unterschiedliche Schriften im Fontstack anzugeben.

Apropos Schriftart angeben: Wenn beide Schriftzüge „Tösstal spielt“ und „Das Spiele-Wochenende im Tösstal“ in der selben Schrift gesetzt werden sollen, dann sollte die Angabe nur einmal im CSS auftauchen – für header.

Und einer der beiden muss ein h1-Element sein. Ansonsten hat die Seite keine Überschrift, was nicht nur blöd für Nutzer assistiver Technologien (wie Screenreader) ist, sondern auch für Suchmaschinen. Welchen der beiden Schriftzüge du als Überschrift nimmst, bleibt dir überlassen; es können auch beide sein: Tösstal spielt 2.

Warum absolute Positionierung? Wegen Zentrierung? Die geht anders; hier wohl einfach mit text-align: center.

Nein, mit text-align: center ist das ganz chaotisch, das habe ich probiert.

Ich auch. 😏

Das wird da irgendwie so halb und ganz links angezeigt.

Dann war dir da was im Wege, vermutlich dein Positionierungs-Gedöns.

header hat keine feste Höhe, sondern passt sich seinem Inhalt an. Dafür kriegt etwas padding, bei den Elementen der Schriftzüge kommt der margin weg, Schriftgrößen gesetzt – fertig.

Ah, Schriftgrößen: die große Schrift passt sich der Viewportbreite an – mit clamp(). (Du kannst die Zeile ja mal auskommentieren, um den Unterschied zu sehen.)

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

Bei mir sind die Lucida und die Brush Script vorhanden, und mein Eindruck war, dass der Browser die nicht kursiviert. Das tut er nur, wenn er auf Cursive zurückfällt.

Womit ich nicht sagen will, dass ich browserseitiges Schrägstellen gut finde. Kursiv ≠ „Schräg“, im Allgemeinen.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Bei mir sind die Lucida und die Brush Script vorhanden, und mein Eindruck war, dass der Browser die nicht kursiviert. Das tut er nur, wenn er auf Cursive zurückfällt.

Mein Eindruck ist ein anderer. Auf macOS ist da ein deutlicher Unterschied zwischen normal und italic/oblique.

(Codepen: Brush Script MT normal/italic/oblique)

Womit ich nicht sagen will, dass ich browserseitiges Schrägstellen gut finde. Kursiv ≠ „Schräg“, im Allgemeinen.

Zur Erklärung der Begriffe „kursiv“, „Kursive“ und „kursiviert“.

Kwakoni Yiquan

[Passwort]

Da sind wir beim ersten Problem: Das Bild ist mit über 200 kB viel zu groß. Ein Großteil davon wird ja – wie du gerade sagtest – gar nicht angezeigt. Das meiste davon ist als Hintergrundbild auch gar nicht geeignet, weil zu kleinteilig, worauf die Überschrift schlecht zu lesen ist.

Das Thema Hintergrundbild wäre der nächste Schritt. Wenn dann mal die Textpositionierung klappt, ist das Bild (hoffentlich) schnell ausgetauscht oder bearbeitet.

Ach so, Lesbarkeit und Kontrast: Du musst unbedingt eine Hintergrundfarbe angeben. Das Hintergrundbild kann aus irgendeinem Grund nicht geladen werden, und Weiß auf Weiß liest sich nicht so gut.

Ok, danke für den Hinweis

Zur Schrift: die Lucida Handwriting hab ich nicht installiert, kann ich nichts zu sagen. Bei mir wird die Brush Script MT verwendet, und die sieht auf deiner Seite nicht gut aus, weil die Verbindungen der Buchstaban nicht stimmen. Sollte die Schrift so schlecht gemacht sein? Nein, ist sie nicht.

Ich wollte eigentlich eine Standard-Schriftart verwenden, die ungefähr wie handschriftlich aussieht, da ich nicht auf Google Fonts ausweichen wollte. Gibts da etwas besseres?

Und einer der beiden muss ein h1-Element sein. Ansonsten hat die Seite keine Überschrift, was nicht nur blöd für Nutzer assistiver Technologien (wie Screenreader) ist, sondern auch für Suchmaschinen. Welchen der beiden Schriftzüge du als Überschrift nimmst, bleibt dir überlassen; es können auch beide sein: Tösstal spielt 2.

Ah, ok. Danke. Wusste ich nicht. Ist es aber ausgeschlossen, dass das H1-Element, was per CSS angepasst wird, mit einem anderen h1 irgendwo oder im bootstrap korreliert?

[Gunnar Bittersmann]

@@Passwort

Ich wollte eigentlich eine Standard-Schriftart verwenden, die ungefähr wie handschriftlich aussieht, da ich nicht auf Google Fonts ausweichen wollte. Gibts da etwas besseres?

SCNR. Ich finde Lobster gar nicht mal so schlecht. Dass Problem ist, dass diese Schrift kostenlos ist. Und dass sie deshalb an jeder Ecke zu finden ist. Eine Quasi-Standard-Schrift, sozusagen.

Wenn du was Individuelles haben willst und nicht bei verschiedenen Nutzern verschiedene Schrifarten (Lucida Handwriting bei den einen, Brush Script MT bei anderen), kommst du an einem Webfont nicht vorbei. Du kannst dich u.a. auch bei Google Fonts umsehen, aber bitte unbedingt selbst hosten!

---

Ist es aber ausgeschlossen, dass das H1-Element, was per CSS angepasst wird, mit einem anderen h1 irgendwo oder im bootstrap korreliert?

Du kannst die h1 im header per Nachfahrenkombinator header h1 { … } stylen, wie ich es per Nesting auch getan habe.

Es sollte aber gar nicht zu Kollisionen mit anderen h1-Elementen auf der Seite kommen, da es nur ein h1-Element pro Seite geben sollte.

Ich bin geneigt, „geben darf“ zu schreiben, habe aber auf die Schnelle keine Stelle in den Web Content Accessibility Guidelines (WCAG) gefunden, die das explizit so vorschreibt.

Kwakoni Yiquan

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Es sollte aber gar nicht zu Kollisionen mit anderen h1-Elementen auf der Seite kommen, da es nur ein h1-Element pro Seite geben sollte.

Ich bin geneigt, „geben darf“ zu schreiben, habe aber auf die Schnelle keine Stelle in den Web Content Accessibility Guidelines (WCAG) gefunden, die das explizit so vorschreibt.

Mal fix eine Testseite erstellt: Weder axe noch WAVE melden da Fehler. Hm.

Das „Sollte“ gilt aber trotzdem.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

es kommt halt auf die Art von Dokument an. Wenn Du eine Website erstellt, wo jeder inhaltliche Abschnitt eine eigene Webseite bildet, ist es sinnvoll, jedem dieser Abschnitte auch genau eine h1 Überschrift zu geben.

Wenn Du ein längeres HTML Dokument erstellst, ist es sinnvoll, dessen Hauptabschnitte mit h1 zu gliedern. Dafür sind die Dinger doch eigentlich da.

Was mir Kopfschmerzen macht, sind Seiten, die gemäß W3C oder WCAG Empfehlung mit einer h2-Überschrift beginnen, um ihre Navigation einzuleiten, und danach erst eine h1 als Überschrift für den Inhalt haben. Das widerspricht doch der Idee einer sauberen Schachtelung.

Wie man das richtigerweise in diesen informationsbefreiten Bilderwüsten macht, die viele Hersteller heute als Webseiten verkaufen und auf denen alles, was früher eine Einzelseite war, untereinander klebt. Hab mir gerade mal die Herstellerseite meines Mobilchens angeschaut, die haben eine kleine h1 und viele h2, die h2 aber unterschiedlich gestyled, so dass sie wie Überschriften unterschiedlicher Stufen aussehen.

W3 G141 verlinkt auf eine Seite von der Penn State Uni, und da steht "many experts recommend"… - und das ist es dann: "Verwende genau eine h1" ist eine Empfehlung, eine best practice. Und wie für jede best practice gilt die Lorca-Doktrin: Context is King.^[1][2]

Rolf

---

1. Auch wenn er es als "Context is for Kings" formulierte. ↩︎

2. Der Spruch wird Gates (William H., nicht McFadden) in den Mund gelegt, aber der sagte wohl "Content is King" ↩︎

[Gunnar Bittersmann]

@@Rolf B

Wenn Du ein längeres HTML Dokument erstellst, ist es

… fraglich, ob du das Medium Web verstanden hast. 😜

sinnvoll, dessen Hauptabschnitte mit h1 zu gliedern.

Wenn Du ein längeres HTML-Dokument^[1] erstellst, dann doch zu einem übergeordnetem Thema – das wäre die h1. Die Überschriften der Abschnitte sind dann h2.

Was mir Kopfschmerzen macht, sind Seiten, die gemäß W3C oder WCAG Empfehlung mit einer h2-Überschrift beginnen, um ihre Navigation einzuleiten, und danach erst eine h1 als Überschrift für den Inhalt haben. Das widerspricht doch der Idee einer sauberen Schachtelung.

Da geht’s um die Idee einer sauberen document outline: die Überschrift der Navigation steht (hierarchisch) unter der Seitenüberschrift.

Kwakoni Yiquan

---

1. Bindestrich is king. (Whamalamabamalama) ↩︎

[Rolf B]

Hallo Gunnar Bittersmann,

fraglich, ob du das Medium Web verstanden hast. 😜

Fraglich ist, ob Du das Medium Rolf verstanden hast 😉 🔮

Das Web ist nicht der einzige Anlass, HTML Dokumente zu erstellen. Das Web ist eine Anwendung von HTML. Aber nicht die einzige, und nicht die erste. Auf einer Webseite ist ein einziges h1 durchaus good practice.

h2,h3,h3,h1,h2, …

Da geht’s um die Idee einer sauberen document outline:

Ja, mir doch auch. Wie kann es eine saubere Outline geben, wenn sie mit Level 2 beginnt? Die h2/h3 der Navi sind dann doch ohne h1 und hängen in der Luft.

Wenn man es wie der Vector-Skin im Wiki macht und die Navi unter den Inhalt setzt, mit einem Skip-Link zur Navigation, dann ergibt das Ganze wieder Sinn. Aber nicht, wenn die Na'vi im DOM vor dem Inhalt stehen.

Rolf

[Gunnar Bittersmann]

@@Gunnar Bittersmann

SCNR. Ich finde Lobster gar nicht mal so schlecht. Dass Problem ist, dass diese Schrift kostenlos ist. Und dass sie deshalb an jeder Ecke zu finden ist.

Symbolbild:

(Tweet)

Kwakoni Yiquan

[Passwort]

@@Passwort

Es sollte aber gar nicht zu Kollisionen mit anderen h1-Elementen auf der Seite kommen, da es nur ein h1-Element pro Seite geben sollte.

Wenn ich den Titeltext als h1 deklariere, hat es dann aber 2 mal h1 auf der Seite. Der Seitentitel auf jeder Seite ist auch h1.

[Gunnar Bittersmann]

@@Passwort

Es sollte aber gar nicht zu Kollisionen mit anderen h1-Elementen auf der Seite kommen, da es nur ein h1-Element pro Seite geben sollte.

Wenn ich den Titeltext als h1 deklariere, hat es dann aber 2 mal h1 auf der Seite. Der Seitentitel auf jeder Seite ist auch h1.

Das ist auch richtig so. h1 sollte der Titel der jeweiligen Seite sein; nicht der Titel der Website.

Dann liegst du mit div für „Tösstal spielt“ und „Das Spiele-Wochenende im Tösstal“ nicht verkehrt. (Ich würde allerdings p dafür nehmen.)

Ich hatte vorher nur deine Startseite auf dem Schirm. Auch dort ist „Tösstal spielt 2024“ als h1 nicht verkehrt.

„Termin: 28.06.2024 bis 30.06.2024“ allerdings ist keine Überschrift, sondern auch p; auch wenn das genauso groß dargstellt wird wie h1.

Kwakoni Yiquan