Kann mir Seitenaufbau nicht erklären/verhält sich seltsam

Dedpunkrz · 19.03.2021

Hallo,
Ich bin relativ neu auf dem Gebiet und wollte mich einfach mal versuchen. Ich habe erstmal versucht die generelle Struktur einer Website zu rekonstruieren. Dabei bin ich auf ein paar seltsame Proble gestoßen. Zum Beispiel habe ich ein Element die Position: sticky gegeben, damit es am oberen Rand bleibt, allerdings hat es nicht funktioniert. Das verrückte daran ist, dass stattdessen ein völlig andres Element sticky geworden ist. Ich hab alles überprüft und eigentlich hat das eine Element nichts mit dem anderen zu tun. Desweiteren nimmt die Website nicht 100% des Bildes ein obwohl ich es so eingestellt habe. Bei andren Websites habe ich es genau auf die gleiche Weise gemacht und es funktioniert. Hier ist wie ichs gemacht habe: + ein bisschen extra

<style>
body {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
}
</style>

Ich habe das den Code als .txt angehängt (nicht viel), da ich keine Ahnung habe wo das Problem liegt. Es ist auch ein bisschen Beispielinhalt dabei.
Ich würde mich über Jede Hilfe freuen.

Dedpunkrz · 19.03.2021

Habe gemerkt dass der text sich doch nicht sticky verhält. warum die tabelle das aber auch nicht macht hab ich noch nicht herausgefunden

basti1012 · 20.03.2021

Was soll das immer mit dem Tabellenlayout?
Das ist total veraltet und wird heute gar nicht mehr benutzt.
Schau dir mal die HTML 5 Elemente an und versuche es dann mal so
* Link entfernt , weil existiert nicht mehr *

Dedpunkrz · 20.03.2021

okay danke. ich habe meine seite nach deinem beispiel angepasst. warum eigentlich eine liste als head und keine tabelle? ich hab noch ein bisschen mehr in CSS gemacht und habe mich gefragt, ob man elementen wie h1 usw. welche eigentlich keine funktion als 'überelement' haben eben diese geben kann?

p {
font-family: Hind;
color: #d8dad5;
font-weight: 300;
margin: 0.5% 0% 0.5% 0%;
}
main p {
font-size: 155%;
}
main h1 p {
font-size: 145%;
}
main h2 p {
font-size: 140%;
margin: 0% 1% 0% 1%;

Ich weiß das könnte man mit Klassen oder <div> etc. lösen aber das jedes mal erneut zu definieren ist ja nich der sinn von CSS.
Ganzer Code: https://trinket.io/html/f720b960a5