Heute möchte ich euch zeigen wie ihr ein sogenannten Fixed Footer oder Fixed Header in eure Webseite einbauen könnt. Ihr habt das sicher schon öfter gesehen, denn es ist ein Designelement das wirklich sehr gerne verwendet wird. Wenn man nämlich viel Inhalt auf die gleiche Seite packt, dann muss man sehr schnell sehr weit scrollen. Das Scrollen stört vielleicht nicht wenn man am Computer sitzt und eine Maus hat, aber an einem Smartphone bricht man sich damit fast immer den Daumen 🙂 Das ist ja natürlich sehr unschön.
Und aus diesem Grund zeigt man Menu oder Footerinhalte halt gerne als Fixed Element an – oder man macht ein Pfeil nach Oben als Fixed Element.
Hier im heutigen Beitrag zeige ich euch alles was ihr braucht, damit ihr ein eigenen Fixed Footer oder Fixed Header erstellen könnt.
Video
HTML
1 2 3 4 5 6 7 8 9 10 11 | <div class="header">
ich bin das menu
</div>
<div class="container">
<h1>Fixed Footer</h1>
<h2>Hello</h2>
<p>Lorem, ipsum dolor sit</p>
</div>
<div class="footer">
created with love by Eric Mächler
</div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #bde0fe;
text-align: center;
height: 50px;
padding-top: 20px;
}
.header {
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: #bde0fe;
text-align: center;
height: 50px;
padding-top: 20px;
} |
Hallo Eric-Oliver Mächler, fantastisch gut erklärt dein video header und footer und masonryholder.
Ich malen mit Acrylfarbe hobby mäßig und habe auch eine website hobby mäßig ich hatte sie vorher in PHP,CSS,JQuery und vieles mehr. Aber nun habe ich nur HTML und CSS und schaue mir in YouTube die videos an, viel weniger code und einfacher.
Eine Frage für dich kannst du vielleicht ein video machen wo du erklärst das man in Bilder nicht zoomen kann bzw. dass die mouse inaktiv ist über Bilder?
Vielen Herzlichen Dank
Andries Van de Bergh