"Bunntekst" er vanligvis den nederste blokken i en websideoppsett. Den vanligste vanskeligheten med å plassere denne bunnteksten er å få den til å alltid være plassert nederst i vinduet, uavhengig av sidefylde eller nettlesertype. Det har vært ganske mange løsninger på problemet siden den massive overgangen til blokkoppsett, og en av dem er gitt nedenfor.
Det er nødvendig
Grunnleggende kunnskap om CSS og HTML
Bruksanvisning
Trinn 1
La oss ta det vanligste skjemaoppsettskjemaet som grunnlag - tre blokker plassert over hverandre. Toppen (toppteksten) skal alltid være justert til vindusens øvre kant, bunnen (bunnteksten) - til den nedre kanten, og hoveddelen (kroppen) skal alltid fylle hele plassen mellom dem. Kildekoden må inneholde en lenke til XHTML 1.0 Transitional-spesifikasjonen, og beskrivelsen av stiler må plasseres i en ekstern CSS-fil (for å unngå problemer med Opera 9. XX). HTML-beskrivelsen av strukturen må plasseres i hovedområdet kroppssiden av siden. Det begynner selvfølgelig fra toppblokken, i koden som et identifikasjonsattributt med en verdi skal plasseres, for eksempel divHead:
Toppblokk.
Hovedblokken skal bestå av et par nestede blokker. Den ytre vil få divOut-identifikatoren, og den indre - divContent:
Hovedinnhold.
Bunnteksten er satt til divFoot:
Sidefot.
Steg 2
Den komplette HTML-koden på siden skal se slik ut:
Tre blokker
@import "style.css";
Dette er en toppblokk.
Hovedinnhold.
Dette er bunnteksten på siden.
Trinn 3
Stilbeskrivelsen implementerer følgende layoutmekanisme: midtblokken (divOut) er satt til 100% høyde, den øverste blokken (divHead) vil ha absolutt posisjonering, og den nederste - relative. I hovedinnholdsblokken (divContent) må det være en ledig plass øverst som er lik høyden på overskriftsblokken, slik at den ikke overlapper hovedinnholdet på siden. Og den nederste blokken (bunnteksten) skal ha en negativ margin på toppen, lik høyden på denne blokken. Dette vil heve den over den nedre grensen til nettleservinduet. Denne mekanismen kan implementeres ved hjelp av en css-fil med følgende innhold: * {margin: 0; polstring: 0}
html, kropp {høyde: 100%;} kropp {
posisjon: relativ;
farge: # 000;
}
#divOut {
margin: 0;
min høyde: 100%;
bakgrunn: #FFF;
farge: # 000;
}
* html #divOut {høyde: 100%;}
#divHead {
posisjon: absolutt;
venstre: 0;
topp: 0;
bredde: 100%;
høyde: 80px;
bakgrunn: # 2F5000;
overløp: skjult;
tekstjustering: sentrum;
farge: #FFF;
} #divFoot {
posisjon: relativ;
klar: begge deler;
margin-top: -60px;
høyde: 60px;
bredde: 100%;
bakgrunnsfarge: # 2F5000;
tekstjustering: sentrum;
farge: #FFF;
}
.div Innhold {
bredde: 100%;
flyte: venstre;
polstring-topp: 81px;
} Navnet du spesifiserte for stilarket i HTML-koden er style.css.
