Büroausstattung

So drücken Sie eine schwebende Fußzeile richtig an den unteren Rand der Seite. Alles, was Sie über das Design von Landingpage-Fußzeilen wissen müssen. Maximal nützliche und wichtige Informationen

Die Fußzeile ist ein wichtiges Strukturelement jeder Website; sie wird oft als „Fußzeile“ bezeichnet. Es befindet sich unten auf der Webseite und ist das Gegenelement zum Header (Site-Header), der sich oben befindet.

Der Keller dient als zusätzlicher Block zur Platzierung von Firmendaten und zur Verlinkung. Eine richtig ausgefüllte Fußzeile wirkt sich positiv auf die Benutzerfreundlichkeit aus und verbessert sie. Manchmal wird es als zusätzliches Tool verwendet – ein Assistent zum Sammeln von Leads.

Was soll in die Fußzeile eingefügt werden?

Normalerweise enthält die Fußzeile Daten, die auf jeder Seite benötigt werden und für den Benutzer immer „zur Hand“ sein sollten. Oftmals werden Informationen aus dem Header im Untergeschoss dupliziert. Abhängig von der Art der Site wird die Liste der Daten für die Fußzeile bestimmt. Es wird abhängig davon gebildet Aussehen Seiten, Inhalte anderer Blöcke usw. Die folgenden Arten von Inhalten werden häufig im Keller platziert:

  • Verknüpfungsblock

Eine solche Verlinkung kann eine Vervielfältigung des Hauptmenüs sein, das wichtige und beliebte Abschnitte enthält. Wenn Abschnitte mehrstufig aufgebaut sind, werden sie in Spalten mit erläuternden Überschriften unterteilt.

Quelle sima-land.ru

Als Verlinkung kann auch eine Tag-Cloud dienen. Dies können beliebte Abschnitte einer Informationsseite, wichtige Nachrichten oder Artikel sein.

Quelle vesti.ru

  • Copyright

Die Fußzeile der Website enthält häufig Informationen zur Urheberschaft, beschreibt die Regeln für die Verwendung und Reproduktion von Materialien sowie Informationen zu den Entwicklern der Ressource.

Quelle vesti-ural.ru

  • Über Partner

Oftmals werden in der Fußzeile Informationen über diejenigen veröffentlicht, die das Projekt unterstützen, mit dem Unternehmen zusammenarbeiten usw. Diese Informationen wirken sich positiv auf die Erhöhung des Vertrauens aus. Darüber hinaus ist dies gute Option für diejenigen, die verpflichtet sind, Affiliate-Links auf allen Internetseiten der Website zu platzieren. Sie enthalten in der Regel auch Links zu ihren eigenen Projekten, mobile Versionen, Subdomains.

Quelle ekb.rbc.ru

  • Kontakte

In der Fußzeile können Sie nur grundlegende Kontaktinformationen angeben: Adresse, Telefon, E-Mail, manchmal sogar nur Telefon. Nähere Informationen finden Sie auf der Kontaktseite.

Quelle uniland.ru

  • Soziale Medien

Quelle e1.ru

  • Lead-Formulare

Für Benutzer ist es praktisch, ein Feedback-Formular in der Fußzeile zu haben, das es ihnen ermöglicht, ihre Kontakte zu hinterlassen, einen Rückruf zu bestellen oder sich anzumelden. Darüber hinaus besteht die Möglichkeit, Daten über interessierte Besucher zu erhalten.

Quelle afisha.yandex.ru

  • Karte

Oftmals wird in der Fußzeile der Site eine interaktive Karte platziert, was die Benutzerfreundlichkeit der Site für Benutzer erhöht. Viele Menschen entscheiden sich für ein Produkt oder eine Dienstleistung in der Nähe ihres Wohnortes und konzentrieren sich dabei auf den genauen Standort des Unternehmens. Darüber hinaus erhöht das Vorhandensein dieser Informationen das Vertrauen in das Unternehmen und zeigt, dass es tatsächlich funktioniert und nicht nur im Internet präsentiert wird.

(Fußzeile ist eine Ableitung von Fuß (Englisch) – Bein) – dies ist der unterste Abschnitt der Website, gegenüber der Kopfzeile – der obere Teil. Natürlich ist der Kopf der Website – die Kopfzeile – das wichtigste Element, aber die Fußzeile ist wie der Boden unter Ihren Füßen: Sie muss langlebig und funktional sein. Obwohl nicht alle Benutzer bis zum Ende durch die Webseiten scrollen, sollten Sie den Melonenbereich der Website nicht ignorieren.

Was wird üblicherweise in der Fußzeile platziert?

Die Standard-Fußzeilenelemente sind:

  1. Schaltflächen für soziale Netzwerke und Gruppen-Widgets für soziale Netzwerke
  2. Links zu den Hauptbereichen der Website
  3. Links zu Ressourcen Dritter
  4. Copyright
  5. Kontaktinformationen
  6. Suchen

Sie sollten nicht alle oben genannten Elemente gleichzeitig verwenden, da der Keller sonst wie eine echte Mülldeponie aller unnötigsten Dinge aussieht. Es ist darauf zu achten, dass die Elemente in der Fußzeile proportional positioniert sind und nicht das Gesamtkonzept und die Farbgebung der Website verletzen.

Eine originelle Fußzeile ist ein Ort, an dem Sie Ihren Besucher überraschen können

Der Footer ist genau der Ort, an dem Sie sehr interessante Designideen umsetzen können, auch wenn es sich um eine seriöse Website handelt offizielles Unternehmen. Hier ein paar interessante Beispiele:



Das Wichtigste ist, dass nicht alle Kunden solche Originalität mögen und dass in allem ein gewisses Maß an Vernunft stecken sollte. Wenn Sie sich dennoch für ein originelles Design der Fußzeile entscheiden, zum Beispiel für eine handgezeichnete, dann sollte diese sich dennoch nicht vom Gesamtkonzept der Seite abheben. Wenn alle Elemente im gleichen Stil gestaltet sind, wirkt die Site ganzheitlich und vernetzt und der Übergang von einem Element zum anderen erfolgt intuitiv und unmerklich.

Marktforschungen haben gezeigt, dass Websites und Portale, bei denen Fußzeilenelemente logisch angeordnet, im gleichen Stil gestaltet und nicht im Raum verstreut sind, viel schneller im Gedächtnis bleiben und keine Arbeitsschwierigkeiten verursachen.

Für die Fußzeile kann eine relativ große Höhe vorgesehen werden, sie sollte jedoch nicht mehr als die Hälfte des Arbeitsbildschirms des Benutzers überschreiten, damit er trotzdem nicht vergisst, warum er auf Ihre Website gelangt ist.

Zusätzliches Menü in der Fußzeile

Eine gängige Praxis besteht darin, das Site-Menü in der Fußzeile zu duplizieren oder ein leicht modifiziertes Menü zu platzieren. Allerdings wird es häufig in erweiterter Form veröffentlicht, wenn das Menü eine mehrstufige Struktur aufweist. Dies ist als alternative Navigation sehr nützlich: Unten ist das Hauptmenü meist nicht sichtbar, aber der Benutzer muss sich nicht weiter anstrengen und kann sofort zu dem Bereich gelangen, den er benötigt. Dies kann mithilfe der Karte der Benutzerklicks auf Schaltflächen auf der Website von Yandex Metrics oder Google Analytics leicht verfolgt werden.

Es könnte zum Beispiel so aussehen:


Dies sind möglicherweise alle Hauptelemente, die in der Fußzeile der Website enthalten sein können und für Besucher nützlich sein können. Das Wichtigste aus diesem Artikel: Vernachlässigen Sie diesen Bereich der Website nicht, er trägt dazu bei, die Loyalität der Besucher aufrechtzuerhalten und die auf der Website verbrachte Zeit zu verlängern.

Alle WordPress-Vorlagen bestehen aus mehreren Dateien, die für die Verarbeitung und Anzeige des einen oder anderen Teils des Blogs verantwortlich sind – Kopfzeile, Hauptinhalt, Seitenleiste und Fußzeile. Heute werden wir über Letzteres sprechen. Der Footer (Fußzeile der Website) ist der untere Teil mit dem gesamten Inhalt. Am häufigsten wird es von einem Webmaster verwendet, um Informationen wie Erstellungsdatum, Urheberrechtsschutz, Titel usw. bereitzustellen. Dies ist jedoch nicht in allen WordPress-Themes einfach umzusetzen; einige verfügen einfach nicht über einfache Optionen zum Hinzufügen von Informationen zur Fußzeile.

Was soll in der Fußzeile der Website platziert werden?

Lassen Sie uns zunächst entscheiden, welche Art von Standort und was im Keller platziert werden kann, um die Verhaltensfaktoren zu verbessern.

Kontaktinformationen Am besten geeignet für Webshops. Durch die Platzierung der Adresse einer Reisekarte, der Telefonnummer, der E-Mail-Adresse eines Geschäfts oder einer Organisation usw. im Keller kann eine Person schneller eine Bestellung aufgeben oder einen Kauf tätigen.

Navigation oder das Wiederholen des Navigationsblocks ist für jede Art von Website geeignet. Dies ist bei langen Seiten sehr wichtig. In diesem Fall muss der Benutzer nicht nach oben zurückkehren, um zum gewünschten Abschnitt zu gelangen. Wenn Sie jedoch keinen Navigationsblock in der Fußzeile platzieren möchten, können Sie mit dem Aufwärtspfeil schnell wieder nach oben gelangen.

Soziale Lesezeichen, Wenn der Inhalt Ihrer Website Massendiskussionen beinhaltet oder Sie Rezensionen zu Ereignissen im Zusammenhang mit der Entwicklung des Themas veröffentlichen, können Sie in der Fußzeile Links zu diesen platzieren soziale Medien in dem Sie die Ressource bewerben. Die Tag-Cloud sowie der zusätzliche Navigationsblock sind für alle Arten von Websites geeignet. Das Platzieren einer 3D-Tag-Cloud in der Fußzeile ist nicht nur praktisch für Benutzer, sondern auch aus gestalterischer Sicht schön.

Es ist zu beachten, dass die Wahrscheinlichkeit, auf Fußzeilen-Links zu klicken, wenn diese nicht schön und informativ sind, aufgrund der Unauffälligkeit einer solchen Fußzeile gegen Null geht.

Beispiele für schön gestaltete Website-Fußzeilen

Um eine schöne und informative Fußzeile zu erstellen, machen wir Sie auf die bekanntesten Werke von Webdesign-Studios aufmerksam:

1. Designlösung des französischen Webstudios KDIGIT:

2. Footer-Design vom Webdesign-Studio SNOWDEN Industries:

3. Designlösung für die Fußzeile des schwedischen Unternehmens Uforia CMS:

4. Elegantes Fußzeilendesign von Tapbots:

5. Fußzeile des Webdesign-Studios Fertige Designs:

6. Mechanisches Fußzeilendesign:

7. Schönes Fußzeilendesign:

Wie Sie hoffentlich bereits verstanden haben, werden alle diese Fußzeilen auf der Grundlage wunderschöner Hintergrundbilder und darauf platzierter Informationsblöcke umgesetzt. Wenn Sie keine besonderen Schwierigkeiten haben sollten, ein Hintergrundbild zu erstellen, gibt es dafür glücklicherweise verschiedene Bildbearbeitungsprogramme wie Photoshop, dann ist dies mit einer schnellen und bequemen Platzierung der Informationen in Blöcken möglich.

Informationsblöcke zur Fußzeile hinzufügen

Am meisten auf einfache Weise Durch das Hinzufügen von Informationsblöcken zur Fußzeile wird ein Block mit Fußzeilen-Widgets zum WordPress-Administrationsbereich hinzugefügt. Um einen solchen Widget-Block zu erstellen, müssen Sie das Admin-Menü -> Editor öffnen und in der rechten Spalte die Datei „functions.php“ auswählen, in die wir den Code hinzufügen:

if (function_exists("register_sidebar")) register_sidebar(array("name" => "Footer Sidebar", "before_widget" => "", "after_widget" => "", "before_title" => "

", "after_title" => "
",));

if (function_exists("register_sidebar" ) )

register_sidebar(array(

"name" => "Fußzeilen-Seitenleiste",

"before_widget" => "" ,

"after_widget" => "" ,

"before_title" => "

" ,

"after_title" => "

" , ) ) ;

Dies ist der Code zum Registrieren eines neuen Widget-Blocks im Admin-Panel, wobei „Name“ der Name des Widgets, „before_widget“ der angezeigte HTML-Code vor dem Widget und „after_widget“ der angezeigte HTML-Code nach dem Widget ist Widget sowie den Code vor und nach der Titelüberschrift. Es wird normalerweise ganz am Anfang der Datei „functions.php“ hinzugefügt.

Speichern Sie den Inhalt von „functions.php“ und gehen Sie zum Abschnitt „Widgets“. Wenn alles fehlerfrei durchgeführt wurde, finden Sie dort einen neuen Block:

Wir haben also die Anzeige eines neuen Widget-Blocks im Admin-Menü vorgenommen, jetzt müssen wir die Widgets dieses Blocks auf der Site anzeigen. Öffnen Sie dazu das Admin-Menü -> Editor und wählen Sie rechts die Datei footer.php aus. Solche Widget-Blöcke können übrigens nicht nur im Footer, sondern auch an jeder anderen Stelle der Seite angezeigt werden.

Fügen Sie in der Datei „footer.php“ den folgenden Code hinzu.

Wir beginnen mit der fünften Lektion zum Bearbeiten von Vorlagen im CMS Joomla 3. Dieses Mal werden wir über die Fußzeile der Website sprechen. Schauen wir uns mögliche Designoptionen für Fußzeilen und einige Ansätze zu deren Erstellung an.

Was ist eine Fußzeile?

Die Fußzeile oder Fußzeile einer Site ist der unterste Teil davon, der normalerweise Informationen über die Site, das Urheberrecht usw. enthält. Standardversion in Vorlage Protostern, die Fußzeile enthält keine aussagekräftigen Informationen:

Der Standardinhalt der Fußzeile ist das aktuelle Jahr, der Name der Website und der Link „Zurück nach oben“, der zum Seitenanfang führt. Ehrlich gesagt ist diese Version des Footers für Besucher unserer Seite völlig nutzlos, außerdem ist der „Zurück zum Anfang“-Link in unserem Fall absolut unnötig, wir haben für diese Zwecke bereits einen schönen Button erstellt.

Daher empfehle ich zunächst, den Standard-Fußzeileninhalt zu entfernen. Öffnen Sie die Datei index.php Standard-Protostar-Vorlage und suchen Sie nach dem Code, der für die Anzeige der Fußzeile verantwortlich ist. Der Code zwischen den Zeilen 205 und 219 ist für die Anzeige der Fußzeile verantwortlich, die wie folgt aussieht (abhängig von der Joomla-Version und den an der Indexdatei vorgenommenen Änderungen können die Codezeilen unterschiedlich sein):

">

Entfernen wir nun den zusätzlichen Code aus den Zeilen 210 bis 217. Der Code für die Fußzeile sieht dann so aus:

">

Im Wesentlichen haben wir alles entfernt, was möglich war, und dafür ist nur die Möglichkeit übrig, Module in der Fußzeile anzuzeigen:

Wir speichern die Indexdatei, gehen zur Site und aktualisieren die Seite. Der Inhalt der Fußzeile ist verschwunden, was wir wollten. Jetzt können Sie der Fußzeile nach eigenem Ermessen neue Informationen hinzufügen. Bevor Sie diese hinzufügen, sollten Sie jedoch die Frage beantworten: Was kann in der Fußzeile der Website enthalten sein?

Welche Informationen in der Fußzeile der Website angezeigt werden sollen

Damit die Fußzeile effektiv ist, muss sie Informationen enthalten, die für Website-Besucher von Interesse sein könnten. Je nach Schwerpunkt der Website können diese Angaben variieren. Hier ist ein kleines Beispiel für dieselben Informationen, die in der Fußzeile enthalten sein können:

  • Zusätzliches Menü- Dieses Menü kann ein vorhandenes duplizieren oder einzigartig sein. Das Duplizieren des Menüs in der Fußzeile ist nützlich, wenn Ihre Website häufig von mobilen Geräten aus besucht wird. Wenn der Besucher bis zum Ende der Seite scrollt, kann er von der zusätzlichen Website-Navigation profitieren.
  • Kontaktinformationen- Für den Verkauf von Websites oder für Websites, die verschiedene Dienstleistungen anbieten, ist das Vorhandensein von Kontaktinformationen lediglich erforderlich, und die Fußzeile ist der richtige Ort dafür.
  • Schaltflächen für soziale Medien- In der modernen Welt sind soziale Netzwerke für viele Menschen alles, daher werden solche Informationen niemals überflüssig sein.
  • Diverse Links– zum Beispiel Links zu einer Sitemap, Newsfeeds usw.
  • Widgets- Sie können in der Fußzeile Informationen zur Aktivität auf der Website, Verkehrszähler, aktuelle Kommentare usw. anzeigen.
  • Werbung- Es kommt der Zeitpunkt, an dem Sie von der Website nicht nur ihre Präsenz, sondern auch Gewinn erzielen möchten. In diesem Fall ist die Fußzeile möglicherweise kein schlechter Werbeträger.

Versuchen Sie nicht, alles oben Genannte in die Fußzeile Ihrer Website zu stopfen; eine Überfülle an Informationen führt ebenso wie deren Fehlen zu nichts Gutem.

Andererseits spielt es keine Rolle, welche Informationen in der Fußzeile Ihrer Website enthalten sein werden. Hauptsache, sie passen in das Gesamtdesign und sind schön gestaltet.

Erstellen einer Fußzeile für die Site

Lassen Sie uns nun die Theorie verwerfen und direkt mit der Erstellung der Fußzeile fortfahren. Es gibt verschiedene Möglichkeiten, eine Fußzeile zu erstellen:

  • Auto- beinhaltet die Verwendung verschiedener Module zur Anzeige bestimmter Informationen
  • Handbuch- Module werden nicht verwendet, alle Änderungen werden manuell mithilfe von Bearbeitungstools für Vorlagendateien vorgenommen
  • Gemischt- In diesem Fall werden beide oben genannten Optionen zusammen verwendet

Jede der Methoden ist auf ihre Art gut, zum Beispiel wird die Verwendung von Modulen in der Anfangsphase die Aufgabe erheblich vereinfachen, und die Methode, wenn keine Module verwendet werden, beschleunigt das Laden der Seite. In jedem Fall liegt die Wahl bei Ihnen.

Um alle möglichen Optionen abzuwägen, werde ich mich für die dritte Option entscheiden. Auf diese Weise erhalten Sie eine allgemeine Vorstellung davon, was bearbeitet wird und wie.

Als Beispiel habe ich beschlossen, die Fußzeile in drei vertikale Teile zu unterteilen. Links zu bestimmten Seiten der Website werden links angezeigt, in der Mitte befindet sich eine Art Logo und rechts wird kleiner Text angezeigt. Die Module sind für die Anzeige des linken und rechten Teils der Fußzeile verantwortlich und wir schreiben das Logo manuell in die Indexdatei.

Erstellen wir zunächst neue Positionen für Module in der Fußzeile (wie das geht, haben wir in der Lektion zum Einrichten und Bearbeiten von Vorlagen besprochen) im Umfang von zwei Teilen. Da sie sich auf der linken und rechten Seite der Fußzeile befinden, haben sie einen entsprechenden Namen – Fußzeile links Und Fußzeile rechts. Wir deklarieren sie in der Datei templateDetails.xml.

Jetzt nehmen wir Änderungen an der Vorlagenindexdatei vor. Mein Code sieht folgendermaßen aus:

Basisurl. „Vorlagen/“. $this->template . "/images/joom4all.png"?>" />

Und zur Verdeutlichung ein Screenshot:

Es ist klar, wie die Module angezeigt werden, aber ich möchte näher auf das Logo eingehen. Der für die Anzeige des Logos verantwortliche Code ist:

Basisurl. „Vorlagen/“. $this->template . "/images/joom4all.png"?>" />

Auf den ersten Blick sieht es aus wie ein gewöhnlicher HTML-Tag für ein Bild, doch statt des üblichen Dateipfads ist PHP-Code geschrieben. Dieser Code mag auf den ersten Blick kompliziert und unverständlich erscheinen, aber tatsächlich wird beim Betrachten klar, dass er nichts Kompliziertes enthält:

  • - Beginn des PHP-Codes
  • Echo- verantwortlich für die Ausgabe einer Zeichenfolge
  • $this->baseurl– Diese Zeile gibt den Site-Namen zurück
  • Vorlagen/- Hier geben wir an, dass das Bild im Vorlagenordner gespeichert ist
  • $this->template- gibt den Namen der aktuellen Vorlage zurück
  • /images/joom4all.png- Pfad zum Bild im Stammordner der Vorlage und Name der Datei mit dem Bild
  • ?> - Ende des PHP-Codes

Durch die Verwendung dieses PHP-Codes erhalten wir den relativen Pfad zur Bilddatei. Mit anderen Worten: Das Bild wird aus dem Bilderordner der ausgewählten Vorlage entnommen, unabhängig davon, welchen Namen die Site hat oder welche Vorlage verwendet wird.

Wir speichern die Datei index.php, jetzt können wir sie schließen, wir werden sie nicht mehr benötigen.

Lassen Sie uns nun mehrere Module erstellen, die wir an den neu erstellten neuen Positionen anzeigen werden. Das erste Modul zeigt ein Menü in der Fußzeile an und das zweite Modul zeigt kleinen Text an.

Im nächsten Schritt erstellen wir Module – für ein Menü vom Typ „Menü“ und für Text vom Typ „HTML-Code“ (so erstellen Sie ein Modul). Als Stellen dafür wählen wir die neu geschaffenen Modulplätze aus:

Um unser Fußzeilenmenü vom Rest des Menüs auf der Website zu unterscheiden, fügen wir in den Menümoduleinstellungen das Klassensuffix „_footer“ hinzu:

Um nicht zu erklären, was für ein Modul vom Typ „HTML-Code“ es ist, zeige ich im Screenshot das Funktionsprinzip:

Ich habe dieses Modul mit bestimmtem Text gefüllt, der in der Fußzeile angezeigt wird. Zusätzlich zum regulären Text habe ich einen kleinen PHP-Code geschrieben, der das aktuelle Jahr anzeigt:

Wir speichern die Module und gehen auf die Website, um das Ergebnis zu überprüfen. Folgendes habe ich erhalten:

Obwohl das Ergebnis da ist, ist es nicht sehr beeindruckend. Jetzt müssen wir die Fußzeilenelemente mithilfe von CSS angemessener gestalten.

Erstellen wir zunächst neue Fußzeilenblöcke:

Foot-left, .foot-center(float: left;) /*Fußblockausrichtung*/ .foot-left (width: 20%;) /*left block width*/ .foot-center (margin-left: -6px ;) /*zentraler Blockeinzug*/ .foot-right ( /*rechter Block*/ float: none; height: 60px; )

Der nächste Kandidat für das Styling ist das Menü, auf das ich die folgenden Stile angewendet habe:

Ul.nav.menu_footer (margin: 0;) /*null Ränder für das Menü*/ ul.nav.menu_footer li ( /*Gestaltung des Menütextes*/ Schriftfamilie: „Lobster“, kursiv; Schriftgröße: 16px ; line -height: 18px; ) ul.nav.menu_footer li.item-179 a ( /*Sitemap-Menüelement*/ margin-left: 15px; color: #fc8f30; ) ul.nav.menu_footer li.item-180 a ( /*Menüpunkt „Über die Website“*/ Farbe: #5aa426; border-top: 3px solid #5aa426; ) ul.nav.menu_footer li.item-181 a ( /*Menüpunkt „Kontakte“*/ margin-left: 45px; Rand unten: 3 Pixel einfarbig #0f70ad; Farbe: #0f70ad;

Und schließlich trennen wir die Fußzeile vom Hauptteil des Inhalts:

Footer.footer hr (border-top: 3px solid #fc8f30;) /*Fußzeile vom Hauptinhalt trennen*/

Speichern Sie die Stildatei, gehen Sie zur Website und sehen Sie sich das Ergebnis an:

Deshalb haben wir für unsere Website eine Fußzeile erstellt, die viel lustiger aussieht als die Standardfußzeile. Damit ist diese Lektion abgeschlossen und in der nächsten Lektion werden wir mögliche Fehler im adaptiven Design überprüfen und einige Mängel beheben. Darüber hinaus empfehle ich Ihnen, den Artikel darüber zu lesen, wie Sie mit Bootstrap schnell eine Joomla 3-Vorlage und insbesondere eine Fußzeile von Grund auf erstellen können.

Das ist eine Art Albtraum! Warum „taucht“ die Fußzeile Ihrer Website wieder auf und verändert das Design? Ist es wirklich unmöglich, die Fußzeile mit etwas richtig an den unteren Rand der Seite zu drücken? Zumindest Inhalt oder Steine! Brick passt nicht in den Monitor?

Ich verstehe, dann sitzen Sie da und tun Sie nichts, bis Sie unseren Artikel bis zum Ende gelesen haben.

Erstellen Sie die richtige Fußzeile für Ihre Website

Bei vielen Websitebesitzern tritt dieses Problem auf, wenn die Fußzeile der Seite einfach nach oben schwebt. Und dann ist nicht klar, was zu tun ist. Am häufigsten leiden Website-Designs, die Sie in aller Eile selbst erstellt haben, unter diesem Nachteil ( Kreis „verrückte Hände“) oder unerfahrene Webmaster.

Gleichzeitig passiert in den ersten Lebensphasen der Website nichts Schlimmes. Und diese Idylle bleibt so lange bestehen, wie der Inhalt „mit seinem Gewicht“ auf den Keller drückt und ihn am Aufstehen hindert. Es lohnt sich jedoch, kleinere Materialmengen auf der Seite zu platzieren, und die kürzlich „ruhige“ Fußzeile steigt sofort nach oben und verleiht dem gesamten Website-Design ein unangemessenes Aussehen.

Um diesen „Fehler“ der entworfenen Vorlage zu beseitigen, ist es nicht notwendig, Geld für die Dienste eines Webmasters auszugeben. In den meisten Fällen kann die Fußzeile der Website selbst erstellt werden. Betrachten wir alle möglichen Optionen zur Beseitigung dieses Problems:

Erster Weg

Die erste Möglichkeit, eine Fußzeile am Ende der Seite zu verankern, basiert auf CSS. Beginnen wir mit dem Beispielcode und schauen uns dann seine Implementierung genauer an:

html (Höhe: 100 %;) Kopfzeile, Navigation, Abschnitt, Artikel, Seite, Fußzeile (Anzeige: Block;) Körper (Höhe: 100 %;) #Wrapper (Breite: 1000 Pixel; Rand: 0 automatisch; Mindesthöhe: 100 %; height: auto !important; height: 100%; ) #header ( height: 150px; background-color: rgb(0,255,255); ) ; ) #footer ( width: 1000px; margin: -100px auto 0; height: 100px; position: relative; background-color: rgb(51,51,204); )

Um ein Fußzeilen-Tag am unteren Rand der Seite anzuhängen

Wir haben es außerhalb des Containers verschoben (Layer Wrapper). Wir strecken die gesamte Seite und den Inhalt des „Körpers“ bis an die Ränder des Bildschirms. Dazu legen wir die Höhe der Tags im CSS-Code fest Und bei 100 %:

html (Höhe: 100 %;) Körper (Höhe: 100 %;)

Außerdem setzen wir die Mindesthöhe der Containerebene auf 100 %. Falls die Breite des Inhalts größer als die Höhe des Containers ist, setzen Sie die Eigenschaft auf auto . Dadurch passt sich der Wrapper automatisch an die Breite des auf der Seite platzierten Inhalts an:

#wrapper ( min-height: 100 %; height: auto !important; height: 100 %; )

Die Codezeile „height: 100 %“ ist für ältere IE-Versionen gedacht, die die Eigenschaft „min-height“ nicht akzeptieren.

Um im Seitendesign Platz für eine Fußzeile zu schaffen, legen wir einen Einzug für das Tag fest bei 100 Pixel:

#content (Auffüllung: 100px;)

Zu diesem Zeitpunkt haben wir eine Webseite mit Vollbildbreite und zusätzlichen 100 Pixeln, die durch einen negativen Randwert für die Fußzeile (Rand: -100 Pixel) „neutralisiert“ wird, wobei die Position auf „relativ“ (Position: relativ) eingestellt ist. . Durch die Verwendung eines negativen Füllwerts „ziehen“ wir also die Fußzeile in den Bereich des Containers, dessen Höhe auf 100 % eingestellt ist.

In diesem Beispiel wird das Markup des Webdokuments mithilfe relativ neuer HTML 5-Tags angegeben, die von älteren Browsern möglicherweise nicht richtig interpretiert werden. Aus diesem Grund wird möglicherweise nicht das gesamte Seitendesign korrekt angezeigt. Um dies zu vermeiden, müssen Sie die neuen Tags aus dem Arsenal der Version 5 der Hypertextsprache durch reguläre ersetzen

:

Inhalt

Verbesserte Version

Die oben besprochene Methode, die Fußzeile am Ende der Seite „unerschütterlich“ zu machen, ist nicht für jeden geeignet. Wenn Sie in Zukunft das Design Ihrer Website mithilfe von Popups ändern und verbessern möchten, ist es besser, die vorherige Implementierung nicht mehr zu verwenden.

Die am häufigsten verwendete CSS-Eigenschaft für Popup-Fenster ist z-index . Mithilfe seiner Werte legen Sie die Reihenfolge fest, in der die Ebenen übereinander gestapelt werden.

Je höher der Z-Index-Wert eines Elements ist, desto höher erscheint es im gesamten „Layering“-Stapel.

Da wir im vorherigen Beispiel jedoch einen negativen Füllwert für die Fußzeile verwendet haben, überlappt der untere Rand des Popups den oberen Fußzeilenbereich. Auch wenn es einen höheren Z-Index-Wert haben wird. Weil das übergeordnete Element (Wrapper) des Popup-Fensters immer noch einen niedrigeren Wert für diese Eigenschaft hat.

Hier ist eine erweiterte Option:

CSS - Beispielcode:

html, body ( height: 100 %; ) .header ( height:120px; Hintergrundfarbe: rgb(0,255,102); ) .main ( min-height:100 %; Position: relative; Hintergrundfarbe: rgb(100,255,255); ) .footer ( Höhe:150px; Position: absolut; links: 0; unten: 0; Breite: 100%; Hintergrundfarbe: rgb(0,0,153); )

Wie Sie dem Code entnehmen können, haben wir die Fußzeile als Teil des Hauptelements platziert. Wir legen die relative Positionierung für den Container und die absolute Positionierung für die Fußzeile fest. Wir haben den Keller ganz unten im Container befestigt und seine Position links und oben auf 0 gesetzt.

Option für einen Keller mit nicht fester Höhe

Die bisherigen Implementierungen können dafür sorgen, dass sich die Fußzeile immer am Ende der Seite befindet. Aber nur, wenn die Fußzeile eine feste Breite hat. Was aber, wenn die Menge der darin veröffentlichten Inhalte nicht vorhersehbar ist?

Dies erfordert eine erweiterte Option für einen nicht festen Keller. Für die Anzeigeeigenschaft wird die Fußzeile auf Tabellenzeile festgelegt. Dadurch wird es als Tabellenzeile angezeigt.