Najdonji vodoravni blok izgleda stranice često se naziva "podnožjem". U njemu su, kao i u ostalim blokovima stranice, postavljeni 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 nađe na donjoj ivici prozora pregledača. Ispod je kod za jedno od rješenja ovog problema.
Potrebno
Osnovno znanje CSS-a i HTML-a
Instrukcije
Korak 1
U prvi red 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). Blok u koji će biti smješten 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.
Korak 3
Postavite u glavni dio HTML koda (između oznaka i) vezu do vanjske datoteke s opisom css stilova:
@import "footerStyle.css";
Korak 4
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 ekstenzijom 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:
* {margina: 0; popunjavanje: 0}
html, tijelo {visina: 100%;}
body {
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: sredina;
boja: #eeeeff;
}
. InnerDiv {
širina: 100%;
plutajuće: lijevo;
}
