Блочная верстка форм.

Элемент <DIV> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого..

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

Синтаксистега div: <div> ... </div> Закрывающий тег -обязателен.

Атрибуты:

Align - задает выравнивание содержимого тега <DIV>. Может принимать следующие значения:

• center - выравнивание текста по центру,

• left - выравнивание текста по левому краю,

• right - выравнивание текста по правому краю,

• justify - выравнивание по левому и правому краю.

Title - добавляет всплывающую подсказку к содержимому.

Class - определяет принадлежность к классу.

Примеры использования блоков <div>

Пример 1: формируются блоки таким способом - <div> наполнение </div> - закрывающий тег </div> - обязательный!!! Главное не запутаться в формировании блоков, потому что лишний тег может "рвать" страницу, а искать его можно долго. По данной причине каждый блок в свойствах нужно называть нужным названием и вставлять поочередно, тогда через время, при редактировании, легко будет что то менять.

<div>здесь может быть все что угодно</div>

Пример 2: без применения свойств, с блоков толку никакого. А значит всегда нужно задавать параметры размеров блока, или выставлять автоматическое расширение размера, под наполнение. В примере заданы высота, ширина, и бордер, который желательно сразу указывать, чтобы видеть само расположение блока, так будет удобнее при позиционировании, а дальше бордер можно обнулить (сделать невидимым), или окрасить нужным цветом.

<div style="height:100px; width:1000px; border:1px solid #336600;">здесь может быть все что угодно</div>

Пример 3: расположить блок можно в любом месте страницы, для этого в свойствах нужно задать параметрpositionи задать ему индентификатор, напримерrelative, который располагает блок в общем потоке (один за другим).

<div style="height:100px; width:1000px; border:1px solid #336600; position:relative;">здесь может быть все что угодно</div>

Пример 4: чтобы блоки <div> не налезали друг на друга, нужно задать параметрfloat:none;, который запрещает обтекание блока другими блоками и все они располагаются один за другим. А если задать параметрыleftилиright- то разрешается обтекание блока слева, или справа.

<div style="height:100px; width:1000px; border:1px solid #336600; position:relative; float:none;">здесь может быть все что угодно</div>

Пример 5:Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей [см. ниже - стр.18.], а для тега добавить атрибут class или id с именем селектора.

Создадим блок, с текстовым наполнением, которому присвоим индентификатор id="text", свойства которого будут описаны в файлеCSSи расположим наполнение в середине блока, придав свойстваalign="center". Если файлCSSотсутствует, просто сайт может быть одностраничным, или нужно задать свойства только для этой страницы, тогда блок свойств нужно расположить в самом начале страницы, до закрывающего тега </head>, как показано в примере ниже.

------------ запись в файле CSS --------------

#text {

width:500px;

height:100px;

border:1px solid #006600;

position:relative;

float:none;

background:#999900;

}

----- Пример: запись свойств стилей в начале страницы -------

<style>

#text {

width:500px;

height:100px;

border:1px solid #006600;

position:relative;

float:none;

background:#999900;

}

</style>

---- код блока div для вставки на страницу ----

<div align="center" id="text">здесь может быть все что угодно</div>

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

Сам по себе (без атрибутов и стилей css), тег <div>никак не влияет на элементы html страниц. Без использования стилей, тег<div>предназначен для размещения элементов на html странице. Для этого необходимо обязательно тегу<div>атрибутalign.