DataLife Engine > Версия для печати > Тег DIV

Считается что, верстка блоками DIV имеет ряд преимуществ по сравнению с табличной версткой:
- более быструю загрузку страницы сайта, т.к. содержимое блоков DIV отображается по мере загрузки (в отличие от таблицы, в которой содержимое не отобразиться до тех пор, пока все ее содержимое не загрузиться)
- более удобочитаемый код страницы.

Но и блочная верстка не идеальна, есть и недостатки:
- нельзя получить представление данных как это делает таблица.

Самый оптимальный вариант сочетать табличную верстку с верской блоками 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: #cсcсcс;
    padding: 5px;
    padding-right: 20px;
    border: solid 1px black;
    float: left;
   }
   .block2 {
    width: 200px;
    background: #fаcс00;
    padding: 5px;
    border: solid 1px black;
    float: left;
    position: relative;
    top: 40px;
    left: -70px;
   }
  </style>
  </head>
<body>

  <div class="block1">Text1 Text1 Text1 Text1 Text1 Text1 Text1</div>
  <div class="block2">Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2</div>

</body>
</html>

вот так это будет выглядить на страничке:

Text1 Text1 Text1 Text1 Text1 Text1 Text1Text1 Text1 Text1 Text1 Text1 Text1 Text1

Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2

параметры:

width - ширина

background - цвет фона

padding - растояние от текста до границы блока

padding-right - растояние от текста до границы блока справа

border - граница

float - управляет позиционированием перемещаемого блока:
- left - элемент страницы принудительно выравнивается по левому краю;
- right - элемент страницы принудительно выравнивается по правому краю;
- none - элемент страницы не перемещается, будет отображен там, где он должен быть (значение по умолчанию).

position - способ позиционирования элемента относительно окна браузера или других объектов на веб-странице:
- absolute - указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
- fixed - по своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.
- relative - положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.
static Элементы отображаются как обычно. Использование параметров left, top, right и bottom не приводит к каким-либо результатам.

top - см. position

left - см. position

Тег DIV - прямоугольный блок