Kako Gurnuti Podnožje Na Dno

Sadržaj:

Kako Gurnuti Podnožje Na Dno
Kako Gurnuti Podnožje Na Dno

Video: Kako Gurnuti Podnožje Na Dno

Video: Kako Gurnuti Podnožje Na Dno
Video: 16 ошибок штукатурки стен. 2024, Novembar
Anonim

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.

Kako gurnuti podnožje na dno
Kako gurnuti podnožje na dno

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;

}

Preporučuje se: