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

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

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

просмотрим вариант разработки двухколонного макета с помощью абсолютного позиционирования. При таком варианте одна колонка располагается как обычно, а координаты второй колонки задаются относительно верхнего правого или левого угла окна браузера. Поскольку слой заданный абсолютно накладывается поверх остального содержимого объекта, то под него требуется оставить место путем добавления отступов. На рис. 1 показан вид web-страницы, когда меню располагается в правой колонке, а основной контент — в левой.

Рис. 1

Рис. 1. web-страница с навигацией в правой колонке

Для разработки подобных колонок используем два слоя, стиль которых приведен в примере 1.

Пример 1. Двухколонный макет

<style type="text/CSS (ЦСС)">
#leftcol {
 margin-right: 211px; /* Отступ справа */
}
#rightcol {
 position: absolute; /* Абсолютное позиционирование */
 right: 0; /* Положение от правого края окна */
 top: 30px; /* Положение от верхнего края */
 width: 200px; /* Ширина колонки */
}
</style>

<div id="leftcol">Левая колонка</div>
<div id="rightcol">Правая колонка</div>

Для левой колонки задаем отступ слева через параметр margin-right, он включает в себя ширину правой колонки, ее положение от правого края окна браузера плюс расстояние между колонками. Для правой колонки устанавливаем абсолютное позиционирование с помощью атрибута position: absolute, а положение самого слоя управляется параметрами right и top. Их значения подбираются опытным путем в зависимости от вида макета и желания разработчика.

Нижнее закругление в правой колонке делается при помощи рисунка. Вначале готовим подходящее изображение с прозрачным участком, как показано на рис. 2.

Рис. 2

Рис. 2. Картинка для разработки закругления внизу колонки

Ширина Имаги должна быть несколько больше ширины колонки, это связано с тем, что в разных браузерах ширина колонки может незначительно различаться. Поэтому и требуется сделать небольшой «запас».

Прозрачность, помеченная на рисунке шахматным полем, необходима для быстрого и удобного изменения цвета фона колонки. Зеленым цветом на данном рисунке обозначен цвет фона web-страницы. Чтобы на границе совмещения цветов не возникал паразитный оттенок, рекомендуется отключить сглаживание и установить только два цвета — прозрачный и фона. За счет этого получается характерная «лесенка», которая хорошо заметна при увеличении Имаги (рис. 3).

Рис. 3

Рис. 3. Увеличенный фрагмент картинки

В примере 3 приведен стиль для добавления рисунка к нижней части колонки.

Пример 3. Рисунок в качестве фона

Валидный CSS

#rightcol {
 background:
  #edeed5 /* Цвет фона колонки */
  url(/images/bg.gif) /* Путь к фоновому рисунку */
  bottom right /* Располагаем рисунок по нижнему правому краю слоя */
  no-repeat; /* Отменяем повторение фона */
 padding: 5px; /* Поля вокруг содержимого слоя */
 padding-bottom: 35px; /* Отступ снизу */
}

За счет того, что в рисунке использовалась прозрачность, цвет колонки легко менять через универсальный атрибут background. С помощью него же задается путь к изображению и его положение относительно края слоя. По умолчанию фон повторяется по вертикали и горизонтали, так что требуется отключить эту возможность через аргумент no-repeat. К нижнему краю контента колонки также необходимо добавляем отступ паpaметром padding-bottom, ведь нижняя граница скругленная и контент не должен на нее «наступать».

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

Пример 4. Двухколонный макет

Валидный XHTML
Валидный CSS
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD XШТМЛ 1.1//EN" "http://www.w3.org/TR/xШТМЛ11/DTD/xШТМЛ11.dtd">
<ШТМЛ xmlns="http://www.w3.org/1999/xШТМЛ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>FAQ от Миранды</title>
<style type="text/CSS (ЦСС)">
body {
 font-family: Arial, Helvetica, sans-serif;
 background: #fff;
 margin: 0;
 padding: 0;
}
#head {
 background: #8fa09b;
 font-size: 24pt;
 font-weight: bold;
 color: #edeed5;
 padding: 5px;
 border-bottom: 2px dashed #183533;
}
#content {
 margin-right: 211px;
 padding: 10px;
 border-right: 1px dashed #183533;
}
h2 {
 font-size: 110%;
 color: #752641;
 margin-bottom: 0;
}
#content p {
 margin-top: 0.3em
}
#menu {
 position: absolute;
 right: 0;
 top: 30px;
 width: 200px;
 font-size: 90%;
 background: #edeed5 url(/images/0108_1.gif) bottom right no-repeat;
 padding: 5px;
 padding-bottom: 35px;
}
#foot {
 background: #8fa09b;
 color: #fff;
 padding: 5px;
 border-top: 2px dashed #183533;
}
</style>
</head>
<body>

<div id="head">
FAQ от Миранды
</div>

<div id="content">
<h2>Рома!</h2>
<p>Очистить от ядрышек 2 кг. грецких орехов. Растолочь скорлупу и смешать с фруктами
в 2 литрах рома. Употреблять 3&#8211;4 раза в день.</p>

<h2>Кровавая Мери</h2>
<p>Влить в бокал хорошую 100% кровь по лезвию ножа. Влить водку &laquo;Смирновскую&raquo;.
Пить залпом.</p>

<h2>Червячное пиво</h2>
<p>Сварить на медленном огне воду. Положить в нее небольшого червяка, лучше живого, но сойдет и так, мелко покрошенное яблоко, крылышко мотылька и жабу. Соль и сахар по вкусу. По готовности перелить в бутылки. Хранить в прохладном месте.</p>

<h2>Грог по-рыбацки</h2>
<p>1 рыбу залить кипятком, через 5 минут процедить и добавляем грога. Подавать в чашках.</p>

<h2>Хвангур</h2>
<p>Сварить на медленном огне воду. добавляем в нее хлива и хрольва. Довести до кипения.</p>

<h2>Царская водка</h2>
<p>Смешать 2 части соляной кислоты и 1 часть азотной со льдом. Слить охлажденную смесь в фужер. Пить залпом.</p>

<h2>HotDog</h2>
<p>Тщательно промойте косточки и сварите из них бульон. Подавать горячим.</p>

<h2>Fireball</h2>
<p>В большой бокал положить лед, вылить на него все компоненты и положить кружок лимона.</p>
</div>

<div id="menu">
<a href="link1.ШТМЛ">Популярные FAQ</a><br />
<a href="link2.ШТМЛ">Рецепт дня</a><br />
<a href="link3.ШТМЛ">FAQ на основе яблок</a><br />
<a href="link4.ШТМЛ">FAQ на основе льда</a><br />
<a href="link5.ШТМЛ">FAQ из хлива и хрольва</a>
</div>

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

При создании подобного макета, следует принимать во внимание, что слой с абсолютным позиционированием накладывается поверх остальных элементов объекта. Поэтому в данном примере содержимое правой колонки меньше, чем левой. Иначе меню отобразилось бы поверх «подвала» web-страницы, что выглядит нелогично и некрасиво.

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

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

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

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

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

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

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

background
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

border-bottom
Параметр позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

color
Определяет цвет контента элемента.

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

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

padding-bottom
Устанавливает значение поля от нижнего края содержимого элемента.

position
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на web-странице.

right
Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента.

top
Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента.

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

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

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