„Footer” este, de obicei, blocul din partea de jos a unui aspect de pagină web. Cea mai frecventă dificultate în poziționarea acestui subsol este de a face ca acesta să fie întotdeauna poziționat în partea de jos a ferestrei, indiferent de plenitudinea paginii sau de tipul browserului. Au existat destul de multe soluții la problemă de la momentul tranziției masive la aspectul blocului, iar una dintre ele este prezentată mai jos.
Este necesar
Cunoștințe de bază despre CSS și HTML
Instrucțiuni
Pasul 1
Să luăm cea mai obișnuită schemă de aspect de pagină ca bază - trei blocuri așezate unul deasupra celuilalt. Partea superioară (antetul) trebuie întotdeauna aliniată la marginea superioară a ferestrei, partea inferioară (subsolul) - la marginea inferioară, iar partea principală (corpul) trebuie să umple întotdeauna tot spațiul dintre ele. Codul sursă trebuie să conțină un link către specificația de tranziție XHTML 1.0, iar descrierea stilurilor trebuie plasată într-un fișier CSS extern (pentru a evita problemele cu Opera 9. XX). Descrierea HTML a structurii trebuie plasată în corpul paginii. Va începe, bineînțeles, de la blocul de sus, în eticheta căruia ar trebui plasat un atribut de identificare cu o valoare, de exemplu, divHead:
Bloc antet.
Blocul principal ar trebui să fie format dintr-o pereche de blocuri imbricate. Cel exterior va primi identificatorul divOut, iar cel interior - divContent:
Conținut principal.
Subsolul este setat să divFoot:
Subsol de pagină.
Pasul 2
Codul HTML complet al paginii ar trebui să arate astfel:
Trei blocuri
@import "style.css";
Acesta este un bloc antet.
Conținut principal.
Acesta este subsolul paginii.
Pasul 3
Descrierea stilului implementează următorul mecanism de dispunere: blocul din mijloc (divOut) este setat la 100% înălțime, blocul superior (divHead) va avea poziționare absolută, iar cel inferior - relativ. În blocul principal de conținut (divContent), trebuie să existe un spațiu liber în partea de sus egal cu înălțimea blocului de titlu, astfel încât să nu se suprapună conținutului principal al paginii. Și blocul inferior (subsol) ar trebui să aibă o marjă negativă în partea de sus, egală cu înălțimea acestui bloc. Aceasta îl va ridica deasupra marginii de jos a ferestrei browserului. Acest mecanism poate fi implementat folosind un fișier css cu următorul conținut: * {margin: 0; umplutură: 0}
html, corp {înălțime: 100%;} corp {
poziție: relativă;
culoare: # 000;
}
#divOut {
marja: 0;
min-înălțime: 100%;
fundal: #FFF;
culoare: # 000;
}
* html #divOut {înălțime: 100%;}
#divHead {
poziție: absolută;
stânga: 0;
sus: 0;
lățime: 100%;
înălțime: 80px;
fundal: # 2F5000;
overflow: ascuns;
text-align: centru;
culoare: #FFF;
} #divFoot {
poziție: relativă;
clar: ambele;
marginea-sus: -60px;
înălțime: 60px;
lățime: 100%;
culoare de fundal: # 2F5000;
text-align: centru;
culoare: #FFF;
}
.divContent {
lățime: 100%;
plutește la stânga;
tapițerie: 81px;
} Numele pe care l-ați specificat pentru foaia de stil din codul HTML este style.css.
