Kako učiniti da se podnožje dijela stranice ("podnožje") zalijepi za donju granicu prozora - ovo je vjerojatno najčešći problem u izgledu stranica web mjesta. Postoje, naravno, rješenja, a ima ih nekoliko. Ispod je jedan od načina da se podnožje uvijek pritisne na dno stranice, bez obzira na količinu sadržaja i vrstu preglednika.
Nužno je
Osnovno znanje CSS-a i HTML-a
Upute
Korak 1
Uzmimo za primjer jednu od tipičnijih shema paginacije - 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čet će 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"; Nećemo smjestiti opis stilova izravno 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 je zaglavlje 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:
Podnožje je - uvijek na dnu prozora!
Kompletna stranica izgledat će ovako:
Kako pritisnuti podnožje
@import "styles.css";
Ovo je zaglavlje uvijek na vrhu prozora.
Ovo je glavni dio.
Podnožje je - uvijek na dnu prozora!
Korak 2
Sada prijeđ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. Kako bi se spriječilo da se naslov preklapa s glavnim sadržajem stranice, ovaj se glavni sadržaj postavlja u dodatni okvir unutar glavnog okvira, a ovaj dodatni okvir postavlja se na gornju marginu jednaku visini okvira zaglavlja. I podnožje dobiva negativnu gornju marginu jednaku njegovoj visini - na taj će način biti podignuto iznad donjeg ruba prozora do njegove pune visine. Puni sadržaj css datoteke: * {margin: 0; popunjavanje: 0}
html, tijelo {visina: 100%;} tijelo {
Crna boja;
položaj: relativan;
}
#outer {
min-visina: 100%;
marža: 0;
pozadina: bijela;
Crna boja;
} * html #outer {visina: 100%;}
#Zaglavlje {
položaj: apsolutni;
vrh: 0;
lijevo: 0;
širina: 100%;
visina: 70px;
pozadina: # 304a00;
preljev: skriven;
boja: bijela;
poravnanje teksta: središte;
} #footer {
položaj: relativan;
margin-top: -50px;
jasno: oboje;
širina: 100%;
visina: 50px;
boja pozadine: # 304a00;
boja: bijela;
poravnanje teksta: središte;
}
.outerwrap {
plutaju: lijevo;
širina: 100%;
obloga: 71px;
} Ovu datoteku treba spremiti s imenom koje smo naveli u html-kodu stranice - styles.css.
