Hoe de voettekst van de pagina ("footer") aan de onderrand van het venster te laten plakken - dit is waarschijnlijk het meest voorkomende probleem bij de lay-out van sitepagina's. Er zijn natuurlijk oplossingen, en er zijn er meerdere. Hieronder is een manier om ervoor te zorgen dat de voettekst altijd onder aan de pagina wordt ingedrukt, ongeacht de hoeveelheid inhoud en het type browser.
Het is nodig
Basiskennis van CSS en HTML
instructies:
Stap 1
Laten we een van de meer typische pagineringsschema's als voorbeeld nemen - het zal een zolder (koptekst), hoofdblok en voettekst hebben. Natuurlijk kunt u, indien nodig, meerdere kolommen in het hoofdblok plaatsen, maar dat zullen we hier niet doen, we zullen ons alleen concentreren op het niet positioneren van de voettekst. De HTML-code van de pagina begint met de verklaring van de specificatie:
Tussen de tags en, naast de paginatitel, zullen we een indicatie van de codering plaatsen: evenals een link naar een extern CSS-bestand met een beschrijving van stijlen: @import "styles.css"; We zullen de beschrijving van stijlen direct in de html-code van de pagina om complicaties met Opera browser van de negende versie te voorkomen. Tussen de tags en plaats de blokstructuur van de pagina. De eerste is natuurlijk het titelblok. We geven het de header-ID om stijlen voor dit specifieke blok in te stellen:
Deze koptekst staat altijd bovenaan het venster.
Dan - het hoofdblok van de pagina. Het zal bestaan uit twee geneste - buitenste (identifier - outer) en inner (identifier - outerwrap):
Dit is het belangrijkste onderdeel.
En tot slot de footer:
Het is voettekst - altijd onder aan het venster!
De volledige pagina ziet er als volgt uit:
Hoe de voettekst naar beneden te drukken
@import "stijlen.css";
Deze koptekst staat altijd bovenaan het venster.
Dit is het belangrijkste onderdeel.
Het is voettekst - altijd onder aan het venster!
Stap 2
Laten we nu verder gaan met de inhoud van de stylesheet. Het implementeert het volgende schema: het hoofdpaginablok wordt ingesteld op 100% hoogte, de titel wordt absoluut gepositioneerd en de voettekst is relatief. Om te voorkomen dat de kop de hoofdinhoud van de pagina overlapt, wordt deze hoofdinhoud in een extra vak binnen het hoofdvak geplaatst en wordt dit extra vak ingesteld op een bovenmarge die gelijk is aan de hoogte van het kopvak. En de voettekst krijgt een negatieve bovenmarge die gelijk is aan de hoogte - op deze manier wordt deze tot zijn volledige hoogte boven de onderkant van het venster gebracht. Volledige inhoud van het css-bestand: * {marge: 0; opvulling: 0}
html, lichaam {hoogte: 100%;} lichaam {
de kleur zwart;
positie: relatief;
}
#buitenste {
minimale hoogte: 100%;
marge: 0;
achtergrond: wit;
de kleur zwart;
} * html #outer {hoogte: 100%;}
#kop {
positie: absoluut;
boven: 0;
links: 0;
breedte: 100%;
hoogte: 70px;
achtergrond: # 304a00;
overloop verborgen;
kleur wit;
tekst uitlijnen: midden;
} #voettekst {
positie: relatief;
marge-top: -50px;
beiden opschonen;
breedte: 100%;
hoogte: 50px;
achtergrondkleur: # 304a00;
kleur wit;
tekst uitlijnen: midden;
}
.buitenverpakking {
zweven: links;
breedte: 100%;
opvulling-top: 71px;
} Dit bestand moet worden opgeslagen met de naam die we hebben opgegeven in de html-code van de pagina - stijlen.css.
