Добрый день.

На сайте новая статья в разделе Рецепты HTML - Создание паспарту. Для тех, кто не знает - паспарту называется картонная рамка для фотографии или рисунка. В данном случае, этим термином обозначается прямоугольная цветная область вокруг изображения, поскольку имитировать картонную рамку нужды на веб-странице все равно нет.

Сегодня продолжение темы о верстке слоями и фиксированном дизайне. Данная статья пока не выложена на сайт, она, по-видимому, еще будет дополняться. Напоминаю, что данная статья является продолжением цикла, посвященного верстке с помощью слоев. Предыдущие статьи можно почитать на сайте, они напрямую связаны с данным материалом.
Фиксированный дизайн
Фиксированный дизайн. Часть 2

Фиксированный дизайн. Часть 3

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

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

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

При абсолютном позиционировании слой размещается относительно левого верхнего угла окна документа с помощью параметров left и top (рис. 1).

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

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

Рис. 2. Положение слоя относительно родительского элемента

Параметр relative используется для смещения слоя относительно родительского элемента, как показано на рис. 2. Установка этого значения не изменяет размещение элемента, но если установлены значения свойств top или left, то слой смещается от своего нормального положения в документе.

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

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

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

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

Положение правого слоя content зависит от значения параметра стиля left, он в данном случае должен равняться ширине левого слоя, в этом случае слои будут плотно прилегать между собой. Впрочем, ничего не мешает изменять этот параметр в большую или меньшую сторону. Тогда между слоями появится разделительная полоса или наоборот, слои станут накладываться друг на друга.

Параметр padding, добавляющий поля вокруг текста, если его использовать в стиле левого слоя menu, вносит искажения в макет страницы для браузера Opera. Чтобы устранить этот недостаток, атрибут padding следует применить к стилю параграфа, который должен располагаться внутри слоя.