ßê ïðèòèñíóòè ôóòåð
«ôóòåðîì»Çàçâè÷àé íàçèâàþòü íàéíèæ÷èé áëîê çâåðñòàíî¿ âåá-ñòîð³íêè. Íàéá³ëüø ïîøèðåíà òðóäíîù³ ïîçèö³îíóâàííÿ ö³º¿ ï³äâàëüí³é ÷àñòèí³ - çìóñèòè ¿¿ çàâæäè ðîçì³ùóâàòèñÿ íà íèæí³é ìåæ³ â³êíà íåçàëåæíî â³ä ñòóïåíÿ çàïîâíåíîñò³ ñòîð³íêè ³ òèïó áðàóçåðà. гøåíü ïðîáëåìè ç ÷àñ³â ìàñîâîãî ïåðåõîäó íà áëî÷íó âåðñòêó ïðèäóìàíî äîñèòü áàãàòî ³ îäíà ç íèõ íàâåäåíî íèæ÷å.
Âàì çíàäîáèòüñÿ
- Ïî÷àòêîâ³ çíàííÿ CSS ³ HTML
²íñòðóêö³ÿ
1
Çà îñíîâó â³çüìåìî íàéïîøèðåí³øó ñõåìó ðîçì³òêè ñòîð³íêè - òðè áëîêè, ðîçì³ùåíèõ îäèí íàä ³íøèì. Âåðõí³é (header) çàâæäè ïîâèíåí áóòè ïðèòèñíóòèé äî âåðõíüî¿ ìåæ³ â³êíà, íèæí³é (footer) - äî íèæíüî¿ ìåæ³, à îñíîâíèé (body) ïîâèíåí çàâæäè çàïîâíþâàòè âåñü ïðîñò³ð ì³æ íèìè. Ó âèõ³äíîìó êîä³ îáîâ`ÿçêîâî ìຠáóòè ïîñèëàííÿ íà ñïåöèô³êàö³þ XHTML 1.0 Transitional, à îïèñ ñòèë³â ïîâèííî áóòè îáîâ`ÿçêîâî ïîì³ùåíî â çîâí³øí³é CSS-ôàéë (äëÿ âèêëþ÷åííÿ ïðîáëåì ç Opera 9.XX) . îñíîâíå ò³ëî ñòîð³íêè òðåáà ïîì³ñòèòè HTML-îïèñ ñòðóêòóðè. Ïî÷èíàòèñÿ âîíî áóäå, çâè÷àéíî, ç âåðõíüîãî áëîêó, â òåã ÿêîãî ïîâèíåí áóòè ïîì³ùåíèé àòðèáóò ³äåíòèô³êàòîðà ç³ çíà÷åííÿì, íàïðèêëàä, divHead:
Çàãîëîâíèé áëîê.
Îñíîâíèé êîíòåíò.
Ôóòåðà äàìî ³äåíòèô³êàòîð divFoot:
ϳäâàë ñòîð³íêè.
2
Ïîâíèé HTML-êîä ñòîð³íêè ïîâèíåí âèãëÿäàòè òàê:
òðè áëîêè
Öå çàãîëîâêè áëîê.
Îñíîâíèé êîíòåíò.
Öå ï³äâàë ñòîð³íêè.
3
Îïèñ ñòèë³â ðåàë³çóº òàêèé ìåõàí³çì ðîçì³òêè: Ñåðåäíüîìó áëîêó (divOut) çàäàíà âèñîòà 100%, âåðõí³é áëîê (divHead) ìàòèìå àáñîëþòíå ïîçèö³îíóâàííÿ, à íèæí³é - â³äíîñíå. Ó áëîö³ îñíîâíîãî êîíòåíòó (divContent) ìຠáóòè çàëèøåíî â³ëüíèé ïðîñò³ð çâåðõó, ð³âíó âèñîò³ çàãîëîâêè áëîêó, ùîá òîé íå ïåðåêðèâàâ îñíîâíèé âì³ñò ñòîð³íêè. À íèæí³é áëîê (ôóòåð) ïîâèíåí ìàòè çâåðõó íåãàòèâíèé â³äñòóï, ð³âíèé âèñîò³ öüîãî áëîêó. Òàê â³í áóäå ï³äíÿòèé íàä íèæíüîþ ìåæåþ â³êíà áðàóçåðà. Ðåàë³çóâàòè öåé ìåõàí³çì ìîæíà çà äîïîìîãîþ css-ôàéëó òàêîãî çì³ñòó: * {margin: 0- padding: 0}
html, body {height: 100% -} body {
position: relative;
color: # 000;
}
#divOut {
margin: 0;
min-height: 100%;
background: #FFF;
color: # 000;
}
* Html #divOut {height: 100% -}
#divHead {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 80px;
background: # 2F5000;
overflow: hidden;
text-align: center;
color: #FFF;
} #divFoot {
position: relative;
clear: both;
margin-top: -60px;
height: 60px;
width: 100%;
background-color: # 2F5000;
text-align: center;
color: #FFF;
}
.divContent {
width: 100%;
float: left;
padding-top: 81px;
} Çàçíà÷åíå âàìè â HTML-êîä³ ³ì`ÿ äëÿ ôàéëó ñòèë³â - style.css.
html, body {height: 100% -} body {
position: relative;
color: # 000;
}
#divOut {
margin: 0;
min-height: 100%;
background: #FFF;
color: # 000;
}
* Html #divOut {height: 100% -}
#divHead {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 80px;
background: # 2F5000;
overflow: hidden;
text-align: center;
color: #FFF;
} #divFoot {
position: relative;
clear: both;
margin-top: -60px;
height: 60px;
width: 100%;
background-color: # 2F5000;
text-align: center;
color: #FFF;
}
.divContent {
width: 100%;
float: left;
padding-top: 81px;
} Çàçíà÷åíå âàìè â HTML-êîä³ ³ì`ÿ äëÿ ôàéëó ñòèë³â - style.css.
Ñòàòò³ çà òåìîþ "ßê ïðèòèñíóòè ôóòåð"
Îö³í³òü, áóäü ëàñêà ñòàòòþ
