Het onderste horizontale blok van een paginalay-out wordt vaak een "voettekst" genoemd. Daarin worden, net als in andere blokken van de pagina, ontwerpelementen geplaatst, maar in tegenstelling tot andere ontstaan er vaak specifieke problemen met de positionering van dit specifieke blok. Ze houden verband met het feit dat verschillende browsers de standaarden van de CSS-taal anders begrijpen en het kan behoorlijk moeilijk zijn om de voettekst aan de onderkant van het browservenster te krijgen. Hieronder vindt u de code voor een van de oplossingen voor dit probleem.
Noodzakelijk
Basiskennis van CSS en HTML
instructies:
Stap 1
Plaats in de allereerste regel van de broncode van de pagina een verwijzing naar de XHTML 1.0 Transitional-specificatie:
Stap 2
Plaats de hoofdblokken van de paginastructuur in de hoofdtekst van het document (tussen de en tags). Het blok waarin de hoofdinhoud wordt geplaatst, moet uit twee geneste lagen bestaan. Laat de buitenste bijvoorbeeld de identifier OuterDiv hebben en de binnenste - InnerDiv:
Dit is waar de hoofdinhoud van de pagina zal zijn.
Plaats daarachter een footer-blok met een identifier, bijvoorbeeld FooterDiv:
Voettekst van de pagina.
Stap 3
Plaats in het kopgedeelte van de HTML-code (tussen de en tags) een link naar een extern bestand met een beschrijving van css-stijlen:
@import "footerStyle.css";
Stap 4
Sla de volledige basispaginacode op in een bestand met de extensie html. Het kan er zo uitzien:
Geperste voettekst
@import "footerStyle.css";
Dit is waar de hoofdinhoud van de pagina zal zijn.
Voettekst van de pagina.
Stap 5
Maak een stylesheet-bestand - een tekstbestand zonder opmaak dat moet worden opgeslagen met de css-extensie en de naam die u hebt opgegeven in de HTML-code (footerStyle.css). Schrijf naar dit bestand de volgende stijlbeschrijvingen voor de blokken die op de pagina worden gebruikt:
* {marge: 0; opvulling: 0}
html, lichaam {hoogte: 100%;}
lichaam {
positie: relatief;
kleur: # 222222;
}
#OuterDiv {
marge: 0;
minimale hoogte: 100%;
achtergrond: #aaaaaa;
kleur: # 222222;
}
* html #OuterDiv {hoogte: 100%;}
#FooterDiv {
positie: relatief;
beiden opschonen;
marge-top: -60px;
hoogte: 60px;
breedte: 100%;
achtergrondkleur: Donkerblauw;
tekst uitlijnen: midden;
kleur: #eeeeff;
}
. InnerDiv {
breedte: 100%;
zweven: links;
}
