Барактын жайгашуусунун эң төмөнкү горизонталдык блогу көбүнчө "колонтитул" деп аталат. Анда, барактын башка блокторундагыдай эле, дизайн элементтери жайгаштырылган, бирок башкалардан айырмаланып, белгилүү бир блоктун жайгашуусунда өзгөчө көйгөйлөр жаралат. Алар ар кандай браузерлердин CSS тилинин стандарттарын ар башкача түшүнгөндүгүнө байланыштуу жана төмөнкү колонтитулду браузердин терезесинин төмөнкү четине жайгаштыруу кыйынга турушу мүмкүн. Төмөндө бул көйгөйдү чечүү жолдорунун биринин коду келтирилген.
Зарыл
CSS жана HTML боюнча негизги билим
Нускамалар
1 кадам
Баракчанын баштапкы кодунун биринчи сабына XHTML 1.0 өткөөл спецификациясына шилтеме коюңуз:
2-кадам
Барактын түзүлүшүнүн негизги блокторун документтин корпусунун ичине жайгаштырыңыз (жана тегдердин ортосунда). Негизги мазмун жайгаштырыла турган блок эки уяланган катмардан турушу керек. Мисалы, сырткы бөлүгүндө OuterDiv, ал эми ички тарабында - InnerDiv идентификатору болсун.
Бул жерде баракчанын негизги мазмуну болот.
Алардын артына идентификатору менен колонтитул блогун коюңуз, мисалы, FooterDiv:
Барактын колонтитулу.
3-кадам
HTML кодунун баш бөлүгүнө (жана тегдердин ортосунда) CSS стилдеринин сүрөттөмөсү менен тышкы файлга шилтемени коюңуз:
@import "footerStyle.css";
4-кадам
Толук мастер-баракчанын кодун html кеңейтүүсү бар файлга сактаңыз. Бул төмөнкүдөй көрүнүшү мүмкүн:
Басылган колонтитул
@import "footerStyle.css";
Бул жерде баракчанын негизги мазмуну болот.
Барактын колонтитулу.
5-кадам
Стилдик таблица файлын түзүңүз - CSS кеңейтүүсү жана HTML кодунда көрсөтүлгөн ат менен сакталышы керек болгон жөнөкөй тексттик файл (footerStyle.css). Бул файлга баракта колдонулган блоктор үчүн төмөнкү стил сүрөттөөлөрүн жазыңыз:
* {margin: 0; толтуруу: 0}
html, тулку {бой: 100%;}
дене
кызмат: салыштырмалуу;
color: # 222222;
}
#OuterDiv {
margin: 0;
мин бийиктиги: 100%;
background: #aaaaaa;
color: # 222222;
}
* html #OuterDiv {бийиктик: 100%;}
#FooterDiv {
кызмат: салыштырмалуу;
ачык: экөө тең;
margin-top: -60px;
бийиктиги: 60px;
туурасы: 100%;
фон-түс: DarkBlue;
текстке тегиздөө: борбор;
color: #eeeeff;
}
. InnerDiv {
туурасы: 100%;
калкуу: сол;
}
