Пример 3. Создание наложения слоев

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Позиционирование</title><style type="text/css"> #leftcol { position: relative; /* Относительное позиционирование */ float: left; /* Совмещение колонок по горизонтали */ width: 400px; /* Ширина слоя */ background: #800000; /* Цвет фона */ color: white; /* Цвет текста */ } #rightcol { position: relative; /* Относительное позиционирование */ float: left; /* Совмещение колонок по горизонтали */ left: -50px; /* Сдвиг слоя влево */ top: 50px; /* Смещение слоя вниз */ width: 120px; /* Ширина слоя */ background: #e0e0e0; /* Цвет фона */ border: solid 1px black; /* Параметры рамки */ } #leftcol P { padding: 10px; /* Поля вокруг текста */ padding-right: 50px; /* Значение поля справа */ margin: 0; /* Обнуляем значения отступов */ } #rightcol P { padding: 10px; /* Поля вокруг текста */ padding-top: 0 /* Значение поля сверху */ } </style></head><body><div id="leftcol"><p>Левая колонка </p></div><div id="rightcol"><p>Правая колонка</p></div></body></html>

Результат данного примера с другим текстом приведен ниже (рис. 3).

Пример 3. Создание наложения слоев - student2.ru

Рис. 3. Результат действия примера

Элемент div является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

Атрибут «align» - Задает выравнивание содержимого тега div.

Атрибут «title»- Добавляет поясняющий текст к контейнеру div в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается на содержимом.

Задание: набрать код, приведенный ниже. Опытным путем, изменяя значения атрибутов, определить назначение атрибутов и подписать к каждому комментарии.

<html>

<head>

.block1 {

width: 350px;

background: #ccc;

padding: 55px;

padding-right: 70px;

border: dashed 1px black;

float: left;

text-align:justify;

}

.block2 {

width: 350px;

background: #fc0;

padding: 5px;

padding-left: 10px;

border: solid 1px black;

float: left;

position: relative;

top: 40px;

left: -70px;

visibility:visible;

}

</style>

</head>

<body>

</div>

<b>атрибуты:</b><br>

<var>align</var> - Задает выравнивание содержимого тега div.<br>

<var>title</var>- Добавляет поясняющий текст к контейнеру div в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается на содержимом.

</p>

</div>

</body></html>