www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Примеры верстки слоями > Две колонки, навигация слева

Две колонки, навигация слева

контентовая версия  

Одним из наиболее популярных наборов верстки web-страниц выступает двухколонный макет, где в левой колонке располагаются ссылки, а в правой колонке — основной контент. Такая схема дастаткова традиционна и привычна для пользователей, поэтому также пользуется признанием среди разработчиков (рис. 1).

Рис. 1

Рис. 1. Двухколонный макет с навигацией слева

Создание двух колонок происходит с помощью стилевого свойства float с аргументом left, которое применяется для левой колонки. При этом одновременно следует установить отступ слева для правой колонки, значение которого равно ширине левой колонки плюс расстояние между ними (пример 1).

Пример 1. Создание двух колонок

Валидный CSS

#leftcol { /* Левая колонка */
 float: left; /* Обтекание справа */
 width: 200px; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
 margin-left: 225px; /* Отступ слева */
}

Приведенный способ разработки колонок хорош тем, что ширину первого слоя можно задавать как в пикселах, так и процентах. При этом поменяются только значения параметров width и margin-left (пример 2).

Пример 2. Ширина колонки в процентах

Валидный CSS

#leftcol { /* Левая колонка */
 float: left; /* Обтекание справа */
 width: 20%; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
 margin-left: 21%; /* Отступ слева */
}

Окончательный вариант разработки макета приведен в примере 3.

Пример 3. Полный листинг

Валидный XHTML
Валидный CSS
<!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=windows-1251" />
<title>Байки из склепа</title>
<style type="text/CSS (ЦСС)">
body {
 font-family: Arial, Helvetica, sans-serif; /* Рубленый шрифт контента */
 margin: 0; /* Отступы для браузера IE */
 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; /* Ширина ссылки для браузера IE */
 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>Тем не менее, оказался один человек, на которого работа произвела большое впечатление, - сторож лагеря. Днём он подошёл к автору &laquo;алтаря&raquo;.</p>
<p>- Ваша работа? - начал сторож, кивая в сторону площади.<br />
- А что такое? <br />
- Ну, как же... Тут кровь..., перья птицы мёртвой..., знаки какие-то страшные нарисованы..., а у вас всё же дети маленькие, они испугаться могут...</p>
</div>

<div id="foot">
Copyright &copy; 2009 www-html.ru
</div>
</body>
</html>

При использовании отступов и полей всегда помним, что браузер Файер фох устанавливает ширину слоя с учетом параметров width, border, padding и margin, а браузер Internet Эксплорер за ширину слоя принимает только величину аргумента width. Из-за подобного различия в подходах макет будет отображаться слегка по-разному в этих браузерах.

Статья опубликована: 11.05.2009 Последнее обновление: 04.04.2009
Поиск по сайту
Примеры верстки слоями
Разделы
Теги по теме

A
Тег A является одним из важных элементов ШТМЛ и предназначен для разработки ссылок. В зависимости от присутствия параметров name или href тег A устанавливает ссылку или якорь.

DIV
Элемент DIV является блочным элементом и предназначен для выделения фрагмента объекта с целью изменения вида содержимого.

H1...H6
ШТМЛ предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег H1 представляет собой наиболее важный заголовок первого уровня, а тег H6 служит для обозначения заголовка шестого уровня и является наименее значительным.

P
Определяет контентовый параграф. Тег P является блочным элементом, перед ним всегда добавляется пустая строка, параграфы контента идущие друг за другом разделяются между собой вертикальным промежутком.

STYLE
Тег STYLE применяется для определения стилей элементов web-страницы.

CSS (ЦСС) по теме

float
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.

font-family
Устанавливает семейство шрифта, которое будет использоваться для оформления контента содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой.

margin
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

margin-left
Устанавливает величину отступа от левого края элемента.

padding
Устанавливает значение полей вокруг содержимого элемента. Полем имеется ввиду расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

width
Устанавливает ширину блочных или заменяемых элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект