Лабораторная работа 9.11

ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ – HTML-2009

ВЕРСТКА С ПОМОЩЬЮ СЛОЕВ.Две колонки, навигация справа

Лабораторная работа 9.11.

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

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

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

Окончательный код для создания двухколонного макета приведен ниже (sloi_34.html)