ßê ïðèòèñíóòè footer äî íèçó
Íàéíèæ÷èé ãîðèçîíòàëüíèé áëîê çâåðñòàíî¿ ñòîð³íêè ÷àñòî íàçèâàþòü «ôóòåðîì» (footer). Ó íüîìó, ÿê ³ â ³íøèõ áëîêàõ ñòîð³íêè, ðîçì³ùóþòüñÿ åëåìåíòè äèçàéíó, àëå íà â³äì³íó â³ä ³íøèõ ç ïîçèö³îíóâàííÿì ñàìå öüîãî áëîêó íàé÷àñò³øå âèíèêàþòü ñïåöèô³÷í³ ïðîáëåìè. Ïîâ`ÿçàí³ âîíè ç òèì, ùî ð³çí³ áðàóçåðè ïî-ð³çíîìó ðîçóì³þòü ñòàíäàðòè ìîâè CSS ³ áóâຠäîñèòü âàæêî çìóñèòè ôóòåð ïåðåáóâàòè ó íèæíüîãî êðàþ â³êíà áðàóçåðà. Íèæ÷å íàâåäåíî êîä îäíîãî ç âàð³àíò³â âèð³øåííÿ ö³º¿ ïðîáëåìè.
Âàì çíàäîáèòüñÿ
- Ïî÷àòêîâ³ çíàííÿ CSS ³ HTML
²íñòðóêö³ÿ
1
Ïîì³ñò³òü â ñàì³é ïåðøîìó ðÿäêó âèõ³äíîãî êîäó ñòîð³íêè âêàç³âêó íà ñïåöèô³êàö³þ XHTML 1.0 Transitional:
2
Äîäàéòå âñåðåäèí³ ò³ëà äîêóìåíòà (ì³æ òåãàìè ³ ) Îñíîâí³ áëîêè ñòðóêòóðè ñòîð³íêè. Áëîê, â ÿêèé áóäå ïîì³ùåíèé îñíîâíèé êîíòåíò, ïîâèíåí ñêëàäàòèñÿ ç äâîõ âêëàäåíèõ øàð³â. Íàïðèêëàä, çîâí³øí³é íåõàé ìຠ³äåíòèô³êàòîð OuterDiv, à âíóòð³øí³é - InnerDiv:
Òóò áóäå îñíîâíèé êîíòåíò ñòîð³íêè.
Çà íèìè ðîçì³ñò³òü áëîê ôóòåðà ç ³äåíòèô³êàòîðîì, íàïðèêëàä, FooterDiv:
Footer ñòîð³íêè.
3
Ïîì³ñò³òü â çàãîëîâíó ÷àñòèíó HTML-êîäó (ì³æ òåãàìè ³ ) Ïîñèëàííÿ íà çîâí³øí³é ôàéë ç îïèñîì css-ñòèë³â:
4
Çáåðåæ³òü â ôàéë ç ðîçøèðåííÿì html ïîâíèé êîä ñòîð³íêè-çðàçêà. ³í ìîæå âèãëÿäàòè, íàïðèêëàä, òàê:
Òóò áóäå îñíîâíèé êîíòåíò ñòîð³íêè.
Footer ñòîð³íêè.
5
Ñòâîð³òü ôàéë ñòèë³â - çâè÷àéíèé òåêñòîâèé ôàéë, ÿêèé ñë³ä çáåðåãòè ç ðîçøèðåííÿì css, ³ ³ì`ÿì, çàçíà÷åíèì âàìè â HTML-êîä³ (footerStyle.css). Çàïèø³òü â öåé ôàéë òàê³ îïèñè ñòèë³â äëÿ áëîê³â, âèêîðèñòàíèõ â ñòîð³íö³:
* {Margin: 0- padding: 0}
* {Margin: 0- padding: 0}
html, body {height: 100% -}
body {
position: relative;
color: # 222222;
}
#OuterDiv {
margin: 0;
min-height: 100%;
background: #aaaaaa;
color: # 222222;
}
* Html #OuterDiv {height: 100% -}
#FooterDiv {
position: relative;
clear: both;
margin-top: -60px;
height: 60px;
width: 100%;
background-color: DarkBlue;
text-align: center;
color: #eeeeff;
}
.InnerDiv {
width: 100%;
float: left;
}
Ñòàòò³ çà òåìîþ "ßê ïðèòèñíóòè footer äî íèçó"
Îö³í³òü, áóäü ëàñêà ñòàòòþ
