Lehekülje paigutuse kõige alumist horisontaalset plokki nimetatakse sageli "jaluseks". Selles, nagu ka teistes lehe plokkides, on paigutatud kujunduselemendid, kuid erinevalt teistest tekivad selle konkreetse ploki positsioneerimisega sageli konkreetsed probleemid. Need on seotud asjaoluga, et erinevad brauserid mõistavad CSS-keele standardeid erinevalt ja jaluse viimine brauseriakna alumisse serva võib olla üsna keeruline. Allpool on selle probleemi ühe lahenduse kood.
Vajalik
Põhiteadmised CSS-ist ja HTML-ist
Juhised
Samm 1
Lisage lehe lähtekoodi kõige esimesele reale viide XHTML 1.0 üleminekuspetsifikatsioonile:
2. samm
Asetage lehestruktuuri põhiplokid dokumendi kehasse (ja siltide vahele). Plokk, kuhu põhisisu asetatakse, peab koosnema kahest pesastatud kihist. Näiteks laske välimisel olla identifikaator OuterDiv ja sisemisel - InnerDiv:
Siin asub lehe peamine sisu.
Nende taha asetage jaluseplokk koos identifikaatoriga, näiteks FooterDiv:
Lehe jalus.
3. samm
Asetage HTML-koodi peaossa (ja siltide vahele) link välisele failile koos css-stiilide kirjeldusega:
@import "footerStyle.css";
4. samm
Salvestage kogu põhilehe kood HTML-laiendiga faili. See võib välja näha järgmine:
Pressitud jalus
@import "footerStyle.css";
Siin asub lehe peamine sisu.
Lehe jalus.
5. samm
Looge stiililehe fail - lihttekstifail, mis tuleks salvestada laiendiga css ja HTML-koodis määratud nimega (footerStyle.css). Kirjutage sellesse faili lehel kasutatavate plokkide järgmised stiilikirjeldused:
* {veeris: 0; polster: 0}
HTML, body {kõrgus: 100%;}
keha {
positsioon: sugulane;
värv: # 222222;
}
#OuterDiv {
varu: 0;
min-kõrgus: 100%;
taust: #aaaaaa;
värv: # 222222;
}
* html #OuterDiv {kõrgus: 100%;}
#FooterDiv {
positsioon: sugulane;
selge: mõlemad;
ülemine äär: -60 pikslit;
kõrgus: 60px;
laius: 100%;
taustavärv: DarkBlue;
teksti joondamine: keskel;
värv: #eeeeff;
}
. InnerDiv {
laius: 100%;
ujuk: vasak;
}
