"Footer" is meestal het onderste blok van een webpagina-indeling. De meest voorkomende moeilijkheid bij het plaatsen van deze voettekst is om deze altijd onder aan het venster te plaatsen, ongeacht de pagina volheid of het browsertype. Er zijn nogal wat oplossingen voor het probleem geweest sinds de tijd van de massale overgang naar bloklay-out, en een daarvan wordt hieronder gegeven.
Het is nodig
Basiskennis van CSS en HTML
instructies:
Stap 1
Laten we het meest voorkomende paginalay-outschema als basis nemen - drie blokken die boven elkaar zijn geplaatst. De bovenkant (koptekst) moet altijd worden uitgelijnd met de bovenrand van het venster, de onderkant (voettekst) - met de onderrand, en de hoofdtekst (hoofdtekst) moet altijd alle ruimte ertussen vullen. De broncode moet een link bevatten naar de XHTML 1.0 Transitional-specificatie en de beschrijving van stijlen moet in een extern CSS-bestand worden geplaatst (om problemen met Opera 9. XX te voorkomen). lichaam van de pagina. Het begint natuurlijk vanaf het bovenste blok, in de tag waarvan een identifier-attribuut met een waarde moet worden geplaatst, bijvoorbeeld divHead:
Koptekst blok.
Het hoofdblok moet bestaan uit een paar geneste blokken. De buitenste krijgt de divOut-ID en de binnenste - divContent:
Belangrijkste inhoud.
De voettekst is ingesteld op divFoot:
Pagina ondertekst.
Stap 2
De volledige HTML-code van de pagina zou er als volgt uit moeten zien:
Drie blokken
@import "stijl.css";
Dit is een kopblok.
Belangrijkste inhoud.
Dit is de footer van de pagina.
Stap 3
De stijlbeschrijving implementeert het volgende lay-outmechanisme: het middelste blok (divOut) is ingesteld op 100% hoogte, het bovenste blok (divHead) heeft een absolute positionering en het onderste - relatief. In het hoofdinhoudsblok (divContent) moet er bovenaan een vrije ruimte zijn die gelijk is aan de hoogte van het kopblok, zodat het de hoofdinhoud van de pagina niet overlapt. En het onderste blok (voettekst) moet bovenaan een negatieve marge hebben, gelijk aan de hoogte van dit blok. Hierdoor komt het boven de onderrand van het browservenster. Dit mechanisme kan worden geïmplementeerd met behulp van een css-bestand met de volgende inhoud: * {marge: 0; opvulling: 0}
html, lichaam {hoogte: 100%;} lichaam {
positie: relatief;
kleur: # 000;
}
#divOut {
marge: 0;
minimale hoogte: 100%;
achtergrond: #FFF;
kleur: # 000;
}
* html #divOut {hoogte: 100%;}
#divHoofd {
positie: absoluut;
links: 0;
boven: 0;
breedte: 100%;
hoogte: 80px;
achtergrond: # 2F5000;
overloop verborgen;
tekst uitlijnen: midden;
kleur: #FFF;
} #divFoot {
positie: relatief;
beiden opschonen;
marge-top: -60px;
hoogte: 60px;
breedte: 100%;
achtergrondkleur: # 2F5000;
tekst uitlijnen: midden;
kleur: #FFF;
}
.divInhoud {
breedte: 100%;
zweven: links;
opvulling-top: 81px;
} De naam die u hebt opgegeven voor de stylesheet in de HTML-code is style.css.
