ВНИМАНИЕ!
13 ФЕВРАЛЯ
СОСТОИТСЯ НАБОР
НА КУРСЫ МЕДИТАЦИИ
МЕДИТАЦИЯ - основное средство развития психики и самопознания. Познать метод, дающий внутреннюю гармонию и раскрывающий внутренние глубины предлагают данные курсы.Верстка
Табличный шаблон с двумя колонками и прибитым книзу подвалом
<!--
В макете с прибитым книзу подвалом убираем доктайп - иначе будут проблемы
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Табличный шаблон с двумя колонками с прибитым книзу подвалом</title>
<style type="text/css">
<!--
html, body {
height:100%; /* задается высота документа */
padding:0;
margin:0; /* убираем отступы и поля */
}
/* параметры для всех таблиц */
table {
table-layout:fixed; /* ширина колонок не меняется */
overflow:hidden; /* то, что больше ширины колонки скрывается */
border-collapse:collapse; /* свертывание границ */
border:1px solid black; /* рамка вокруг таблицы */
padding:0px;
margin:0px; /* убираем отступы и поля для таблиц */
}
/* параметры для всех ячеек таблиц */
table td {
border:1px solid black; /* рамка вокруг ячеек */
padding:0px;
margin:0; /* убираем отступы и поля для таблиц */
vertical-align:top; /* выравнивание содержимого ячеек по верхнему краю */
}
/* параметры основной таблицы */
table.main {
height:100%;
width:700px;
border:1px solid black;
margin:0 auto; /* выравнивание таблицы по центру страницы в современных браузерах */
background-color:#FF0000;
}
/* параметры ячейки заголовка */
td.header {
height:200px;
background-color:#33FF99;
}
/* параметры ячейки подвала */
td.footer {
height:100px;
background-color:#33CCFF;
}
/* параметры таблицы, вложенной в ячейку content */
td.content table.col_tbl {
height:100%;
width:100%;
}
/* параметры левой колонки содержания */
td.content table.col_tbl td.left_col {
background-color:#CCFF99;
width:200px;
}
/* параметры правой колонки содержания */
td.content table.col_tbl td.right_col {
background-color:#99CCFF;
}
-->
</style>
</head>
<body>
<!-- аттрибут -align="center"- нужен для выравнивания основной таблицы по центру в старых версиях эксплорера -->
<table class="main" align="center">
<tr>
<td class="header">header</td>
</tr>
<tr>
<td class="content"><table class="col_tbl">
<tr>
<td class="left_col">left_column</td>
<td class="right_col">right_column</td>
</tr>
</table></td>
</tr>
<tr>
<td class="footer">footer</td>
</tr>
</table>
</body>
</html>
Простой блочный шаблон с фиксированной шириной, прибитым книзу подвалом и выравниванием по центру страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Простой блочный шаблон с фиксированной шириной, прибитым книзу подвалом и выравниванием по центру страницы</title>
<style type="text/css">
<!--
html, body {
padding:0;
margin:0; /* Убираем поля и отступы */
height:100%; /* Высота 100% для экрана */
background:#FFCC99;
text-align:center; /* Выравнивание по центру для IE5 */
}
/* Общий блок */
.wrapper {
width:700px;
min-height: 100%; /* Высота для современных браузеров */
height: auto !important; /* Для современных браузеров, чтобы не игнорировалась высота содержания */
height:100%; /* Высота для IE5 и IE6 */
margin:0 auto -100px auto; /* Поле снизу, по высоте футтера; выравнивание по центру */
background:#fff;
text-align:left; /* Коррекция выравнивания по центру в body */
}
/* Заголовок */
.header {
height:200px;
background:#339999;
}
/* Левая колонка */
.left_col {
width:200px;
background:#CC66CC;
float:left; /* Выравнивание колонки по левому краю */
}
/* Правая колонка */
.right_col {
width:480px;
background:#CC6666;
float:right; /* Выравнивание колонки по правому краю */
}
/* Заставляем wrapper учитывать размеры колонок содержания */
.wrap_clear {
clear:both; /* отчистка флоута */
height:100px; /* Высота футтера, резервируем для него место */
}
/* Подвал */
.footer {
width:700px;
height:100px;
margin:0 auto; /* Выравнивание по центру */
background:#3399CC;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header"> </div>
<!-- header end -->
<div class="left_col">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<!-- left_col end -->
<div class="right_col">
<p>text</p>
<!--
<p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
-->
<p>text5</p>
<p>text4</p>
<p>text3</p>
<p>text2</p>
<p>text1</p>
</div>
<!-- right_col end -->
<div class="wrap_clear"></div>
</div>
<!-- wrapper end -->
<div class="footer"> </div>
<!-- footer end -->
</body>
</html>
Простой двухколоночный шаблон с плавающей шириной содержания
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Простой двухколоночный шаблон с плавающей шириной содержания</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
background:white;
}
.header {
height:150px;
background:#00CCFF
}
.left_column {
width:180px;
background:#CC66FF;
float:left;
padding-top:15px;
}
.right_column {
margin-left:200px;
background:#FF9999;
padding-top:15px;
}
p {
margin:0;
padding:0 0 1.2em 0;
font-size:14px;
}
</style>
</head>
<body>
<div class="header">
<p>header</p>
</div><!-- header end -->
<div class="left_column">
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
</div><!-- left_column end -->
<div class="right_column">
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
</div><!-- right_column end -->
</body>
</html>
Добавляем общую обертку для заголовка и двух колонок, растягиваем ее по всей высоте, добавляем отдельно подвал и получаем:
Простой двухколоночный шаблон с плавающей шириной содержания, высотой на весь экран и прибитым книзу подвалом
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Простой двухколоночный шаблон с плавающей шириной содержания, высотой на весь экран и прибитым книзу подвалом</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
background:red;
height:100%; /* Высота 100% для экрана */
}
.wrapper {
background:#3399CC;
min-height: 100%; /* Высота для современных браузеров */
height: auto !important; /* Для современных браузеров, чтобы не игнорировалась высота содержания */
height:100%; /* Высота для IE5 и IE6 */
margin:0 0 -100px 0; /* Поле снизу, по высоте футтера */
}
.header {
height:150px;
background:#9966CC;
}
.left_column {
width:180px;
background:#CC66FF;
float:left;
}
.content {
margin-left:200px;
background:#00FF99;
}
p {
margin:0;
padding:0 0 1.2em 0;
font-size:14px;
}
.clearer {
clear:both;
height:100px;
}
.footer {
height:100px;
background:#FFCC33;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<p>header</p>
</div><!-- header end -->
<div class="left_column">
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
</div><!-- left_column end -->
<div class="content">
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
</div><!-- content end -->
<div class="clearer"></div>
</div><!-- wrapper end -->
<div class="footer">
</div><!-- footer end -->
</body>
</html>
Добавляем третью колонку и получаем:
Простой трехколоночный шаблон с плавающей шириной содержания, высотой на весь экран и прибитым книзу подвалом
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Простой трехколоночный шаблон с плавающей шириной содержания, высотой на весь экран и прибитым книзу подвалом</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
background:red;
height:100%; /* Высота 100% для экрана */
}
.wrapper {
background:white;
min-height: 100%; /* Высота для современных браузеров */
height: auto !important; /* Для современных браузеров, чтобы не игнорировалась высота содержания */
height:100%; /* Высота для IE5 и IE6 */
margin:0 0 -100px 0; /* Поле снизу, по высоте футтера */
}
.header {
height:150px;
background:#9966CC;
}
.left_column {
width:180px;
background:#CC66FF;
float:left;
}
.right_column {
width:180px;
background:#CC3366;
float:right;
}
.content {
margin: 0 200px 0 200px;
background:#00FF99;
}
p {
margin:0;
padding:0 0 1.2em 0;
font-size:14px;
}
.clearer {
clear:both;
height:100px;
}
.footer {
height:100px;
background:#FFCC33;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<p>header</p>
</div><!-- header end -->
<div class="left_column">
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
</div><!-- left_column end -->
<div class="right_column">
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
</div><!-- right_column end -->
<div class="content">
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
</div><!-- content end -->
<div class="clearer"></div>
</div><!-- wrapper end -->
<div class="footer">
</div><!-- footer end -->
</body>
</html>
Делаем страницу с переменной шириной содержания, висящей по центру:
Трехколоночный шаблон с пременной ограниченной шириной страницы высотой на весь экран и прибитым книзу подвалом
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Трехколоночный шаблон с пременной ограниченной шириной страницы высотой на весь экран и прибитым книзу подвалом</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
background:red;
height:100%; /* Высота 100% для экрана */
}
.wrapper {
background:white;
min-height: 100%; /* Высота для современных браузеров */
height: auto !important; /* Для современных браузеров, чтобы не игнорировалась высота содержания */
height:100%; /* Высота для IE5 и IE6 */
margin:0 auto -100px auto; /* Поле снизу, по высоте футтера; выравнивание по центру */
min-width:760px; /* Минимальная ширина для современных браузеров */
max-width:990px; /* Максимальная ширина для современных браузеров */
}
.header {
height:150px;
background:#9966CC;
}
.left_column {
width:180px;
background:#CC66FF;
float:left;
}
.right_column {
width:180px;
background:#CC3366;
float:right;
}
.content {
margin: 0 200px 0 200px;
background:#00FF99;
}
p {
margin:0;
padding:0 0 1.2em 0;
font-size:14px;
}
.clearer {
clear:both;
height:100px;
}
.footer {
margin:0 auto; /* Выравнивание подвала по центру */
height:100px;
background:#FFCC33;
min-width:760px; /* Минимальная ширина для современных браузеров */
max-width:990px; /* Максимальная ширина для современных браузеров */
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/* Коррекция для IE6 и меньше - постоянная ширина на страницу и подвал */
.wrapper {
width:760px;
}
.footer {
width:760px;
}
</style>
<![endif]-->
</head>
<body>
<div class="wrapper">
<div class="header">
<p>header</p>
</div><!-- header end -->
<div class="left_column">
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
</div><!-- left_column end -->
<div class="right_column">
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
</div><!-- right_column end -->
<div class="content">
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
</div><!-- content end -->
<div class="clearer"></div>
</div><!-- wrapper end -->
<div class="footer">
</div><!-- footer end -->
</body>
</html>
Закрашиваем колонки на всю высоту при помощи рисунка в двухколоночном сайте:
Закрашиваем колонки на всю высоту при помощи двух рисунков в трехколоночном сайте:
Еще один способ разметки - "с отрицательными полями", позволяет контролировать порядок следования плавающих колонок в коде:
Трехколоночный шаблон с фиксированной шириной, высотой на весь экран и прибитым книзу подвалом, сделанный методом "отрицательных полей"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Трехколоночный шаблон с фиксированной шириной, высотой на весь экран и прибитым книзу подвалом, сделанный методом "отрицательных полей"</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
background:red;
height:100%; /* Высота 100% для экрана */
}
/* выравнивание в IE5.5 и меньше с помощью хака "стар эйчтиэмэл" */
* html body {
text-align:center;
}
.wrapper {
width:980px;
background:white;
min-height: 100%; /* Высота для современных браузеров */
height: auto !important; /* Для современных браузеров, чтобы не игнорировалась высота содержания */
height:100%; /* Высота для IE5 и IE6 */
margin:0 auto -100px auto; /* Поле снизу, по высоте футтера */
}
.header {
height:150px;
background:#9966CC;
}
.content {
background:#00FF99;
width:580px;
float:left;
margin-left:200px;
}
/* исправление "ошибки двойного поля" в IE6 и меньше с помощью хака "стар эйчтиэмэл" */
* html .content {
display:inline;
}
.left_column {
width:180px;
background:#CC66FF;
float:left;
margin-left:-780px;
}
.right_column {
width:180px;
background:#CC3366;
float:right;
}
p {
margin:0;
padding:0 0 1.2em 0;
font-size:14px;
}
.clearer {
clear:both;
height:100px;
}
.footer {
width:980px;
height:100px;
background:#FFCC33;
margin:0 auto;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<p>header</p>
</div><!-- header end -->
<div class="content">
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
</div><!-- content end -->
<div class="left_column">
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
</div><!-- left_column end -->
<div class="right_column">
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
</div><!-- right_column end -->
<div class="clearer"></div>
</div><!-- wrapper end -->
<div class="footer">
</div><!-- footer end -->
</body>
</html>
Еще любопытные примеры шаблонов:
http://www.pmob.co.uk/temp/3colfixedtest_explained.htmhttp://www.master-web.info/equal-height-columns-cross-browser-css/