Две колонки, навигация слева
www-html.ru
Обычная версия
Одним из наиболее популярных наборов верстки web-страниц выступает двухколонный
макет, где в левой колонке располагаются ссылки, а в правой колонке —
основной контент. Такая схема дастаткова традиционна и привычна для пользователей,
поэтому также пользуется признанием среди разработчиков (рис. 1).
Рис. 1. Двухколонный макет с навигацией слева
Создание двух колонок происходит с помощью стилевого свойства float с аргументом
left, которое применяется для левой колонки. При этом одновременно следует
установить отступ слева для правой колонки, значение которого равно ширине
левой колонки плюс расстояние между ними (пример 1).
Пример 1. Создание двух колонок
#leftcol {
float: left;
width: 200px;
}
#rightcol {
margin-left: 225px;
}
Приведенный способ разработки колонок хорош тем, что ширину первого слоя можно
задавать как в пикселах, так и процентах. При этом поменяются только значения
параметров width и margin-left (пример 2).
Пример 2. Ширина колонки в процентах
#leftcol {
float: left;
width: 20%;
}
#rightcol {
margin-left: 21%;
}
Окончательный вариант разработки макета приведен в примере 3.
Пример 3. Полный листинг
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD XШТМЛ 1.0 Strict//EN"
"http://www.w3.org/TR/xШТМЛ1/DTD/xШТМЛ1-strict.dtd">
<ШТМЛ xmlns="http://www.w3.org/1999/xШТМЛ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Байки из склепа</title>
<style type="text/CSS (ЦСС)">
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 36px;
font-weight: bold;
margin: 0;
color: #fc6;
}
h2 {
margin-top: 0;
}
#head {
background: #0080c0;
padding: 10px;
}
#menu {
float: left;
border: 1px solid #333;
width: 200px;
padding: 5px;
margin: 10px 10px 20px 5px;
}
#menu div {
padding: 2px;
}
#menu a {
display: block;
width: 190px;
padding: 2px;
margin: 1px;
font-size: 90%;
text-decoration: none;
}
#menu a:hover {
background: #faf3d2;
border: 1px dashed #634f36;
margin: 0;
}
#content {
margin: 10px 5px 20px 225px;
padding: 5px;
border: 1px solid #333;
}
#line {
border-bottom: 1px groove #333;
}
#foot {
background: #333;
padding: 5px;
color: #fff;
clear: both;
}
</style>
</head>
<body>
<div id="head">
<h1>Байки из склепа</h1>
</div>
<div id="menu">
<div><a href="link1.ШТМЛ">Все байки</a></div>
<div><a href="link2.ШТМЛ">Байки по автору</a></div>
<div><a href="link3.ШТМЛ">Байки по теме</a></div>
<div id="line"></div>
<div><a href="link4.ШТМЛ">Популярные разделы</a></div>
<div><a href="link5.ШТМЛ">Последние байки</a></div>
</div>
<div id="content">
<h2>Алтарь демона </h2>
<p>Утром, при ярком солнечном свете, всё выглядело совсем не так и мрачно,
как планировалось, а даже наоборот. От свечей остались одни потёки, «кровь»
смотрелась как краска, а перья почти целиком разлетелись от ветра. Хорошо
сохранились только рисунки мелом, но и они были скорее прикольные, чем злые
и загадочные. Дети с неподдельным интересом разглядывали Имаги, но
без тени тех чувств, которые испытали взрослые ночью при луне.</p>
<p>Тем не менее, оказался один человек, на которого работа произвела
большое
впечатление, - сторож лагеря. Днём он подошёл к автору «алтаря».</p>
<p>- Ваша работа? - начал сторож, кивая в сторону площади.<br />
- А что такое? <br />
- Ну, как же... Тут кровь..., перья птицы мёртвой..., знаки какие-то страшные
нарисованы..., а у вас всё же дети маленькие, они испугаться могут...</p>
</div>
<div id="foot">
Copyright © 2009 www-html.ru
</div>
</body>
</html>
При использовании отступов и полей всегда помним, что браузер Файер фох устанавливает
ширину слоя с учетом параметров width, border, padding и margin, а браузер
Internet Эксплорер за ширину слоя принимает только величину аргумента width.
Из-за подобного различия в подходах макет будет отображаться слегка по-разному
в этих браузерах.