Вам понадобится
  • Начальные знания CSS и HTML
Инструкция
1
За основу возьмем наиболее распространенную схему разметки страницы - три блока, размещенных один над другим. Верхний (header) всегда должен быть прижат к верхней границе окна, нижний (footer) - к нижней границе, а основной (body) должен всегда заполнять все пространство между ними. В исходном коде обязательно должна быть ссылка на спецификацию XHTML 1.0 Transitional, а описание стилей должно быть обязательно помещено во внешний CSS-файл (для исключения проблем с Opera 9.XX).В основное тело страницы надо поместить HTML-описание структуры. Начинаться оно будет, конечно, с верхнего блока, в тег которого должен быть помещен атрибут идентификатора со значением, например, divHead:<div id="divHead">
Заголовочный блок.
</div>Основной блок должен состоять из пары вложенных один в другой блоков. Внешнему дадим идентификатор divOut, а внутреннему - divContent:<div id="divOut">
<div class="divContent">
Основной контент.
</div>
</div>Футеру присвоим идентификатор divFoot:<div id="divFoot">
Подвал страницы.
</div>
2
Полный HTML-код страницы должен выглядеть так:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<head>
<title>Три блока</title>
<style media="all" type="text/css">@import "style.css";</style>
<meta content="text/html; charset=windows-1251" http-equiv="Content-Type" />
</head><body><div id="divHead">
Это заголовочный блок.
</div><div id="divOut">
<div class="divContent">
Основной контент.
</div>
</div><div id="divFoot">
Это подвал страницы.
</div></body>
</html>
3
Описание стилей реализует такой механизм разметки: среднему блоку (divOut) задана высота 100%, верхний блок (divHead) будет иметь абсолютное позиционирование, а нижний - относительное. В блоке основного контента (divContent) должно быть оставлено свободное пространство сверху, равное высоте заголовочного блока, чтобы тот не перекрывал основное содержимое страницы. А нижний блок (футер) должен иметь сверху отрицательный отступ, равный высоте этого блока. Так он будет поднят над нижней границей окна браузера. Реализовать этот механизм можно с помощью css-файла такого содержания:* {margin: 0; padding: 0}
html, body {height: 100%;} body {
position: relative;
color: #000;
}
#divOut {
margin: 0;
min-height: 100%;
background: #FFF;
color: #000;
}
* html #divOut {height: 100%;}
#divHead {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 80px;
background: #2F5000;
overflow: hidden;
text-align: center;
color: #FFF;
}#divFoot {
position: relative;
clear: both;
margin-top: -60px;
height: 60px;
width: 100%;
background-color: #2F5000;
text-align: center;
color: #FFF;
}
.divContent {
width: 100%;
float: left;
padding-top: 81px;
}Указанное вами в HTML-коде имя для файла стилей - style.css.