Sivun asettelun alimmasta vaakatason lohkosta käytetään usein nimitystä "alatunniste". Siinä, kuten muissakin sivulohkoissa, sijoitetaan suunnitteluelementtejä, mutta toisin kuin muut, tämän nimenomaisen lohkon sijoittelussa syntyy usein erityisiä ongelmia. Ne liittyvät siihen, että eri selaimet ymmärtävät CSS-kielen standardit eri tavalla, ja voi olla melko vaikeaa saada alatunniste selainikkunan alareunaan. Alla on koodi yksi tämän ongelman ratkaisuista.
Tarpeellinen
Perustiedot CSS: stä ja HTML: stä
Ohjeet
Vaihe 1
Lisää sivun lähdekoodin ensimmäiselle riville viittaus XHTML 1.0 Transitional -määritykseen:
Vaihe 2
Aseta sivurakenteen päälohkot asiakirjan rungon sisäpuolelle (ja -tagien väliin). Lohkon, johon pääsisältö sijoitetaan, on koostuttava kahdesta sisäkkäisestä kerroksesta. Anna esimerkiksi ulkoisella olla tunnus OuterDiv ja sisäisellä - InnerDiv:
Tässä on sivun pääsisältö.
Heidän taakse sijoita alatunnistelohko tunnuksella, esimerkiksi FooterDiv:
Sivun alatunniste.
Vaihe 3
Lisää HTML-koodin pääosaan (ja -tagien väliin) linkki ulkoiseen tiedostoon, jossa on kuvaus css-tyylistä:
@import "footerStyle.css";
Vaihe 4
Tallenna täydellinen pääsivun koodi tiedostoon, jossa on HTML-laajennus. Se voi näyttää tältä:
Painettu alatunniste
@import "footerStyle.css";
Tässä on sivun pääsisältö.
Sivun alatunniste.
Vaihe 5
Luo tyylitaulukotiedosto - yksinkertainen tekstitiedosto, joka tulisi tallentaa CSS-laajennuksella ja HTML-koodissa määritetyllä nimellä (footerStyle.css). Kirjoita tähän tiedostoon seuraavat tyylikuvaukset sivulla käytetyille lohkoille:
* {marginaali: 0; pehmuste: 0}
html, body {korkeus: 100%;}
runko {
asema: suhteellinen;
väri: # 222222;
}
#OuterDiv {
marginaali: 0;
min-korkeus: 100%;
tausta: #aaaaaa;
väri: # 222222;
}
* html #OuterDiv {korkeus: 100%;}
#FooterDiv {
asema: suhteellinen;
Tyhjennä molemmat;
yläreuna: -60 kuvapistettä;
korkeus: 60px;
leveys: 100%;
taustaväri: Tummansininen;
tekstin tasaus: keskellä;
väri: #eeeeff;
}
. InnerDiv {
leveys: 100%;
kellua: vasen;
}
