CSS Hilfe benötigt
bearbeitet von Gunnar Bittersmann@@Passwort
> ```html,bad
> <header class="d-block">
> <div class="Titel">
> Tösstal spielt
> </div> <br>
> <div class="Untertitel">
> Das Spiele-Wochenende im Tö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:
```html
<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**{:@en} als Überschrift erscheint und was von Screenreadern als Überschrift angesagt wird):
```html
<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):
```html
<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>`{:.language-html.bad}-Element.
Was `p` und was `h1` ist, hat nichts mit den Schriftgrößen zu tun. Diese werden per CSS angegeben.
---
> ```css
> header {
> height: 30vh;
> ```
Warum in relativ zur Viewporthöhe? Das heißt, auf Telefonen (im Hochformat) sehr hoch?
> ```css,bad
> .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
{:@art-x-kwejian}
--
*Ad astra per aspera*{:@la}