Разметка страниц с помощью блоков (div)
Недостатки использования таблиц:
"Медленная загрузка". Пока вся таблица не загрузится, информация на экране не появится.
Излишний код. Приходится создавать много ячеек и строк, которые, в общем-то, не нужны.
Отсутствие возможности с точностью до пикселов расположить элемент на экране.
Отсутствие возможности "надвинуть" один элемент на другой.
Отсутствие возможности управлять отображением элементов (при переполнении, таблица просто увеличивается в размерах).
Эти проблемы можно решить с помощью CSS и <DIV>.
Тэг <DIV> - служит для группирования элементов в блок. К сгруппированным элементам можно применить стили. Посмотрим на примерах, как это делается:
Примеры. Выделение блока бордюром:
1. Границу можно легко разместить вокруг заголовка, списка, абзаца или их группы, поместив их в элемент div. Прописываем стили для этого блока. Это можно использовать с разметкой следующим образом:
<div style="border-color:#FF00FF; border-style:dotted; ">
Содержимое этого элемента DIV будет заключено в прерывистую рамку.
</div>
2. <div style="border:15px double #008000; ">
Содержимое этого элемента DIV будет заключено в сплошную рамку шириной 15 пикселов.
</div>
3. <div style="border-style: outset; border-color: #FF0000">
Содержимое этого элемента DIV будет заключено в такую рамку.
</div>
4. <div style="border-right: 10px solid #00FF00; border-bottom: 10px solid
#00FF00">
Содержимое этого элемента DIV будет заключено в такую рамку.
</div>
5. <div style="border-left: 20px solid #FFFF00; border-right: 20px solid #FFFF00">
Содержимое этого элемента DIV будет заключено в такую рамку.
</div>
Пример. Выделение блока цветом фона:
<div style="background-color: #00FFFF">
Содержимое этого элемента DIV будет выделено таким цветом.
</div>
Пример. Позиционирование и задание размеров:
<div style="background-color: #AAAAFF">
Содержимое этого элемента DIV будет позиционироваться здесь.
</div>
<div style="float: left; width: 200; height: 200; background-color: #00FFFF">
Содержимое этого элемента DIV будет позиционироваться здесь.
</div><div style="float: right; width: 200; height: 200; background-color:
#FFFF00">
Содержимое этого элемента DIV будет позиционироваться здесь.
</div><div style="width: 200; height: 200; position: relative; left: 20;
background-color: #0FFD02">
Содержимое этого элемента DIV будет позиционироваться здесь.
</div>
<div style="background-color: #FCC403">
Содержимое этого элемента DIV будет позиционироваться здесь.
</div>
Пример. Позиционирование в 2,5 мерном измерении
Порядок наложения (перекрытия) блоков определяется атрибутом z-index.
<div style="position: relative; width: 200; height: 200; z-index: 0;
background-color: #FFFF00">
Блок - 1
</div>
<div style="position: relative; width: 200; height: 200; left: 100; z-index: 1;
top: -100; background-color: #00FFFF">
Блок - 2
</div>
<div style="position: relative; left: 220; top: -400; width: 200; height: 200;
z-index: 2; background-color: #00FF00">
Блок - 3
</div>
<div style="position: relative; width: 750; height: 20; z-index: 1; top: -580;
background-color: #FE76AF">
Блок - 4
</div>
<div style="position: relative; top: -600; z-index: 3; left: 100">
Почти 3D
</div>
Примеры. Управление переполнением и видимостью.
При переполнении следующего блока:
<div style="width: 200; height: 200; background-color: #00FFFF">
</div>
блок будет увеличиваться (т.е. также как и таблица).
При переполнении следующего блока:
<div style="overflow: auto; width: 200; height: 200; background-color: #00FFFF">
</div>
блок не будет увеличиваться, информацию можно просмотреть с помощью прокрутки
При переполнении следующего блока:
<div style="overflow: hidden; width: 200; height: 200; background-color:
#00FFFF">
</div>
блок не будет увеличиваться, информация, не поместившаяся в блок, не будет
отображена
