„Долен колонтитул“обикновено е най-долният блок на оформлението на уеб страница. Най-често срещаната трудност при позиционирането на този долен колонтитул е да бъде винаги позициониран в долната част на прозореца, независимо от пълнотата на страницата или типа на браузъра. Имаше доста решения на проблема от времето на масовия преход към оформление на блокове и едно от тях е дадено по-долу.
Необходимо е
Основни познания по CSS и HTML
Инструкции
Етап 1
Нека вземем за основа най-често срещаната схема за оформление на страницата - три блока, разположени един над друг. Горната част (заглавната част) винаги трябва да бъде подравнена към горната граница на прозореца, долната (долния колонтитул) - до долната граница, а основната (тялото) трябва винаги да запълва цялото пространство между тях. Изходният код трябва да съдържа връзка към преходната спецификация на XHTML 1.0, а описанието на стиловете трябва да бъде поставено във външен CSS файл (за да се избегнат проблеми с Opera 9. XX). тялото на страницата. Ще започне, разбира се, от горния блок, в тага на който трябва да се постави идентификатор атрибут със стойност, например 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 {
позиция: относителна;
ясно: и двете;
margin-top: -60px;
височина: 60px;
ширина: 100%;
фон-цвят: # 2F5000;
подравняване на текст: център;
цвят: #FFF;
}
.divContent {
ширина: 100%;
плувка: ляво;
подложка: 81px;
} Името, което сте посочили за таблицата със стилове в HTML кода, е style.css.
