Веб Навсегда.инфоHTML-теги → DIV

Реклама


!!! Ваша ссылка здесь всего за 10 руб в месяц на всех страницах сайта!!!

DIV

Описание элемента

Один из основных и распространённых тегов. Этот тег составляет основу верстки слоями (блочной верстки)

Итак, сам DIV, как вы уже поняли, элемент блочный. Т.е. до и после него добавляется переход на новую строку.

Очень часто к этому тегу применяют различные CSS стили, чтобы настроить его положение на странице и внешний вид.

Синтаксис

<div {align title}={"выравнивание" | "подсказка"}>Часть страницы</div>

Возможные параметры

align - выравнивание по горизонтали.

title - добавляет всплывающую подсказку.

Параметр ALIGN

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

Возможные аргументы:
left
 - выравнивание по левому краю
right - выравнивание по правому краю
center - выравнивание по центру.
justify - выравнивание по ширине. Т.е. выравнивание происходит по левому и правому краям, а для форматирования между словами автоматически добавляются дополнительные пробелы.

Значение по умолчанию:
left.

Параметр TITLE

Добавляет всплывающую подсказку к контейнеру DIV. Эта подсказка появляется, если задержать курсор на блоке неподвижно на несколько секунд.

Возможные аргументы:
Любая строка.

Значение по умолчанию:
Отсутствует.

Примеры использования

Пример тега DIV

<!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>Пример использования тега DIV</title>
<style type="text/css">
.block1
{
 width: 200px; background: #DDD; padding-right: 20px; border: solid 1px black; float: left; padding: 5px;
}
.block2
{
 width: 200px; background: #D1D8EB; border: solid 1px black; float: left; position: relative; top: 40px; left: -70px; padding: 5px;
}
.block3
{
 width: 200px; background: #A1C8EA;  border: solid 1px black; float: right; position: relative; top: 0px; left: 0px; padding: 5px 5px 5px 40px;
}
</style>
</head>
<body>

<div class="block1" title="Нижний блок">Это нижний блок, который находится в самом низу. Т.к. на нём сверху находится другой, текст может быть частично не виден. </div>
<div class="block2" align="justify">А этот блок находится сверху. И он тоже может быть разных размеров, как больших, так и маленьких! И в нём так же может располагаться всё, что угодно!</div>
<div class="block3" align="сenter" title="Блок по правому краю">А этот блок выровнен по правому краю. Но обратите внимание? что это сделано не с помощью атрибута <b>align</b>, а с помощью CSS свойства <b>float</b></div>


</body>
</html>

И вот как это будет выглядеть в браузере:
Пример тега DIV