Spodnji vodoravni blok postavitve strani se pogosto imenuje "noga". Tudi v njem so, tako kot v druge bloke strani, umeščeni elementi oblikovanja, vendar se za razliko od drugih pri postavitvi tega bloka pogosto pojavijo posebne težave. Povezani so z dejstvom, da različni brskalniki različno razumejo standarde jezika CSS in je lahko precej težko, da je noga na spodnjem robu okna brskalnika. Spodaj je koda ene od rešitev te težave.
Potrebno
Osnovno znanje CSS in HTML
Navodila
Korak 1
V prvo vrstico izvorne kode strani vnesite sklic na prehodno specifikacijo XHTML 1.0:
2. korak
Glavne bloke strukture strani postavite v telo dokumenta (med oznakama in). Blok, v katerega bo umeščena glavna vsebina, mora biti sestavljen iz dveh ugnezdenih plasti. Na primer, zunanji naj ima identifikator OuterDiv, notranji pa InnerDiv:
Tu bo glavna vsebina strani.
Za njimi postavite blok noge z identifikatorjem, na primer FooterDiv:
Noga strani.
3. korak
V glavni del kode HTML (med oznakama in) vstavite povezavo do zunanje datoteke z opisom stilov css:
@import "footerStyle.css";
4. korak
Celotno kodo glavne strani shranite v datoteko s pripono html. To bi lahko izgledalo takole:
Stisnjena noga
@import "footerStyle.css";
Tu bo glavna vsebina strani.
Noga strani.
5. korak
Ustvarite datoteko s slogi - navadno besedilno datoteko, ki jo je treba shraniti s pripono css in imenom, ki ste ga navedli v kodi HTML (footerStyle.css). V to datoteko napišite naslednje slogovne opise blokov, uporabljenih na strani:
* {marža: 0; oblazinjenje: 0}
html, telo {višina: 100%;}
telo {
položaj: sorodnik;
barva: # 222222;
}
#OuterDiv {
marža: 0;
min-višina: 100%;
ozadje: #aaaaaa;
barva: # 222222;
}
* html #OuterDiv {višina: 100%;}
#FooterDiv {
položaj: sorodnik;
jasno: oboje;
margin-top: -60px;
višina: 60px;
širina: 100%;
barva ozadja: DarkBlue;
poravnava besedila: sredina;
barva: #eeeeff;
}
. InnerDiv {
širina: 100%;
plovec: levo;
}
