"Podnožje" je obično najdonji blok izgleda web stranice. Najčešća poteškoća pri postavljanju ovog podnožja jest da se uvijek postavi na dno prozora, bez obzira na puninu stranice ili vrstu preglednika. Bilo je prilično rješenja za problem od vremena masovnog prijelaza na raspored blokova, a jedno od njih je dano u nastavku.
Nužno je
Osnovno znanje CSS-a i HTML-a
Upute
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) uvijek treba ispuniti sav prostor između njih. Izvorni kod mora sadržavati vezu na XHTML 1.0 Prijelaznu specifikaciju, 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.
3. korak
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. To će ga podići iznad donje granice prozora preglednika. Ovaj se mehanizam 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 {
položaj: apsolutni;
lijevo: 0;
vrh: 0;
širina: 100%;
visina: 80px;
pozadina: # 2F5000;
preljev: skriven;
poravnanje teksta: središte;
boja: #FFF;
} #divFoot {
položaj: relativan;
jasno: oboje;
margin-top: -60px;
visina: 60px;
širina: 100%;
boja pozadine: # 2F5000;
poravnanje teksta: središte;
boja: #FFF;
}
.divContent {
širina: 100%;
plutaju: lijevo;
obloga: 81px;
} Ime koje ste naveli za tablicu stilova u HTML kodu je style.css.
