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

Фиксированный дизайн. Позиционирование

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

Кроме использования параметра float для размещения рядом по горизонтали двух и более слоев, для этой же цели применяется и параметр position. Сложно оценить, какой подход с применением этих параметров лучше, если они в итоге дают одинаковый результат. Однако у позиционирования заведомо больший потенциал, позволяющий не только располагать слои рядом, но и накладывать их друг на друга. С помощью таких «перекрытий» можно создать выразительный дизайн web-страниц простыми средствами.

Координаты слоя

Положение слоя в файле зависит от заданных значений стилевых атрибутов left, top, right и bottom, они устанавливают соответственно позицию слоя слева, сверху, справа и снизу. Точка отсчета определяется от параметра position, который принимает обычно значение relative (относительное положение) или absolute (абсолютное положение).

При абсолютном позиционировании слой располагается относительно родительского элемента или окна браузера, если родитель не задан, как показано на рис. 1.

Рис. 1

Рис. 1. Положение слоя относительно окна браузера

В случае использования относительного позиционирования, координаты отсчитываются от исходного положения слоя (рис. 2). Здесь пунктиром выделено первоначальное положение слоя, а сплошной линией результат его перемещения.

Рис. 2

Рис. 2. Положение слоя относительно исходного положения

Положительные значения параметра left сдвигают слой вправо, отрицательные — влево. С параметром right дело обстоит наоборот, положительные значения этого атрибута смещают слой влево, а отрицательные — вправо. Аналогичная ситуация и с парой top/bottom. Значения со знаком минус параметра top поднимают слой вверх, а положительные значения опускают слой вниз. Аргумент bottom же действует с точностью наоборот.

Заметим, что указание параметра position без упоминания координат (атрибутов left, top, right или bottom) не меняет положение текущего слоя, но оказывает влияние на расположение близлежащих слоев.

Размещение двух слоев

При размещении двух слоев рядом по горизонтали, левому слою необходимо задать абсолютное положение, а правому — относительное (пример 1). Это наиболее универсальный подход, который гарантирует, что слои будут позиционированы правильно относительно друг друга и окна браузера. При этом не имеет значения, как будет располагаться макет — по левоой стороне или по центру окна — слои не изменят своего положения. Обязательно следует сместить правый слой (в примере он имеется ввиду rightcol) по горизонтали с помощью параметра left на величину, равную ширине левого слоя. В противном случае слои будут накладываться друг на друга.

Пример 1. Размещение двух слоев

Валидный HTML
Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Позиционирование</title>
<style type="text/CSS (ЦСС)">
#leftcol {
 position: absolute; /* Абсолютное позиционирование */
 width: 200px; /* Ширина слоя */
 background: #800000; /* Цвет фона */
 color: white; /* Цвет контента */
}

#rightcol {
 position: relative; /* Относительное позиционирование */
 left: 200px; /* Смещаем слой вправо на ширину левого слоя */
 width: 550px; /* Ширина слоя */
 background: #e0e0e0; /* Цвет фона */
 padding: 10px; /* Поля вокруг контента */
}
</style>
</head>
<body>

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

</body>
</html>

Несмотря на простоту решения, в данном случае следует учесть несколько моментов.

Пример 2. Поля внутри слоя

Валидный HTML
Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Позиционирование</title>
<style type="text/CSS (ЦСС)">
#leftcol {
 position: absolute; width: 200px; background: #800000; color: white;
}

#leftcol div {
 padding: 10px; /* Поля вокруг контента в левой колонке */
}

#rightcol {
 position: relative; left: 200px; width: 550px; background: #e0e0e0;
}

#rightcol div {
 padding: 10px; /* Поля вокруг контента в правой колонке */
}
</style>
</head>
<body>

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

</body>
</html>

Резюме

Позиционирование слоев предполагает использование стилевого параметра position, который задает, относительно каких координат ведется положение слоя. Для аргумента absolute за основу берется родительский элемент или окно браузера, относительно границ которого и указывается, где должен располагаться слой на web-странице. Аргумент relative задает смещение слоя относительно его исходного расположения.

Сочетая для двух слоев значения параметра position и устанавливая слоям новое положение, можно формировать макет web-страницы, состоящий из двух и более колонок. Причем можно управлять процессом наложения слоев друг на друга, получая таким образом интересные дизайнерские эффекты

Статья опубликована: 05.04.2009 Последнее обновление: 01.05.2009
Поиск по сайту
Верстка с помощью слоев
Разделы
Теги по теме

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

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

bottom
Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).

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

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

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

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

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

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

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

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