»Noga« je običajno najnižji del postavitve spletne strani. Najpogostejša težava pri postavljanju te noge je, da je vedno nameščena na dnu okna, ne glede na polnost strani ali vrsto brskalnika. Od časa množičnega prehoda na postavitev blokov je bilo kar nekaj rešitev problema, ena izmed njih pa je navedena spodaj.
Potrebno je
Osnovno znanje CSS in HTML
Navodila
Korak 1
Za osnovo vzemimo najpogostejšo shemo postavitve strani - tri bloke, postavljene enega nad drugim. Zgornji del (glava) mora biti vedno poravnan z zgornjo obrobo okna, spodnji del (noga) - na spodnjo obrobo, glavni del (telo) pa mora vedno zapolniti ves prostor med njimi. Izvorna koda mora vsebovati povezavo do prehodne specifikacije XHTML 1.0, opis slogov pa mora biti v zunanji datoteki CSS (da ne bi prišlo do težav z Opera 9. XX). HTML opis strukture mora biti v glavni telo strani. Začelo se bo seveda od zgornjega bloka, v oznako katerega naj bo umeščen atribut identifikatorja z vrednostjo, na primer divHead:
Blok glave.
Glavni blok naj bo sestavljen iz para ugnezdenih blokov. Zunanji bo dobil identifikator divOut, notranji pa divContent:
Glavna vsebina.
Noga je nastavljena na divFoot:
Noga strani.
2. korak
Celotna koda HTML strani mora biti videti tako:
Trije bloki
@import "style.css";
To je blok glave.
Glavna vsebina.
To je noga strani.
3. korak
Opis sloga izvaja naslednji mehanizem postavitve: srednji blok (divOut) je nastavljen na 100% višino, zgornji blok (divHead) bo imel absolutno pozicioniranje, spodnji pa relativno. V glavnem bloku vsebine (divContent) mora biti na vrhu prosti prostor, enak višini bloka naslova, da ne prekriva glavne vsebine strani. In spodnji blok (noga) bi moral imeti negativni rob na vrhu, enak višini tega bloka. To ga bo dvignilo nad spodnjo obrobo okna brskalnika. Ta mehanizem je mogoče implementirati s pomočjo datoteke css z naslednjo vsebino: * {margin: 0; oblazinjenje: 0}
html, telo {višina: 100%;} telo {
položaj: sorodnik;
barva: # 000;
}
#divOut {
marža: 0;
min-višina: 100%;
ozadje: #FFF;
barva: # 000;
}
* html #divOut {višina: 100%;}
#divHead {
položaj: absolutno;
levo: 0;
zgoraj: 0;
širina: 100%;
višina: 80px;
ozadje: # 2F5000;
preliv: skrit;
poravnava besedila: sredina;
barva: #FFF;
} #divFoot {
položaj: sorodnik;
jasno: oboje;
margin-top: -60px;
višina: 60px;
širina: 100%;
barva ozadja: # 2F5000;
poravnava besedila: sredina;
barva: #FFF;
}
.divContent {
širina: 100%;
plovec: levo;
oblazinjenje: 81 slikovnih pik;
} Ime, ki ste ga navedli za tabelo slogi v kodi HTML, je style.css.
