Erzeugen Sie eine fixierte Fußzeile (Footer) am unteren Ende der Webseite. Dieser Beitrag zeigt Ihnen wie einfach das mit CSS Mitteln ist.
Aus heutiger Sichtweise ist es nicht mehr üblich eine Fußzeile (Footer) im unteren Bildschirmbereich dauerhaft einzublenden. Eine dauerhafte Fußzeile kostet auf Smartphones beispielsweise kostbaren Platz auf dem ohnehin schon kleinen Display, dennoch ist sie auf Desktopseiten durchaus sinnvoll und kann mit einfachen CSS-Mitteln umgesetzt werden.
020 </head>
021 <body>
022
023 <a name="top"></a>
...
...
...
077 <div style="position: fixed; left: 0px; bottom: 0px; width: 100%; padding: 15px;">
078 <a href="#top">go top</a>
079 </div>
080
081 </body>
082 </html>
Das Codebeispiel oben zeigt das Fußende einer HTML-Seite in der ein DIV-Kontainer eingebunden ist, welcher eine Fußzeile unten fixiert. Darin enthalten beispielsweise ein Link, der den Leser an den Anfang der Webseite (nach oben) zurück bringt. Da der Footer transparent ist, stört dies auch nicht sonderlich auf Smartphones, da der Footer den unteren Text des Contents nicht überdeckt - sie ist durchsichtig. Dafür ist natürlich auch bedingung, das Sie im oberen Teil auch einen Anker mit dem Namen top angelegt haben.
Im übrigen funktioniert die CSS-Variante ganz ohne den Einsatz von JavaScripten und sollte daher bevorzugt werden, da es Ressourcen spart.
19.01.2021 •
CSS •
CSS Footer Fußzeile Navigation
Oliver Lohse - Ich bin diplomierter Wirtschafts-Informatiker und Organisations-Programmierer in verschiedenen Sprachen bzw. Markup-Dialekten, z.B.: Java, JEE, COBOL, PHP, Python, MySQL, HTML, CSS, ANSI C, Lisp, Rexx, JavaScript, Scheme, ActionScript 2.0, Maschinensprache, Assembler und JCL. Seit mehr als 22 Jahren arbeite ich in einem grossen Softwareunternehmen in Niedersachsen. Sie sehen auf dieser Seite mein eigens für Bludit CMS entwickeltes Theme "Reaktor-Block IV".
Kontakt: Κontakt@Οliver-Lohse.de
Passen Sie das beliebte Flatfile CMS Bludit an Ihren eigenen Designstyle mit Hilfe eines eigenen CSS-Style an.
Das CMS Automad formatiert den PRE-Tag in dieser Version falsch. Korrigieren Sie dies mit wenigen CSS-Statements.
Dieser Beitrag zeigt Ihnen, wie Sie mit wenigen Handgriffen einen Seitenpaginator (Blätterfunktion) implementieren.
Möchten Sie einen Zurück-Button in jedem Beitragsverzeichnis im PICO CMS implementieren, dann lesen Sie diesen Beitrag.
Korrigieren Sie den defekten CSS Style im populären CMS Automad mit wenigen Codezeilen.
if-Kontrollstrukturen im Twig-Template helfen Ihnen bestimmte Seiten auszuschließen.
Mit dem Custom-CSS können Sie das beliebte Flatfile CMS Typesetter an Ihren eigenen Geschmack anpassen.
