Блочная верстка div примеры. Как создать блоки на странице

Жаропонижающие средства для детей назначаются педиатром. Но бывают ситуации неотложной помощи при лихорадке, когда ребенку нужно дать лекарство немедленно. Тогда родители берут на себя ответственность и применяют жаропонижающие препараты. Что разрешено давать детям грудного возраста? Чем можно сбить температуру у детей постарше? Какие лекарства самые безопасные?

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

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

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

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

Для иллюстрации работы свойств float и clear , а также для ознакомления с основами, как осуществляется верстка блоками DIV , рассмотрим следующий пример: создадим три блока DIV

2
text
text

3
текст

В браузере отобразиться этот HTML-код следующим образом

2
text
text

Все три блока располагаются один под другим и имеют ширину равную ширине окна браузера (или ширине HTML-элемента страницы, с этим кодом). Теперь изменим ширину каждого блока DIV .

2
text
text

3
текст

Отобразится в браузере этот код следующим образом

2
text
text

Ширина блоков будет у каждого своя, но располагаться будут также один под другим. Далее каждому блоку укажем стилевое свойство float со значение left :

2
text
text

3
текст

Получим следующее представление

2
text
text

Ширина у блоков осталась такая же, как и в предыдущем примере, но свое положение они изменили: выстроились в один горизонтальный ряд. Если добавить еще один блок, то он отобразится не под записанными ранее блоками, а по-другому. В общем случае определить, как отобразится его содержимое, нет возможности.

2
text
text

3
текст

4
контент
контент
контент

Но в нашем случае он отобразится следующим образом

2
text
text

4
контент
контент
контент

Чтобы новый блок располагался ниже предшествующих блоков, нужно задать ему свойство clear , с соответствующим значением, в нашем случае можно задать значение либо both , либо left :

2
text
text

3
текст

4
контент
контент
контент

Полученный код отобразится следующим образом (причем в разных браузерах, таких как IE, Opera и Firefox, пример будет отображаться с отличиями)

2
text
text

4
контент
контент
контент

С помощью приведенных свойств создают структуры страницы различной сложности, в том числе состоящих из трех столбцов, с резиновыми либо c фиксированными размерами.
Верстка блоками DIV предусматривает также и центрирование блока div в каком-либо элементе HTML-кода. Для центрирования блока в браузерах Opera и Firefox нужно использовать свойства margin-left и margin-top со значением auto , например

содержимое блока DIV

Но подобный код не работает в браузере IE6, для этого браузера нужно центрируемый блок DIV поместить в дополнительный блок DIV , в котором будет стилевое свойство text-align со значением center . Например

Содержимое блока DIV

То есть в браузере IE6 можно управлять положением блока DIV свойством text-align , используя значения left , center , right . В браузерах Opera и Firefox управлять положением блока DIV с помощью свойства text-align нельзя, только свойством margin .
В общем случае для центрирования блока DIV получим код, который будет одинаково отображаться в различных браузерах

Содержимое блока DIV

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

static - задает обычный блок, который не позиционируется индивидуально, а позиционируется в обычном потоке. Свойства top , left , bottom и right не учитываются. Является значением по умолчанию;
relative - задает относительное позиционирование блока. Заключается в следующем. Сначала положение блока рассчитывается как при обычном потоке (то есть не берется во внимание относительное позиционирование). Затем блок смещается относительно своего нормального положения в соответствии со значениями свойств top , left , bottom и right . Последующее содержимое выводится в поток так, как будто блок, относительно позиционированный, не был смещен;
absolute - задает абсолютное позиционирование блока. Абсолютно позиционируемые блоки изымаются из общего потока и не влияют на выводимое последующее содержимое. Положение абсолютно позиционируемого блока задается свойствами top , left , bottom и right относительно родительского элемента (блока);
fixed - задает фиксированное позиционирование блока. При фиксированном позиционировании положение блока рассчитывается, как и при абсолютном позиционировании, но в дальнейшем блок фиксируется и относительно окна браузера и не прокручивается вместе с остальным содержимым страницы. Данное свойство поддерживается браузерами Opera и Firefox.

Для задания положения блоков, у которых свойство position имеет значение relative , absolute или fixed , используются свойства top , left , bottom и right . Познакомимся с ними.

top - задает смещение верхней границы позиционируемого блока вниз относительно верхней границы родительского элемента;
left - задает смещение левой границы позиционируемого блока вправо относительно левой границы родительского элемента;
bottom - задает смещение нижней границы позиционируемого блока вверх относительно нижней границы родительского элемента;
right - задает смещение правой границы позиционируемого блока влево относительно правой границы родительского элемента.

Задавать величины перечисленных выше свойств можно в абсолютных значениях (например, пиксели), в процентных величинах относительно размеров родительского элемента, и также могут принимать значение auto (является значением по умолчанию).
При абсолютном, относительном и фиксированном позиционировании блоки могут накладываться друг на друга, и в этом случае может появиться вопрос, какой из них окажется "выше"? То есть, какой элемент будет отображаться, а какой будет перекрываться находящимся "выше" блоком. Решить этот вопрос поможет свойство z-index . Оно определяет позицию уровня, которую будет занимать блок. Его значением может быть любое положительное или отрицательное целое число. При этом элементы с большим значением z-index будут перекрывать блоки с меньшим значением этого свойства.
Для иллюстрации описанных выше свойств рассмотрим пример. Создадим несколько блоков без свойств позиционирования.

1
text

2
текст

3
содержимое

Для ознакомления с относительным позиционированием добавим в один блок свойства относительного позиционирования

1
text

2
текст

3
содержимое

Для ознакомления с абсолютным позиционированием посмотрите, как отобразится следующий код в браузере

1
text

2
текст

3
содержимое

В последнем примере, для того чтобы положение абсолютно позиционируемого блока можно было задавать свойствами top и left относительно того места где он был бы расположен при обычном позиционировании, в код был добавлен относительно позиционируемый блок с id="dopoln_block".
В завершение темы "Верстка блоками DIV", приведу шаблон, который позволяет получить очень распространенную схему верстки: вверху страницы заголовок, далее три колонки с основным содержимым страницы и внизу страницы блок, обычно содержащий информацию о копирайте. Причем нижний блок будет находиться внизу страницы даже при малом количестве содержимого на странице. Также две колонки (левая и правая) из трех с основным содержимым будут с фиксированными размерами, а средняя будет "резиновая", то есть она будет менять ширину в зависимости от разрешения экрана монитора. Пример можно посмотреть на странице .

Шаблон верстки страницы из 3 колонок

Центральная колонка

Левая колонка

Правая колонка

Верстка блоками DIV позволяет верстать разные по сложности сайты с использованием приведенных выше свойств каскадных таблиц стилей. Надеюсь, эта статья поможет Вам разобраться с версткой и сделать много хороших и красивых сайтов. Удачи!

Верстка блоками div давно уже стала стандартом и имеет ряд преимуществ перед табличной версткой. Однако на деле начинающие разработчики путаются в поведении этих самых блоков.

Давайте разберем основные моменты при блочной верстке. Сейчас мы не будем брать во внимание стандарт html5, а просто рассмотрим основу основ при верстке блоками div, которая используется при создании макета или же какого то отдельного компонента страницы.

Что считать блочным элементом?

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

Итак, от простого к сложному. Посмотрим, как отобразятся блоки div по умолчанию без стилей, влияющих на их положение. Для наглядности стили к элементам будем добавлять инлайново, через атрибут style.

Блок 1

Блок 2

Блок 3

Добавим значение ширины для каждого блока:

Блок 1

Блок 2

Блок 3

Видно, что каждый блок согласно спецификации располагается с новой строки. Это их нормальное поведение.

Теперь возникает вопрос, как расположить блоки div на одной строке , друг за другом?

Для этого существует свойство , которое определяет, с какой стороны блок будет принудительно выровнен. При этом с другого края, он может обтекаться другими элементами.

Свойство float имеет следующие значения:

left - блок выравнивается по левому краю, обтекание справа
right - блок выравнивается по правому краю, обтекание слева
none - обтекание не задано, блок ведет себя по умолчанию, как в предыдущих примерах.

Добавим float:left к нашим блокам, чтобы блоки выровнялись по левому краю:

Блок 1

Блок 2

Блок 3

В результате, блоки выстроились на одной строке. Хорошо, допустим, мы захотели добавить еще один div снизу, и сделаем это без указания свойства float:

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Почему так вышло? Вкратце, так происходит, потому что элементы с float выпадают из потока документа. Однако, это тема отдельной статьи. Здесь же мы познакомимся с новым свойством , которое управляет поведением плавающих элементов:

left - запрещает обтекание с левой стороны, все элементы будут показаны с новой строки (под элементом)
rigth - запрещает обтекание элемента с правой стороны
both - запрещает обтекание элемента с обоих сторон, рекомендуется использовать, когда явно надо показать элемент с новой строки или неизвестно с какой именно стороны возможно обтекание другими элементами

Добавим Блоку 4 свойство clear:left, которое запретит этому элементу обтекание других плавающих элементов с левой стороны.