CSS Hilfe benötigt

[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