Пример 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. Результат действия примера

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

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

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

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

<html>

<head>

<title>Тег DIV</title>

<style type="text/css">

.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 class="block1"><p>

</div>

<div class="block2">

<p align="left">

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

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

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

</p>

</div>

</body></html>