Беттің төменгі колонтитулын қалай жасау керек («колонтитул») терезенің төменгі шекарасына жабысып қалуы керек - бұл сайт беттерінің орналасуындағы ең көп кездесетін мәселе шығар. Әрине, шешімдер бар, және олардың бірнеше нұсқасы бар. Төменде колонтитул мазмұнның мөлшері мен шолғыш түріне қарамастан әрдайым беттің төменгі жағына басылғанына көз жеткізудің бір әдісі келтірілген.
Бұл қажетті
CSS және HTML туралы негізгі білім
Нұсқаулық
1-қадам
Мысал ретінде әдеттегі беттеу схемаларының бірін алайық - оның шатырлары (үстіңгі тақтасы), негізгі блогы және төменгі колонтитулдары болады. Әрине, егер қажет болса, сіз негізгі блокқа бірнеше бағандарды қоюға болады, бірақ біз мұнда мұны жасамаймыз, тек колонтитулды орналастырмауға назар аударамыз. Беттің HTML коды спецификацияны жариялаудан басталады:
Тегтер арасында және парақтың тақырыбына қосымша, біз кодтауды көрсетеміз: сонымен қатар стильдердің сипаттамасы бар сыртқы CSS файлына сілтеме: @import «styles.css»; біз оларды орналастырмаймыз тоғызыншы нұсқадағы Opera браузерінде қиындықтарды болдырмау үшін стильдерді парақтың html-кодына тікелей сипаттау, тегтер арасында және беттің блок құрылымын орналастыру. Біріншісі, әрине, тақырып блогы. Осы нақты блок үшін стильдер орнатуға мүмкіндік беретін тақырып идентификаторын береміз:
Бұл тақырып әрдайым терезенің жоғарғы жағында болады.
Содан кейін - парақтың негізгі блогы. Ол екі кіріктірілген - сыртқы (идентификатор - сыртқы) және ішкі (идентификатор - сыртқы орамнан) тұрады:
Бұл негізгі бөлім.
Сонымен, төменгі колонтитул:
Бұл колонтитул - әрқашан терезенің төменгі жағында!
Толық парақ келесідей болады:
Төменгі деректемені қалай басуға болады
@import «styles.css»;
Бұл тақырып әрдайым терезенің жоғарғы жағында болады.
Бұл негізгі бөлім.
Бұл колонтитул - әрқашан терезенің төменгі жағында!
2-қадам
Енді стиль кестесінің мазмұнына көшейік. Ол келесі схеманы жүзеге асырады: негізгі беттік блок 100% биіктікке қойылады, тақырып мүлдем орналастырылады, ал төменгі деректеме салыстырмалы болады. Тақырыптың беттің негізгі мазмұнымен қабаттасуын болдырмау үшін, бұл негізгі мазмұн негізгі қораптың ішіндегі қосымша қорапқа орналастырылады және бұл қосымша қорап айдар өрісінің биіктігіне тең жоғарғы шекараға орнатылады. Ал төменгі колонтитулге оның биіктігіне тең теріс жоғарғы шекара беріледі - осылайша ол терезенің төменгі жиегінен толық биіктікке көтеріледі. CSS файлының толық мазмұны: * {margin: 0; төсеме: 0}
html, дене {биіктігі: 100%;} дене {
түс: қара;
позиция: салыстырмалы;
}
# ойыншы {
мин-биіктігі: 100%;
маржа: 0;
фон: ақ;
түс: қара;
} * html #outer {биіктігі: 100%;}
# тақырып {
позиция: абсолютті;
жоғарғы: 0;
сол жақта: 0;
ені: 100%;
биіктігі: 70px;
фон: # 304a00;
толып кету: жасырын;
түс: ақ;
мәтінмен туралау: орталық;
} #footer {
позиция: салыстырмалы;
margin-top: -50px;
анық: екеуі де;
ені: 100%;
биіктігі: 50px;
өң-түс: # 304a00;
түс: ақ;
мәтінмен туралау: орталық;
}
.outerwrap {
қалқымалы: сол жақта;
ені: 100%;
үстіңгі тақта: 71px;
} Бұл файлды біз парақтың html-кодында көрсеткен атаумен сақтау керек - styles.css.
