Der unterste horizontale Block eines Seitenlayouts wird oft als "Fußzeile" bezeichnet. Darin werden wie in anderen Blöcken der Seite Designelemente platziert, aber im Gegensatz zu anderen treten oft spezifische Probleme bei der Positionierung dieses bestimmten Blocks auf. Sie hängen damit zusammen, dass verschiedene Browser die Standards der CSS-Sprache unterschiedlich verstehen und es ziemlich schwierig sein kann, die Fußzeile am unteren Rand des Browserfensters zu platzieren. Unten ist der Code für eine der Lösungen für dieses Problem.
Notwendig
Grundkenntnisse in CSS und HTML
Anweisungen
Schritt 1
Platzieren Sie in der allerersten Zeile des Quellcodes der Seite einen Verweis auf die XHTML 1.0 Transitional-Spezifikation:
Schritt 2
Platzieren Sie die Hauptblöcke der Seitenstruktur innerhalb des Hauptteils des Dokuments (zwischen den Tags und). Der Block, in dem der Hauptinhalt platziert wird, muss aus zwei verschachtelten Ebenen bestehen. Lassen Sie beispielsweise das äußere den Bezeichner OuterDiv haben und das innere - InnerDiv:
Hier wird der Hauptinhalt der Seite sein.
Platzieren Sie dahinter einen Fußzeilenblock mit einem Bezeichner, zum Beispiel FooterDiv:
Fußzeile der Seite.
Schritt 3
Fügen Sie im Kopfteil des HTML-Codes (zwischen den und -Tags) einen Link zu einer externen Datei mit einer Beschreibung der CSS-Stile ein:
@import "footerStyle.css";
Schritt 4
Speichern Sie den vollständigen Masterseitencode in einer Datei mit der HTML-Erweiterung. Es könnte so aussehen:
Gedrückte Fußzeile
@import "footerStyle.css";
Hier wird der Hauptinhalt der Seite sein.
Fußzeile der Seite.
Schritt 5
Erstellen Sie eine Stylesheet-Datei - eine reine Textdatei, die mit der CSS-Erweiterung und dem im HTML-Code angegebenen Namen (footerStyle.css) gespeichert werden soll. Schreiben Sie in diese Datei die folgenden Stilbeschreibungen für die auf der Seite verwendeten Blöcke:
* {Rand: 0; Polsterung: 0}
html, Körper {Höhe: 100%;}
Karosserie {
Position: relativ;
Farbe: # 222222;
}
#OuterDiv {
Rand: 0;
Mindesthöhe: 100%;
Hintergrund: #aaaaaa;
Farbe: # 222222;
}
* html #OuterDiv {Höhe: 100%;}
#FooterDiv {
Position: relativ;
Lösche beide;
Rand oben: -60px;
Höhe: 60px;
Breite: 100 %;
Hintergrundfarbe: Dunkelblau;
Textausrichtung: Mitte;
Farbe: #eeeeff;
}
. InnerDiv {
Breite: 100 %;
Schwimmer: links;
}
