"Sidefod" er normalt den nederste blok i et websides layout. Det mest almindelige problem med at placere denne sidefod er at få den til altid at være placeret i bunden af vinduet, uanset sidefylde eller browsertype. Der har været en hel del løsninger på problemet siden tidspunktet for den massive overgang til bloklayout, og en af dem er givet nedenfor.
Er det nødvendigt
Grundlæggende viden om CSS og HTML
Instruktioner
Trin 1
Lad os tage det mest almindelige sidelayoutsystem som basis - tre blokke placeret oven over hinanden. Toppen (overskrift) skal altid være justeret til vinduets øverste kant, bunden (sidefoden) - til den nederste kant, og hoveddelen (kroppen) skal altid udfylde hele mellemrummet mellem dem. Kildekoden skal indeholde et link til XHTML 1.0 Transitional-specifikationen, og beskrivelsen af typografier skal placeres i en ekstern CSS-fil (for at undgå problemer med Opera 9. XX). HTML-beskrivelsen af strukturen skal placeres i hovedtemaet sidens brødtekst. Det begynder naturligvis fra den øverste blok, i det tag, hvor en identifikatorattribut med en værdi skal placeres, for eksempel divHead:
Header blok.
Hovedblokken skal bestå af et par indlejrede blokke. Den ydre får divOut-identifikatoren og den indre - divContent:
Hovedindhold.
Sidefoden er indstillet til divFoot:
Sidefod.
Trin 2
Sidens komplette HTML-kode skal se sådan ud:
Tre blokke
@import "style.css";
Dette er en headerblok.
Hovedindhold.
Dette er sidens sidefod.
Trin 3
Stilbeskrivelsen implementerer følgende layoutmekanisme: den midterste blok (divOut) er indstillet til 100% højde, den øverste blok (divHead) vil have absolut positionering og den nederste - relative. I hovedindholdsblokken (divContent) skal der være en ledig plads øverst lig med højden på overskriftsblokken, så den ikke overlapper hovedindholdet på siden. Og bundblokken (sidefoden) skal have en negativ margen øverst svarende til højden på denne blok. Dette hæver det over browservinduets nederste kant. Denne mekanisme kan implementeres ved hjælp af en css-fil med følgende indhold: * {margin: 0; polstring: 0}
html, krop {højde: 100%;} krop {
position: relativ;
farve: # 000;
}
#divOut {
margen: 0;
min. højde: 100%;
baggrund: #FFF;
farve: # 000;
}
* html #divOut {højde: 100%;}
#divHead {
position: absolut;
venstre: 0;
top: 0;
bredde: 100%;
højde: 80px;
baggrund: # 2F5000;
overløb: skjult;
tekstjustering: center;
farve: #FFF;
} #divFoot {
position: relativ;
klart: begge;
margin-top: -60px;
højde: 60px;
bredde: 100%;
baggrundsfarve: # 2F5000;
tekstjustering: center;
farve: #FFF;
}
.divContent {
bredde: 100%;
flyde: venstre;
polstring-top: 81px;
} Det navn, du har angivet for typografiarket i HTML-koden, er style.css.
