"Podnožje" je obično najdonji blok izgleda web stranice. Najčešća poteškoća pri postavljanju ovog podnožja je postizanje da uvijek bude postavljeno na dnu prozora, bez obzira na punoću stranice ili tip pregledača. Bilo je dosta rješenja za problem od vremena masovnog prelaska na raspored blokova, a jedno od njih je dato u nastavku.
Neophodno je
Osnovno znanje CSS-a i HTML-a
Instrukcije
Korak 1
Uzmimo za osnovu najčešće sheme izgleda stranice - tri bloka smještena jedan iznad drugog. Vrh (zaglavlje) uvijek treba poravnati s gornjom granicom prozora, dno (podnožje) - s donjom granicom, a glavno (tijelo) treba uvijek ispuniti sav prostor između njih. Izvorni kod mora sadržavati vezu do XHTML 1.0 prijelazne specifikacije, a opis stilova mora biti smješten u vanjsku CSS datoteku (kako bi se izbjegli problemi s Opera 9. XX). HTML opis strukture mora biti smješten u glavnom tijelo stranice. Započet će, naravno, od gornjeg bloka, u čiju oznaku treba staviti atribut identifikatora s vrijednošću, na primjer, divHead:
Blok zaglavlja.
Glavni blok trebao bi se sastojati od para ugniježđenih blokova. Vanjski će dobiti divOut identifikator, a unutarnji - divContent:
Glavni sadržaj.
Podnožje je postavljeno na divFoot:
Podnožje stranice.
Korak 2
Kompletni HTML kôd stranice trebao bi izgledati ovako:
Tri bloka
@import "style.css";
Ovo je blok zaglavlja.
Glavni sadržaj.
Ovo je podnožje stranice.
Korak 3
Opis stila implementira sljedeći mehanizam izgleda: srednji blok (divOut) postavljen je na 100% visine, gornji blok (divHead) imat će apsolutno pozicioniranje, a donji - relativno. U glavnom bloku sadržaja (divContent) na vrhu mora biti slobodan prostor jednak visini bloka naslova kako se ne bi preklapao s glavnim sadržajem stranice. I donji blok (podnožje) trebao bi imati negativnu marginu na vrhu, jednaku visini ovog bloka. Ovo će ga podići iznad donje granice prozora preglednika. Ovaj mehanizam se može implementirati pomoću css datoteke sa sljedećim sadržajem: * {margin: 0; popunjavanje: 0}
html, tijelo {visina: 100%;} tijelo {
položaj: relativan;
boja: # 000;
}
#divOut {
marža: 0;
min-visina: 100%;
pozadina: #FFF;
boja: # 000;
}
* html #divOut {visina: 100%;}
#divHead {
pozicija: apsolutna;
lijevo: 0;
gore: 0;
širina: 100%;
visina: 80px;
pozadina: # 2F5000;
preljev: skriven;
poravnanje teksta: sredina;
boja: #FFF;
} #divFoot {
položaj: relativan;
jasno: oboje;
margin-top: -60px;
visina: 60px;
širina: 100%;
boja pozadine: # 2F5000;
poravnanje teksta: sredina;
boja: #FFF;
}
.divContent {
širina: 100%;
plutajuće: lijevo;
obloga: 81px;
} Ime koje ste naveli za tabelu stilova u HTML kodu je style.css.
