HTML: Wie kann ich einen oben fixierten Header erstellen?
Ich muss aktuell eine Webseite mit HTML programmieren.
Ich wollte jetzt das Logo und die Navigation immer oben haben. Das heißt, wenn man runterscrollt, dass es dann quasi fix oben immer angezeigt wird.
Kann mir jemand helfen und das erklären?
Muss es HTML sein oder geht auch CSS?
es muss html sein
3 Antworten
Alleine mit HTML wirst du es nicht umsetzen können, da mit CSS sowohl das Aussehen von Elementen als auch dessen Position und Verhalten festgelegt wird. Um einen „Sticky-Header” zu erstellen, den gleichnamigen Positionswert verwendest.
HTML:
<header class="page-header">
<!-- header content... -->
</header>
CSS:
.page-header {
width: 100%;
height: 72px;
position: sticky;
top: 0;
}
Der <header> bleibt nun am oberen Viewport-Rand kleben und auch das Angeben von padding und margin insofern wegfällt, da der nachfolgende Inhalt erst unter dem <header> beginnt. Letzteres wäre z.B. nötig, wenn du statt sticky mit fixed arbeitest.
Wurde hier schon mal gefragt:
https://www.gutefrage.net/frage/element-immer-im-bildschirm-haben-mit-css
Der häufigste Anwendungsfall ist eine Navigationsleiste - dazu gibt Google jede Menge Treffer aus.
Bei manchen der Lösungen wird auch darauf hingewiesen, dass man dann dem <body> einen oberen margin geben sollte, der so hoch ist wie das fixierte Element.
Besser, aber weniger elegant, wäre direkt danach ein weiteres gleichartiges Element, das denselben Inhalt hat, aber visibility: hidden;. Außerdem sollte das fixierte Element opacity: 1; und background-color: white; haben, damit der gescrollte Inhalt nicht durchscheint.
Weitere Treffer der Suche verweisen auf weitere Methoden, das Gewünschte zu erreichen.
Danke für die Antwort, ich werd gleich schauen wie ich das mache:)
dafür nutzt man css. html ist nur eine layoutsprache. empfehle dir erstmal nen Grundkurs zum Thema Html und Css. lernst du relativ schnell.