«Төменгі колонтитул» әдетте веб-парақ орналасуының ең төменгі блогы болып табылады. Бұл төменгі деректемені орналастырудағы ең көп кездесетін қиындық - бұл беттің толықтығына немесе шолғыш түріне қарамастан, оны әрдайым терезенің төменгі жағында орналастыру. Блокты орналастыруға жаппай көшу кезеңінен бастап проблеманы шешудің бірнеше нұсқалары болды және олардың бірі төменде келтірілген.
Бұл қажетті
CSS және HTML туралы негізгі білім
Нұсқаулық
1-қадам
Беттің орналасуының ең кең таралған схемасын негізге алайық - бір-бірінен жоғары орналасқан үш блок. Үстіңгі жағы (үстіңгі деректеме) әрқашан терезенің жоғарғы шекарасына, төменгі жағы (төменгі колонтитул) төменгі шекарасына туралануы керек, ал негізгі (корпус) әрқашан олардың арасындағы барлық кеңістікті толтыруы керек. Бастапқы кодта XHTML 1.0 өтпелі спецификациясына сілтеме болуы керек және стильдердің сипаттамасы сыртқы CSS файлына орналастырылуы керек (Opera 9. XX ақауларын болдырмау үшін).. Құрылымның HTML сипаттамасы негізгі парақтың негізгі бөлігі. Ол, әрине, жоғарғы блоктан басталады, оның мәніне идентификатор атрибутын қою керек, мысалы, divHead:
Үстіңгі блок.
Негізгі блок кірістірілген жұптан тұруы керек. Сыртқысына divOut идентификаторы беріледі, ал ішкіге - divContent:
Негізгі мазмұн.
Төменгі деректеме divFoot-қа орнатылды:
Беттің төменгі деректемесі.
2-қадам
Беттің толық HTML коды келесідей болуы керек:
Үш блок
@import «style.css»;
Бұл тақырып блогы.
Негізгі мазмұн.
Бұл беттің төменгі колонтитулы.
3-қадам
Стиль сипаттамасы келесі орналасу механизмін жүзеге асырады: орта блок (divOut) 100% биіктікке орнатылған, жоғарғы блок (divHead) абсолютті позицияға ие болады, ал төменгісі - салыстырмалы. Негізгі мазмұн блогында (divContent) парақтың негізгі мазмұнымен қабаттаспауы үшін жоғарғы бөлігінде тақырып блогының биіктігіне тең бос орын болуы керек. Ал төменгі блоктың (колонтитулдың) жоғарғы жағында осы блоктың биіктігіне тең теріс шегі болуы керек. Бұл оны шолғыш терезесінің төменгі шекарасынан жоғары көтереді. Бұл механизмді келесі мазмұндағы css файлы арқылы жүзеге асыруға болады: * {margin: 0; төсеме: 0}
html, дене {биіктігі: 100%;} дене {
позиция: салыстырмалы;
түс: # 000;
}
#divOut {
маржа: 0;
мин-биіктігі: 100%;
өң: #FFF;
түс: # 000;
}
* html #divOut {биіктігі: 100%;}
#divHead {
позиция: абсолютті;
сол жақта: 0;
жоғарғы: 0;
ені: 100%;
биіктігі: 80px;
фон: # 2F5000;
толып кету: жасырын;
мәтінмен туралау: орталық;
түс: #FFF;
} #divFoot {
позиция: салыстырмалы;
анық: екеуі де;
жоғарғы жиек: -60px;
биіктігі: 60px;
ені: 100%;
өң-түс: # 2F5000;
мәтінмен туралау: орталық;
түс: #FFF;
}
.divContent {
ені: 100%;
қалқымалы: сол жақта;
үстіңгі тақта: 81px;
} HTML-кодта сіз стильдер кестесі үшін көрсеткен атыңыз style.css болып табылады.
