"Fußzeile" ist normalerweise der unterste Block eines Webseiten-Layouts. Die häufigste Schwierigkeit bei der Positionierung dieser Fußzeile besteht darin, sie immer am unteren Rand des Fensters zu positionieren, unabhängig von der Seitenfülle oder dem Browsertyp. Seit der massiven Umstellung auf Blocklayouts gab es einige Lösungen für das Problem, von denen eine unten aufgeführt ist.
Es ist notwendig
Grundkenntnisse in CSS und HTML
Anleitung
Schritt 1
Nehmen wir das gängigste Seitenlayout-Schema als Grundlage - drei übereinander angeordnete Blöcke. Oben (Kopfzeile) sollte immer am oberen Rand des Fensters ausgerichtet sein, unten (Fußzeile) - am unteren Rand, und der Hauptteil (Hauptteil) sollte immer den gesamten Raum dazwischen ausfüllen. Der Quellcode muss einen Link zur XHTML 1.0 Transitional-Spezifikation enthalten und die Beschreibung der Stile muss in einer externen CSS-Datei platziert werden (um Probleme mit Opera 9. XX zu vermeiden) Die HTML-Beschreibung der Struktur muss im Hauptverzeichnis platziert werden Hauptteil der Seite. Es beginnt natürlich mit dem obersten Block, in dessen Tag ein Bezeichnerattribut mit einem Wert platziert werden soll, zum Beispiel divHead:
Header-Block.
Der Hauptblock sollte aus einem Paar verschachtelter Blöcke bestehen. Der äußere erhält den divOut-Bezeichner und der innere - divContent:
Hauptinhalt.
Die Fußzeile ist auf divFoot gesetzt:
Fußzeile.
Schritt 2
Der komplette HTML-Code der Seite sollte so aussehen:
Drei Blöcke
@import "style.css";
Dies ist ein Header-Block.
Hauptinhalt.
Dies ist die Fußzeile der Seite.
Schritt 3
Die Stilbeschreibung implementiert den folgenden Layout-Mechanismus: Der mittlere Block (divOut) wird auf 100 % Höhe gesetzt, der obere Block (divHead) wird absolut positioniert und der untere - relativ. Im Hauptinhaltsblock (divContent) muss oben ein Freiraum in der Höhe des Überschriftenblocks vorhanden sein, damit er den Hauptinhalt der Seite nicht überlappt. Und der untere Block (Fußzeile) sollte oben einen negativen Rand haben, der der Höhe dieses Blocks entspricht. Dadurch wird es über den unteren Rand des Browserfensters angehoben. Dieser Mechanismus kann über eine CSS-Datei mit folgendem Inhalt implementiert werden: * {margin: 0; Polsterung: 0}
html, Körper {Höhe: 100%;} Körper {
Position: relativ;
Farbe: # 000;
}
#divOut {
Rand: 0;
Mindesthöhe: 100%;
Hintergrund: #FFF;
Farbe: # 000;
}
* html #divOut {Höhe: 100%;}
#divKopf {
Position: absolut;
links: 0;
oben: 0;
Breite: 100 %;
Höhe: 80px;
Hintergrund: # 2F5000;
Überlauf versteckt;
Textausrichtung: Mitte;
Farbe: #FFF;
} #divFoot {
Position: relativ;
Lösche beide;
Rand oben: -60px;
Höhe: 60px;
Breite: 100 %;
Hintergrundfarbe: # 2F5000;
Textausrichtung: Mitte;
Farbe: #FFF;
}
.divInhalt {
Breite: 100 %;
Schwimmer: links;
Polsterung-Oberseite: 81px;
} Der Name, den Sie für das Stylesheet im HTML-Code angegeben haben, lautet style.css.
