Najdonji vodoravni blok izgleda stranice često se naziva "podnožjem". U njega su, kao i u druge blokove stranice, smješteni elementi dizajna, ali za razliku od ostalih, često se javljaju specifični problemi s pozicioniranjem ovog određenog bloka. Povezani su s činjenicom da različiti preglednici različito razumiju standarde CSS jezika i može biti prilično teško postići da se podnožje nalazi na donjem rubu prozora preglednika. Ispod je kod za jedno od rješenja ovog problema.
Potrebno
Osnovno znanje CSS-a i HTML-a
Upute
Korak 1
U prvi redak izvornog koda stranice stavite referencu na XHTML 1.0 Prijelaznu specifikaciju:
Korak 2
Postavite glavne blokove strukture stranice unutar tijela dokumenta (između oznaka i i). Blok u koji će se smjestiti glavni sadržaj mora se sastojati od dva ugniježđena sloja. Na primjer, neka vanjski ima identifikator OuterDiv, a unutarnji - InnerDiv:
Tu će biti glavni sadržaj stranice.
Iza njih stavite blok podnožja s identifikatorom, na primjer FooterDiv:
Podnožje stranice.
3. korak
Postavite u glavni dio HTML koda (između oznaka i) vezu do vanjske datoteke s opisom css stilova:
@import "footerStyle.css";
4. korak
Spremite kompletni kôd glavne stranice u datoteku s HTML nastavkom. To bi moglo izgledati ovako:
Pritisnuto podnožje
@import "footerStyle.css";
Tu će biti glavni sadržaj stranice.
Podnožje stranice.
Korak 5
Stvorite datoteku tabele stilova - običnu tekstualnu datoteku koju treba spremiti s css nastavkom i imenom koje ste naveli u HTML kodu (footerStyle.css). U ovu datoteku napišite sljedeće opise stilova za blokove koji se koriste na stranici:
* {marža: 0; popunjavanje: 0}
html, tijelo {visina: 100%;}
tijelo {
položaj: relativan;
boja: # 222222;
}
#OuterDiv {
marža: 0;
min-visina: 100%;
pozadina: #aaaaaa;
boja: # 222222;
}
* html #OuterDiv {visina: 100%;}
#FooterDiv {
položaj: relativan;
jasno: oboje;
margin-top: -60px;
visina: 60px;
širina: 100%;
boja pozadine: DarkBlue;
poravnanje teksta: središte;
boja: #eeeeff;
}
. InnerDiv {
širina: 100%;
plutaju: lijevo;
}
