"Jalus" on tavaliselt veebilehe paigutuse kõige alumine osa. Selle jaluse paigutamisel on kõige tavalisem raskus saavutada, et see paigutataks alati akna allserva, hoolimata lehe täitumisest või brauseri tüübist. Alates plokkide paigutusele ülemineku ajast on probleemile olnud üsna palju lahendusi ja üks neist on toodud allpool.
See on vajalik
Põhiteadmised CSS-ist ja HTML-ist
Juhised
Samm 1
Võtame aluseks kõige levinuma lehe paigutuse skeemi - kolm üksteise kohale asetatud plokki. Ülemine (päis) peaks alati olema joondatud akna ülemise piiriga, alumine (jalus) - alumise piiriga ja peamine (keha) peaks alati täitma kogu nende vahel oleva ruumi. Lähtekood peab sisaldama linki XHTML 1.0 Transitional spetsifikatsioonile ja stiilide kirjeldus tuleb paigutada välimisse CSS-faili (Opera 9. XX-ga seotud probleemide vältimiseks). Struktuuri HTML-kirjeldus tuleb paigutada peamisse lehe sisu. See algab muidugi ülemisest plokist, mille silti tuleks panna väärtusega identifikaatori atribuut, näiteks divHead:
Päiseplokk.
Peamine plokk peaks koosnema paarist pesastatud plokist. Välisele antakse identifikaator divOut ja sisemisele - divContent:
Peamine sisu.
Jalus on seatud divFoot:
Lehe jalus.
2. samm
Lehe täielik HTML-kood peaks välja nägema järgmine:
Kolm plokki
@import "style.css";
See on päiseplokk.
Peamine sisu.
See on lehe jalus.
3. samm
Stiilikirjeldus rakendab järgmist paigutusmehhanismi: keskmine plokk (divOut) on seatud 100% kõrgusele, ülemine plokk (divHead) saab absoluutse positsioneerimise ja alumine - suhteline. Põhisisuplokis (divContent) peab ülaservas olema vaba ruum, mis võrdub pealkirjaploki kõrgusega, nii et see ei kattuks lehe põhisisuga. Ja alumisel plokil (jalus) peaks olema ülaservas negatiivne varu, mis võrdub selle ploki kõrgusega. See tõstab selle brauseriakna alumise piiri kohale. Seda mehhanismi saab rakendada järgmise sisuga css-faili abil: * {margin: 0; polster: 0}
HTML, keha {kõrgus: 100%;} keha {
positsioon: sugulane;
värv: # 000;
}
#divOut {
varu: 0;
min-kõrgus: 100%;
taust: #FFF;
värv: # 000;
}
* html #divOut {kõrgus: 100%;}
#divHead {
positsioon: absoluutne;
vasakul: 0;
ülemine: 0;
laius: 100%;
kõrgus: 80px;
taust: # 2F5000;
ülevool: varjatud;
teksti joondamine: keskel;
värv: #FFF;
} #divFoot {
positsioon: sugulane;
selge: mõlemad;
ülemine äär: -60 pikslit;
kõrgus: 60px;
laius: 100%;
taustavärv: # 2F5000;
teksti joondamine: keskel;
värv: #FFF;
}
.divContent {
laius: 100%;
ujuk: vasak;
top top: 81px;
} HTML-koodis stiililehe jaoks määratud nimi on style.css.
