Blloku horizontale në pjesën më të ulët të faqosjes shpesh referohet si një "fund i faqes". Në të, si në blloqet e tjera të faqes, vendosen elementë të dizajnit, por ndryshe nga të tjerët, shpesh shfaqen probleme specifike me pozicionimin e këtij blloku të veçantë. Ato janë të lidhura me faktin se shfletues të ndryshëm i kuptojnë standardet e gjuhës CSS ndryshe dhe mund të jetë mjaft e vështirë që fundi të jetë në skajin e poshtëm të dritares së shfletuesit. Më poshtë është kodi për njërën nga zgjidhjet e këtij problemi.
E nevojshme
Njohuri themelore të CSS dhe HTML
Udhëzimet
Hapi 1
Në rreshtin e parë të kodit burimor të faqes, vendosni një referencë në specifikimin Tranzitor XHTML 1.0:
Hapi 2
Vendosni blloqet kryesore të strukturës së faqes brenda trupit të dokumentit (midis etiketave dhe). Blloku në të cilin do të vendoset përmbajtja kryesore duhet të përbëhet nga dy shtresa të vendosura. Për shembull, lini që ai i jashtëm të ketë identifikuesin OuterDiv, dhe atë të brendshmin - InnerDiv:
Këtu do të jetë përmbajtja kryesore e faqes.
Pas tyre vendosni një bllok fundor me një identifikues, për shembull, FooterDiv:
Fundfaqja e faqes.
Hapi 3
Vendosni në pjesën kryesore të kodit HTML (midis etiketave dhe) një lidhje për një skedar të jashtëm me një përshkrim të stileve të css:
@import "footerStyle.css";
Hapi 4
Ruani kodin e plotë të faqes master në një skedar me shtrirjen html. Mund të duket kështu:
Fund i shtypur
@import "footerStyle.css";
Këtu do të jetë përmbajtja kryesore e faqes.
Fundfaqja e faqes.
Hapi 5
Krijoni një skedar stilesh - një skedar teksti të thjeshtë që duhet të ruhet me shtesën css dhe emrin që keni specifikuar në kodin HTML (footerStyle.css). Shkruani në këtë skedar përshkrimet e mëposhtme të stilit për blloqet e përdorura në faqe:
* {diferencë: 0; mbushje: 0}
html, trupi {lartësia: 100%;}
trupi {
pozicioni: relativ;
ngjyra: # 222222;
}
#OuterDiv {
diferencë: 0;
min-lartësia: 100%;
sfondi: #aaaaaa;
ngjyra: # 222222;
}
* html #OuterDiv {lartësia: 100%;}
#FooterDiv {
pozicioni: relativ;
qartë: të dy;
margin-top: -60px;
lartësia: 60px;
gjerësia: 100%;
ngjyra e sfondit: DarkBlue;
rreshtimi i tekstit: qendra;
ngjyra: #eeeeff;
}
. InnerDiv {
gjerësia: 100%;
noton: majtas;
}
