Blocul orizontal din partea de jos a unui aspect de pagină este adesea denumit „subsol”. În ea, ca și în alte blocuri ale paginii, sunt plasate elemente de design, dar spre deosebire de altele, adesea apar probleme specifice cu poziționarea acestui bloc special. Acestea sunt legate de faptul că diferite browsere înțeleg standardele limbii CSS în mod diferit și poate fi destul de dificil să obțineți subsolul pentru a fi la marginea inferioară a ferestrei browserului. Mai jos este codul pentru una dintre soluțiile la această problemă.
Necesar
Cunoștințe de bază despre CSS și HTML
Instrucțiuni
Pasul 1
În prima linie a codului sursă al paginii, plasați o referință la specificația de tranziție XHTML 1.0:
Pasul 2
Plasați blocurile principale ale structurii paginii în interiorul corpului documentului (între etichete și). Blocul în care va fi plasat conținutul principal trebuie să fie format din două straturi imbricate. De exemplu, lăsați-l pe cel exterior să aibă identificatorul OuterDiv, iar cel interior - InnerDiv:
Aici va fi conținutul principal al paginii.
În spatele lor plasați un bloc de subsol cu un identificator, de exemplu, FooterDiv:
Subsolul paginii.
Pasul 3
Plasați în partea principală a codului HTML (între etichete și) un link către un fișier extern cu o descriere a stilurilor CSS:
@import "footerStyle.css";
Pasul 4
Salvați codul complet al paginii master într-un fișier cu extensia html. Ar putea arăta astfel:
Subsol apăsat
@import "footerStyle.css";
Aici va fi conținutul principal al paginii.
Subsolul paginii.
Pasul 5
Creați un fișier de foaie de stil - un fișier text simplu care ar trebui să fie salvat cu extensia CSS și numele pe care l-ați specificat în codul HTML (footerStyle.css). Scrieți în acest fișier următoarele descrieri de stil pentru blocurile utilizate în pagină:
* {margin: 0; umplutură: 0}
html, corp {înălțime: 100%;}
corp {
poziție: relativă;
culoare: # 222222;
}
#OuterDiv {
marja: 0;
min-înălțime: 100%;
fundal: #aaaaaa;
culoare: # 222222;
}
* html #OuterDiv {înălțime: 100%;}
#FooterDiv {
poziție: relativă;
clar: ambele;
margin-top: -60px;
înălțime: 60px;
lățime: 100%;
culoare de fundal: Albastru închis;
text-align: centru;
culoare: #eeeeff;
}
. InnerDiv {
lățime: 100%;
plutește la stânga;
}
