Den nederste vandrette blok i et sidelayout omtales ofte som en "sidefod". I den, som i andre blokke på siden, placeres designelementer, men i modsætning til andre opstår der ofte specifikke problemer med placeringen af denne særlige blok. De er forbundet med det faktum, at forskellige browsere forstår standarderne for CSS-sproget forskelligt, og det kan være ret svært at få sidefoden til at være i nederste kant af browservinduet. Nedenfor er koden til en af løsningerne på dette problem.
Nødvendig
Grundlæggende viden om CSS og HTML
Instruktioner
Trin 1
I den allerførste linje i sidens kildekode skal du placere en henvisning til XHTML 1.0 Transitional-specifikationen:
Trin 2
Placer sidestrukturens hovedblokke inde i dokumentets brødtekst (mellem tags og). Blokken, hvor hovedindholdet placeres, skal bestå af to indlejrede lag. Lad for eksempel den ydre have identifikatoren OuterDiv og den indre - InnerDiv:
Det er her hovedindholdet på siden vil være.
Bag dem placerer du en sidefodsblok med en identifikator, for eksempel FooterDiv:
Sidefod på siden.
Trin 3
Placer et link i hoveddelen af HTML-koden (mellem tags og) et link til en ekstern fil med en beskrivelse af css-stilarter:
@import "footerStyle.css";
Trin 4
Gem den komplette mastersides kode i en fil med html-udvidelsen. Det kan se sådan ud:
Presset sidefod
@import "footerStyle.css";
Det er her hovedindholdet på siden vil være.
Sidefod på siden.
Trin 5
Opret en stilarkfil - en almindelig tekstfil, der skal gemmes med css-udvidelsen og det navn, du har angivet i HTML-koden (footerStyle.css). Skriv til denne fil følgende stilbeskrivelser for de blokke, der bruges på siden:
* {margin: 0; polstring: 0}
html, krop {højde: 100%;}
krop {
position: relativ;
farve: # 222222;
}
#OuterDiv {
margen: 0;
min. højde: 100%;
baggrund: #aaaaaa;
farve: # 222222;
}
* html #OuterDiv {højde: 100%;}
#FooterDiv {
position: relativ;
klart: begge;
margin-top: -60px;
højde: 60px;
bredde: 100%;
baggrundsfarve: DarkBlue;
tekstjustering: center;
farve: #eeeeff;
}
. InnerDiv {
bredde: 100%;
flyde: venstre;
}
