Тег DIV

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

Как и при использовании других блочных элементов, содержимое тега <DIV> всегда начинается с новой строки. После него также добавляется перенос строки.

Синтаксис

Параметры

align: Задает выравнивание содержимого тега <DIV>.
title: Добавляет всплывающую подсказку к содержимому.

Закрывающий тег

Обязателен.

Пример 1. Использование тега <DIV>

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег DIV</title>
  <style type="text/CSS (ЦСС)">
   .block1 { 
	width: 200px; 
	background: #ccc;
	padding: 5px;
	padding-right: 20px; 
	border: solid 1px black; 
	float: left;
   }
   .block2 { 
	width: 200px; 
	background: #fc0; 
	padding: 5px; 
	border: solid 1px black; 
	float: left; 
	position: relative; 
	top: 40px; 
	left: -70px; 
   }
  </style> 
  </head>
 <body>

  <div class="block1">Lorem ipsum dolor sit amet, consectetuer 
   adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
   dolore magna aliguam erat volutpat.</div>
  <div class="block2">Ut wisis enim ad minim veniam, quis nostrud 
   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
   ea commodo consequat.</div> 

 </body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Вид блоков, оформленных с помощью стилей

Описание параметров тега DIV

Параметр ALIGN

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

Выравнивание содержимого контейнера <DIV> по краю.

Синтаксис

Аргументы

center: Выравнивание контента по центру. контент помещается по центру горизонтали окна браузера или контейнера, где расположен контентовый блок. Строки контента словно нанизываются на невидимую ось, которая проходит по центру web-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению контента. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого контента неудобно.
left: Выравнивание контента по левоой стороне. В этом случае строки контента выравнивается по левоой стороне, а правый край располагается ?лесенкой?. Такой способ выравнивания является наиболее популярным на с нашего сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой контент.
right: Выравнивание контента по правой стороне. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки контента равняются по правой стороне, а левый остается ?рваным?. Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой контент читать труднее, чем, если бы он был выровнен по левоой стороне. Поэтому выравнивание по правой стороне применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где контент приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты.
justify: Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.

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

left

Аналог CSS (ЦСС)

text-align

Пример 2. Выравнивание контента

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег DIV, параметр align</title>
  <style type="text/CSS (ЦСС)">
   #layer1 {
   	background: #fc0; 
	padding: 5px;
   }
   #layer2 {
  	background: #fff; 
  	width: 60%; 
  	padding: 10px;
   }
  </style>
 </head>
 <body>

  <div align="right" id="layer1">
  <div align="left" id="layer2">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
   sed diem nonummy nibh euismod tincidunt ut lacreet dolore 
   magna aliguam erat volutpat.
  </div>
  </div>

 </body>
</html>

Результат данного примера показан ни рис. 2.

Рис. 2

Рис. 2. Выравнивание элементов с помощью параметра align

Параметр TITLE

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

Синтаксис

Аргументы

Любая контентовая строка. Строка должна заключаться в двойные или одинарные кавычки.

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

Нет.

Пример 3. Подсказка к контенту

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег DIV, параметр title</title>
 </head>
 <body>

  <div title="Каноническая рыба">Lorem 
  ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna 
  aliguam erat volutpat.</div>

 </body>
</html>