Kako naj noga dela strani ("noga") ostane pri spodnji meji okna - to je verjetno najpogostejša težava pri postavitvi strani spletnega mesta. Rešitve seveda obstajajo in jih je več. Spodaj je en način, da nogo vedno pritisnete na dno strani, ne glede na količino vsebine in vrsto brskalnika.
Potrebno je
Osnovno znanje CSS in HTML
Navodila
Korak 1
Za primer vzemimo eno bolj tipičnih paginacijskih shem - imela bo podstrešje (glavo), glavni blok in nogo. Seveda lahko po potrebi v glavni blok vstavite več stolpcev, vendar tega tukaj ne bomo storili, osredotočili se bomo le na nepozicioniranje noge. Koda HTML strani se začne z izjavo o specifikaciji:
Med oznake in poleg naslova strani bomo postavili še navedbo kodiranja: kot tudi povezavo do zunanje datoteke CSS, ki vsebuje opis slogov: @import "styles.css"; opis slogov neposredno v html-kodo strani, da se izognete zapletom z brskalnikom Opera devete različice. Med oznakami in postavite blokovno strukturo strani. Prvi je seveda naslovni blok. Dali mu bomo identifikator glave, da bomo lahko nastavili sloge za ta blok:
Ta glava je vedno na vrhu okna.
Nato - glavni blok strani. Sestavljen bo iz dveh ugnezdenih - zunanjega (identifikator - zunanji) in notranjega (identifikator - zunanji ovoj):
To je glavni del.
In končno, noga:
Noga je - vedno na dnu okna!
Celotna stran bo videti tako:
Kako pritisniti nogo
@import "styles.css";
Ta glava je vedno na vrhu okna.
To je glavni del.
Noga je - vedno na dnu okna!
2. korak
Zdaj pa pojdimo na vsebino slogovnega lista. Izvaja naslednjo shemo: blok glavne strani bo nastavljen na 100% višino, naslov bo popolnoma postavljen in noga bo relativno. Da se naslov ne bi prekrival z glavno vsebino strani, je ta glavna vsebina postavljena v dodatno polje znotraj glavnega polja, to dodatno polje pa je nastavljeno na zgornji rob, ki je enak višini polja z naslovom. Noga dobi negativni zgornji rob, ki je enak njegovi višini - na ta način bo dvignjen nad spodnji rob okna v polni višini. Celotna vsebina datoteke css: * {margin: 0; oblazinjenje: 0}
html, telo {višina: 100%;} telo {
barva: črna;
položaj: sorodnik;
}
#outer {
min-višina: 100%;
marža: 0;
ozadje: belo;
barva: črna;
} * html #outer {višina: 100%;}
#header {
položaj: absolutno;
zgoraj: 0;
levo: 0;
širina: 100%;
višina: 70px;
ozadje: # 304a00;
preliv: skrit;
barva: bela;
poravnava besedila: sredina;
} #footer {
položaj: sorodnik;
margin-top: -50px;
jasno: oboje;
širina: 100%;
višina: 50px;
barva ozadja: # 304a00;
barva: bela;
poravnava besedila: sredina;
}
.outerwrap {
plovec: levo;
širina: 100%;
oblazinjenje: 71 slikovnih pik;
} To datoteko je treba shraniti z imenom, ki smo ga določili v html-kodi strani - styles.css.
