Бет орналасуының ең төменгі көлденең блогы көбінесе «колонтитул» деп аталады. Онда, парақтың басқа блоктарындағыдай, дизайн элементтері орналастырылған, бірақ басқалардан айырмашылығы, нақты блоктың орналасуымен байланысты белгілі бір проблемалар жиі туындайды. Олар әр түрлі браузерлерде CSS тілінің стандарттарын әр түрлі түсінетіндігімен және төменгі колонтитулдың шолғыш терезесінің төменгі шетінде орналасуымен байланысты болуы мүмкін. Төменде осы мәселені шешудің біреуінің коды көрсетілген.
Қажетті
CSS және HTML туралы негізгі білім
Нұсқаулық
1-қадам
Беттің бастапқы кодының бірінші жолында XHTML 1.0 Transitions сипаттамасына сілтеме жасаңыз:
2-қадам
Бет құрылымының негізгі блоктарын құжат корпусының ішіне орналастырыңыз (және тегтер арасында). Негізгі мазмұн орналастырылатын блок екі кіріктірілген қабаттан тұруы керек. Мысалы, сыртында OuterDiv, ал ішкіінде - InnerDiv идентификаторы болсын:
Бұл жерде парақтың негізгі мазмұны болады.
Олардың артында идентификаторы бар колонтитул блогын орналастырыңыз, мысалы, FooterDiv:
Беттің төменгі деректемесі.
3-қадам
HTML кодының бас бөлігіне (және тегтер арасында) CSS стильдерінің сипаттамасымен сыртқы файлға сілтемені орналастырыңыз:
@import «footerStyle.css»;
4-қадам
Негізгі бет кодын html кеңейтімі бар файлға сақтаңыз. Бұл келесідей болуы мүмкін:
Басылған колонтитул
@import «footerStyle.css»;
Бұл жерде парақтың негізгі мазмұны болады.
Беттің төменгі деректемесі.
5-қадам
Стиль кестесінің файлын жасаңыз - кәдімгі мәтіндік файл, ол CSS кеңейтілімімен және HTML кодында көрсетілген атауымен (footerStyle.css) сақталуы керек. Бұл файлға бетте қолданылатын блоктар үшін келесі стиль сипаттамаларын жазыңыз:
* {маржа: 0; төсеме: 0}
html, денесі {биіктігі: 100%;}
дене {
позиция: салыстырмалы;
түс: # 222222;
}
#OuterDiv {
маржа: 0;
мин-биіктігі: 100%;
фон: #aaaaaa;
түс: # 222222;
}
* html #OuterDiv {биіктігі: 100%;}
#FooterDiv {
позиция: салыстырмалы;
анық: екеуі де;
жоғарғы жиек: -60px;
биіктігі: 60px;
ені: 100%;
фон-түс: DarkBlue;
мәтінмен туралау: орталық;
түсі: #eeeeff;
}
. InnerDiv {
ені: 100%;
қалқымалы: сол жақта;
}
