Най-долният хоризонтален блок на оформлението на страницата често се нарича "долен колонтитул". В него, както и в други блокове на страницата, се поставят дизайнерски елементи, но за разлика от други, често възникват специфични проблеми с позиционирането на този конкретен блок. Те са свързани с факта, че различните браузъри разбират по различен начин стандартите на езика 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). Напишете в този файл следните описания на стилове за блоковете, използвани на страницата:
* {поле: 0; подплата: 0}
html, тяло {височина: 100%;}
тяло {
позиция: относителна;
цвят: # 222222;
}
#OuterDiv {
марж: 0;
мин-височина: 100%;
фон: #aaaaaa;
цвят: # 222222;
}
* html #OuterDiv {височина: 100%;}
#FooterDiv {
позиция: относителна;
ясно: и двете;
margin-top: -60px;
височина: 60px;
ширина: 100%;
цвят на фона: DarkBlue;
подравняване на текст: център;
цвят: #eeeeff;
}
. InnerDiv {
ширина: 100%;
плувка: ляво;
}
