Den nederste horisontale blokken i et sideoppsett blir ofte referert til som en "bunntekst". I den, som i andre blokker på siden, er designelementer plassert, men i motsetning til andre oppstår det ofte spesifikke problemer med plasseringen av denne blokken. De henger sammen med at forskjellige nettlesere forstår standardene for CSS-språket, og det kan være ganske vanskelig å få bunnteksten til å være nederst i nettleservinduet. Nedenfor er koden for en av løsningene på dette problemet.
Nødvendig
Grunnleggende kunnskap om CSS og HTML
Bruksanvisning
Trinn 1
I den aller første linjen i sidens kildekode, plasser en referanse til XHTML 1.0 Transitional-spesifikasjonen:
Steg 2
Plasser hovedblokkene i sidestrukturen inne i dokumentet (mellom taggene og). Blokken som hovedinnholdet skal plasseres i, må bestå av to nestede lag. La for eksempel den ytre ha identifikatoren OuterDiv, og den indre - InnerDiv:
Det er her hovedinnholdet på siden vil være.
Bak dem plasserer du en bunntekstblokk med en identifikator, for eksempel FooterDiv:
Bunntekst på siden.
Trinn 3
Plasser en kobling til en ekstern fil i hoveddelen av HTML-koden (mellom og kodene) med en beskrivelse av css-stiler:
@import "footerStyle.css";
Trinn 4
Lagre hele mastersideskoden i en fil med html-utvidelsen. Det kan se slik ut:
Presset bunntekst
@import "footerStyle.css";
Det er her hovedinnholdet på siden vil være.
Bunntekst på siden.
Trinn 5
Lag en stilarkfil - en ren tekstfil som skal lagres med css-utvidelsen og navnet du angav i HTML-koden (footerStyle.css). Skriv til denne filen følgende stilbeskrivelser for blokkene som brukes på siden:
* {margin: 0; polstring: 0}
html, kropp {høyde: 100%;}
kropp {
posisjon: relativ;
farge: # 222222;
}
#OuterDiv {
margin: 0;
min høyde: 100%;
bakgrunn: #aaaaaa;
farge: # 222222;
}
* html #OuterDiv {høyde: 100%;}
#FooterDiv {
posisjon: relativ;
klar: begge deler;
margin-top: -60px;
høyde: 60px;
bredde: 100%;
bakgrunnsfarge: DarkBlue;
tekstjustering: sentrum;
farge: #eeeeff;
}
. InnerDiv {
bredde: 100%;
flyte: venstre;
}
