Unverständliche Höhe

[Matthias Apsel]

Hallo einsiedler,

neeeee.... dann macht er den gleichen MIST!!!!!!!

Ich will dir ja nicht zu nahe treten, aber du solltest dich wirklich mit den Grundlagen beschäftigen. Insbesondere solltest du nicht immer und überall display: flex verwenden, wenn auch bewährte Technologien zielführend sind.

* {
    color: #000000;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

color: #000 ist default, kann weg. Es ist selten eine gute Idee, komplett alle Abstände auf Null zu setzen.

html {
    background: rgba(0, 0, 0, 0) url("../mediaordner/hintergrundbilder/chalkboard.jpg") no-repeat fixed center center / cover ;
    color: #000000;
    display: flex;
    flex-flow: row wrap;
    font-family: "Cabin Sketch",sans-serif;
    font-size: 101%;
    hyphens: auto;
    justify-content: center;
    width: 100%;
    z-index: 0;
}

• warum hier noch mal color: #000;
• wozu display: flex;? Um den body zu zentrieren? html hat nur ein einziges (normalerweise sichtbares) Kindelement, deshalb ist die Angabe von flex-flow sinnfrei.
• Was soll font-size: 101%?
• Wozu die Angabe von z-index?

body {
    background-color: rgba(255, 255, 255, 0.17);
    display: flex;
    flex-flow: column wrap;
    padding-bottom: 1.8em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    width: 83vw;
    z-index: 1;
}

Auch hier ist display: flex nicht notwendig. Du möchtest header und main einfach untereinander, was sie ohne weiters Zutun von selbst machen. Wozu die Angabe von z-index? Damit das body-Element näher am Auge als das HTML-Element liegt? Das macht es von selbst.

Bis demnächst
Matthias