CMS - Workbench | DE


Templating and Coding for CMS (WordPress, Bludit, Automad, Typesetter, GetSimple, Pico and more)


Fußzeile unten fixieren

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


Empfehlungen:



Bludit Custom CSS

Passen Sie das beliebte Flatfile CMS Bludit an Ihren eigenen Designstyle mit Hilfe eines eigenen CSS-Style an.

mehr...

Breadcrumb Navigation

mehr...

Footer Devtheme anpassen

mehr...

Formatfehler PRE Tag

Das CMS Automad formatiert den PRE-Tag in dieser Version falsch. Korrigieren Sie dies mit wenigen CSS-Statements.

mehr...

Next Previous Page Walker

mehr...

Pico CMS Seiten Paginator

Dieser Beitrag zeigt Ihnen, wie Sie mit wenigen Handgriffen einen Seitenpaginator (Blätterfunktion) implementieren.

mehr...

Pico Step Back

Möchten Sie einen Zurück-Button in jedem Beitragsverzeichnis im PICO CMS implementieren, dann lesen Sie diesen Beitrag.

mehr...

Schlagworte umbrechen

Korrigieren Sie den defekten CSS Style im populären CMS Automad mit wenigen Codezeilen.

mehr...

Seiten ausschließen

if-Kontrollstrukturen im Twig-Template helfen Ihnen bestimmte Seiten auszuschließen.

mehr...

Typerite Footer

mehr...

Typesetter Custom CSS

Mit dem Custom-CSS können Sie das beliebte Flatfile CMS Typesetter an Ihren eigenen Geschmack anpassen.

mehr...



CMS Workbench

Hilfreiche Tipps, Tricks, Codings und Codeschnipsel, die im Rahmen der Entwicklung, Weiterentwicklung und Templatings zum Thema CMS immer wieder benötigt werden - aus verschiedenen Sprachdialekten wie Java, JavaScript, PHP, Python und anderen.