Kako učiniti da se podnožje dijela stranice ("podnožje") drži donje granice prozora - ovo je vjerovatno najčešći problem u izgledu stranica web mjesta. Postoje, naravno, rješenja, a ima ih nekoliko. Ispod je jedan od načina da osigurate da podnožje uvijek bude pritisnuto na dnu stranice, bez obzira na količinu sadržaja i vrstu pregledača.
Neophodno je
Osnovno znanje CSS-a i HTML-a
Instrukcije
Korak 1
Uzmimo za primjer jednu od tipičnijih paginacijskih shema - imat će potkrovlje (zaglavlje), glavni blok i podnožje. Naravno, ako je potrebno, možete staviti nekoliko stupaca u glavni blok, ali ovdje to nećemo raditi, već ćemo se usredotočiti samo na nepozicioniranje podnožja. HTML kôd stranice započinje deklaracijom specifikacije:
Između oznaka i, pored naslova stranice, stavit ćemo naznaku kodiranja: Kao i vezu do vanjske CSS datoteke koja sadrži opis stilova: @import "styles.css"; opis stilova direktno u html-kod stranice kako bi se izbjegle komplikacije s preglednikom Opera devete verzije. Među oznakama i postavite blokovsku strukturu stranice. Prvi je, naravno, naslovni blok. Dat ćemo mu identifikator zaglavlja kako bi mogao postaviti stilove za ovaj određeni blok:
Ovo zaglavlje je uvijek na vrhu prozora.
Zatim - glavni blok stranice. Sastojat će se od dva ugniježđena - vanjskog (identifikator - vanjski) i unutarnjeg (identifikator - vanjskog omota):
Ovo je glavni dio.
I na kraju, podnožje:
To je podnožje - uvijek na dnu prozora!
Kompletna stranica izgledat će ovako:
Kako pritisnuti podnožje
@import "styles.css";
Ovo zaglavlje je uvijek na vrhu prozora.
Ovo je glavni dio.
To je podnožje - uvijek na dnu prozora!
Korak 2
Sada pređimo na sadržaj tabele stilova. Provodi sljedeću shemu: blok glavne stranice bit će postavljen na 100% visine, naslov će biti apsolutno postavljen, a podnožje će biti relativno. Da bi se spriječilo da se naslov preklapa s glavnim sadržajem stranice, ovaj glavni sadržaj smješta se u dodatni okvir unutar glavnog okvira, a ovaj dodatni okvir postavlja se na gornju marginu jednaku visini okvira naslova. I podnožje dobiva negativnu gornju marginu jednaku njegovoj visini - na taj će način biti podignuto iznad donje ivice prozora do njegove pune visine. Puni sadržaj css datoteke: * {margin: 0; popunjavanje: 0}
html, tijelo {visina: 100%;} tijelo {
boja: crna;
položaj: relativan;
}
#outer {
min-visina: 100%;
marža: 0;
pozadina: bijela;
boja: crna;
} * html #outer {visina: 100%;}
#header {
pozicija: apsolutna;
gore: 0;
lijevo: 0;
širina: 100%;
visina: 70px;
pozadina: # 304a00;
preljev: skriven;
boja: bijela;
poravnanje teksta: sredina;
} #footer {
položaj: relativan;
margin-top: -50px;
jasno: oboje;
širina: 100%;
visina: 50px;
boja pozadine: # 304a00;
boja: bijela;
poravnanje teksta: sredina;
}
.outerwrap {
plutajuće: lijevo;
širina: 100%;
obloga: 71px;
} Ovu datoteku treba sačuvati s imenom koje smo naveli u html-kodu stranice - styles.css.
