Веб-компас сайтостроителей
/ Все статьи / CSS / Примеры с CSS / Верстка блоками DIV

Верстка блоками DIV

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

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

Для иллюстрации работы свойств float и clear, а также для ознакомления с основами, как осуществляется верстка блоками DIV, рассмотрим следующий пример: создадим три блока DIV
Код
<div style="background:#FA911D;">1</div>
<div style="background:#0080C0;">2<br>text<br>text</div>
<div style="background:#80FF00;">3<br>текст</div>

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

Все три блока располагаются один под другим и имеют ширину равную ширине окна браузера (или ширине HTML-элемента страницы, с этим кодом). Теперь изменим ширину каждого блока DIV.
Код
<div style="background:#FA911D; width:240px;">1</div>
<div style="background:#0080C0; width:150px;">2<br>text<br>text</div>
<div style="background:#80FF00; width:130px;">3<br>текст</div>

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

Ширина блоков будет у каждого своя, но располагаться будут также один под другим. Далее каждому блоку укажем стилевое свойство float со значение left:
Код
<div style="background:#FA911D; width:240px; float:left;">1</div>
<div style="background:#0080C0; width:150px; float:left; ">2<br>text<br>text</div>
<div style="background:#80FF00; width:130px; float:left;">3<br>текст</div>

Получим следующее представление
1
2
text
text
3
текст

Ширина у блоков осталась такая же, как и в предыдущем примере, но свое положение они изменили: выстроились в один горизонтальный ряд. Если добавить еще один блок, то он отобразится не под записанными ранее блоками, а по-другому. В общем случае определить, как отобразится его содержимое, нет возможности.
Код
<div style="background:#FA911D; width:240px; float:left;">1</div>
<div style="background:#0080C0; width:150px; float:left; ">2<br>text<br>text</div>
<div style="background:#80FF00; width:130px; float:left;">3<br>текст</div>
<div style="background:#36E065;">4<br>контент<br>контент<br>контент</div>

Но в нашем случае он отобразится следующим образом
1
2
text
text
3
текст
4
контент
контент
контент

Чтобы новый блок располагался ниже предшествующих блоков, нужно задать ему свойство clear, с соответствующим значением, в нашем случае можно задать значение либо both, либо left:
Код
<div style="background:#FA911D; width:240px; float:left;">1</div>
<div style="background:#0080C0; width:150px; float:left; ">2<br>text<br>text</div>
<div style="background:#80FF00; width:130px; float:left;">3<br>текст</div>
<div style="background:#36E065; clear:left;">4<br>контент<br>контент<br>контент</div>

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

С помощью приведенных свойств создают структуры страницы различной сложности, в том числе состоящих из трех столбцов, с резиновыми либо c фиксированными размерами.
Верстка блоками DIV предусматривает также и центрирование блока div в каком-либо элементе HTML-кода. Для центрирования блока в браузерах Opera и Firefox нужно использовать свойства margin-left и margin-top со значением auto, например
Код
<div style="margin-left: auto; margin-right: auto; width: 50%;">
содержимое блока DIV
</div>

Но подобный код не работает в браузере IE6, для этого браузера нужно центрируемый блок DIV поместить в дополнительный блок DIV, в котором будет стилевое свойство text-align со значением center. Например
Код
<div style="text-align:center;">
<div style="width: 50%;">
Содержимое блока DIV
</div>
</div>

То есть в браузере IE6 можно управлять положением блока DIV свойством text-align, используя значения left, center, right. В браузерах Opera и Firefox управлять положением блока DIV с помощью свойства text-align нельзя, только свойством margin.
В общем случае для центрирования блока DIV получим код, который будет одинаково отображаться в различных браузерах
Код
<div style="text-align: center;">
<div style="width: 50%; margin-left: auto; margin-right: auto; ">
Содержимое блока DIV
</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 будут перекрывать блоки с меньшим значением этого свойства.
Для иллюстрации описанных выше свойств рассмотрим пример. Создадим несколько блоков без свойств позиционирования.
Код
<div style="background:#A485B8;">1<br>text</div>
<div id="dopoln_block">
<div style="background:#66AAD7; width:200px;">2<br>текст</div>
</div>
<div style="background:#C6C600;">3<br>содержимое</div>

Для ознакомления с относительным позиционированием добавим в один блок свойства относительного позиционирования
Код
<div style="background:#A485B8;">1<br>text</div>
<div id="dopoln_block">
<div style="background:#66AAD7; width:200px; position: relative; top:10px; left:10px;">2<br>текст</div>
</div>
<div style="background:#C6C600;">3<br>содержимое</div>

Для ознакомления с абсолютным позиционированием посмотрите, как отобразится следующий код в браузере
Код
<div style="background:#A485B8;">1<br>text</div>
<div style="position:relative;" id="dopoln_block">
<div style="background:#66AAD7; width:200px; position: absolute; top:10px; left:10px;">2<br>текст</div>
</div>
<div style="background:#C6C600;">3<br>содержимое</div>

В последнем примере, для того чтобы положение абсолютно позиционируемого блока можно было задавать свойствами top и left относительно того места где он был бы расположен при обычном позиционировании, в код был добавлен относительно позиционируемый блок с id="dopoln_block".
В завершение темы "Верстка блоками DIV", приведу шаблон, который позволяет получить очень распространенную схему верстки: вверху страницы заголовок, далее три колонки с основным содержимым страницы и внизу страницы блок, обычно содержащий информацию о копирайте. Причем нижний блок будет находиться внизу страницы даже при малом количестве содержимого на странице. Также две колонки (левая и правая) из трех с основным содержимым будут с фиксированными размерами, а средняя будет "резиновая", то есть она будет менять ширину в зависимости от разрешения экрана монитора. Пример можно посмотреть на странице шаблон.
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Шаблон верстки страницы из 3 колонок</title>
  <style type="text/css">
  
  * { margin:0px; padding:0px; }
  html { height:100%; }
  body { min-height:100%; position:relative; min-width:800px; }
  * html body { height:100%; }
  #header { background:#9393FF; height:70px; width:100%; }
  
  #content { width:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 800 ? "100%" : "800px"); overflow:hidden; }
  
  #container1 { width:100%; float:left; margin-right:-180px; }
  #container2 {  background:#000000; margin-right:180px;  }
  #container3 { width:100%; float:right; margin-left:-200px; }
  
  #left { background:#AEAE00; width:200px; float:left; }
  #center { background:#D86927;  margin-left:200px; }
  #right { background:#C0C0C0; float:right; width:180px; }
  
  #min_width { width:800px; }
  
  #footer { position:absolute; bottom:0px; background:#8F9EB1; width:100%; height:60px; }
  
  </style>
</head>
<body>
<div id="header">Заголовок страницы</div>

<div id="content">
<div id="container1">
<div id="container2">
<div id="container3">
<div id="center">Центральная колонка</div>
</div>
<div id="left">Левая колонка</div>
</div>
</div>

<div id="right">Правая колонка</div>

</div>

<div id="footer">Копирайт</div>
</body>
</html>

Верстка блоками DIV позволяет верстать разные по сложности сайты с использованием приведенных выше свойств каскадных таблиц стилей. Надеюсь, эта статья поможет Вам разобраться с версткой и сделать много хороших и красивых сайтов. Удачи!
Еще статьи из данной категории
Предыдущие статьи
  • нет
Комментарии к публикации
Всего комментариев: 80
прохожий: Евгений | 01.02.2009, 01:42 #
Все просто и понятно. Спасибо огромное!
прохожий: Макс | 25.12.2010, 20:00 #
ПО ЦЕНТРИРОВАНИЮ DIV БЛОКОВ !!! В файле css для body пишете text align center и не придется для каждого div повторять это.(центрирование для IE)
прохожий: Плюшевыйтеддибир | 31.08.2011, 03:45 #
Пасыба учител ! помог
прохожий: Ярослав | 28.04.2012, 09:10 #
Скажите, а как сделать так, чтобы при клике на ссылку изменялся Div на другой, в то же время менялся адрес страницы...
Примером может следить ВКонтакте...
Там шапка сайта и меню одно целое и не обновляется почти, а подгружается содержимое внутри и изменяется адрес страницы...
Как сделать что то аналогичное?
прохожий: degart | 16.02.2009, 12:26 #
Спасибо, действительно все расписано кратко и понятно. Давно искал что-то вроде такого мануала по верстке div\&#039ами.
прохожий: Юрий | 09.04.2009, 06:01 #
Спасибо..
Единственное, что не понял в итоговом шаблоне какова роль div-ов container. Без них не работает, а что они дают и почему их 3. Не совсем понятно.
<div id="content">
<div id="container1">
<div id="container2">
<div id="container3">
Автор статьи: admin | 09.04.2009, 11:19 #
Если заметили, в коде HTML блоки идут в следующем порядке: центральная колонка, левая колонка и затем правая колонка. Если в CSS просто прописать для этих блоков свойства float:left (или right), то наверное сможете представить, как они отобразятся в браузере. Так вот, для нужного нам отображения и используются вспомогательные блоки-контейнеры (container1, container2 и container3). Свойства каскадных таблиц стилей float:left (и right), margin-left и margin-right помогают нужным образом разместить блоки на странице.
прохожий: Гость | 13.04.2009, 21:56 #
В примере не учтено, что подвал при наличии контента будет поверх контента
Автор статьи: admin | 14.04.2009, 20:55 #
Учетно: для блока #footer задана высота 60px и для блока #content задается соответствено свойство padding-bottom:60px
прохожий: Алексей | 21.05.2009, 02:54 #
В IE8 при таком раскладе сверху, над header остается пустая полоса. Как бы от нее избавиться?
Автор статьи: admin | 21.05.2009, 08:50 #
у меня нет IE8, поэтому сложно так сказать. Можно попробывать прописать для body отдельно margin и padding по нулям.
прохожий: STILL47DEATH | 27.02.2010, 22:31 #
Да, именно так и попробуйте! выставите переменные padding и margin на 0
прохожий: ioex | 10.07.2009, 23:13 #
Подскажите, а как в растянутом блоке по вертикали на 100% сделать центровку по середине?
типа как в таблицах <td valign="middle"></td>
Автор статьи: admin | 11.07.2009, 19:34 #
почитайте на следующих сайтах
http://xpoint.ru/know-how/CSS/VerticalAlign
http://cssing.org.ua/2005/07/14/vertical-align-middle/
прохожий: Гость | 24.07.2009, 02:23 #
Если покрутить "скролл"...то в ИЕ-7 правая колонка уезжает так, что ее просто не видно! Как от этого избавиться? АСЯ 195377
Автор статьи: admin | 24.07.2009, 20:55 #
в интернете сайт доступен? Если да, то дайте ссылку (можете скинуть мне на почту webmaster@linedmk.com).
прохожий: Юзер | 13.08.2009, 11:28 #
С точки зрения синтаксиса посмотрел - не катит, много ошибок покажет валидатор при такой разметке.. div id может быть только 1, на незакрытые теги BR валидатор ругается.. это сказывается на кол-ве ошибок от валидатора. Клиент пошел умный, проверяет валидатором и большая вероятность попросит сверстать с наименьшим кол-вом ошибок by validator w3org
прохожий: Юзер | 13.08.2009, 11:33 #
Если верстать указанной выше версией (HTML PUBLIC "-//W3C//DTD HTML 4.01) ошибок нет, я сразу практически тренировался на XHTML, а там надо все закрывать) В данном типе документа, на указанном выше примере - все валидно! ) Но я все-же натаскиваюсь на xhtml сразу ) хотя знать надо и то и другое!
Автор статьи: admin | 13.08.2009, 19:10 #
Перевести в XHTML приведенный здесь код довольно просто: нужно заменить <br> на <br /> и так далее. :))
Знать XHTML конечно нужно! А вообще мне лично валидатор до лампочки, лишь бы сайт нормально отображался в браузерах! :))) Тем более что еще не все браузеры соответствуют стандартам.
прохожий: Гость | 15.08.2009, 04:36 #
Огромное спасибо! Мучился почти вечер пытаясь совместить div с абсолютным и относительным позиционированием, пока не наткнулся на claer и не совместил с float.
прохожий: алекс | 28.09.2009, 07:19 #
в опере 9.23 при изменении размера окна по высоте футер не привязан книзу окна, как в ие или в фф...почему?
Автор статьи: admin | 29.09.2009, 07:08 #
Если нажать на кнопочку обновить, то отобразиться как надо. У оперы проблемы с динамическим отображением содержимого страницы. Этот случай лишь доказывает это обстоятельство.
прохожий: INOK | 07.10.2009, 09:17 #
спасибо. Как бы еще и боковые колонки вытянуть на 100% по height
Автор статьи: admin | 08.10.2009, 18:22 #
Вопрос интересный :) Но ответа на него я не знаю :(
прохожий: Koi | 21.10.2009, 21:05 #
К сожаленю, в нынешней версии оперы Ваш шаблон отображается совсем не так, как задумано...
Интересно почему? ^_^

А за статью, спасибо)
прохожий: Гость | 22.10.2009, 20:43 #
Спасибо, мне очень помог этот материал!
прохожий: M1dav | 25.10.2009, 21:41 #
Спасибо за пост, но у меня возникла такая проблема:
В моем сайте есть левая колонка и контент, ну так вот когда блок с контентом заполняется собственно контентом и допустим height в рез-те стал 200px , а в левом меню мало всего написано (предположим height получился 100px) и получается ступень, а теперь вопрос как сделать так чтобы левое меню было одной длины с контентом не зависимо от его величины, и на оборот если левое меню вдруг длиньше по высоте чем контент как их уровнять, тупо прописать стат. высоту я не могу потому что хочу сверстать шаблон под Joomla и соответственно не могу знать какой длины будут страницы. Заранее спасибо за ответ на вопрос.
прохожий: AleksEr | 04.11.2009, 00:35 #
А границы как-нибудь можно выделить? Типа рамки как у таблиц
прохожий: Гость | 04.11.2009, 03:10 #
Задавай стилями border:1px solid #000; или то, что тебе надо. Данный пример сделает сплошную рамку со всех сторон дива черным цветом
прохожий: В ГАЕ .RU | 04.11.2009, 06:58 #
Постараемся переделать свой сайт под блочную верстку
прохожий: Гость | 19.11.2009, 20:53 #
indie, britpop
прохожий: Гость | 21.12.2009, 03:38 #
Отличная статья. Прощайте таблицы!!! =)
прохожий: Гость | 27.12.2009, 01:03 #
Здравствуйте. Просматривал вашу статью и попробовал на шоблоничик ваш у себя.... Интересный момент с кодировкой... UTF-8 печатает по русски и при исправлении кодировки на windows-1251 печатает иероглифы в браузере... Обычно все наоборот...

Почему так? никак не соображу...

Мне интересна кодировка на UTF-8 которая отлична воспринимает киррилицу... Еще хотел спросить с jQuery 1.3 все будет нормально, там вроде как раз используется исключительно UTF-8.
Прошу поправить меня, если где-то я неграмотен...
За ранее благодарю за ответ.

прохожий: Илья | 07.01.2010, 15:55 #
Спасибо большое за информацию.. Новичку приходится долго мучиться со всем этим бредом, а тут все сделано грамотно и красиво
прохожий: theFlame | 07.01.2010, 20:58 #
Статья действительно лучшая из подобных. Но блягодаря ей и комментариям к ней сделал вывод, что вся сложность в вёрстке слоями заключается как раз не в самой вёрстке, а в валидации и совместимости. Отсюда вопрос.

Почему в аргументах такого подхода сравнивают только вес html-разметки, игнорируя конечный вес всех css, полученных ради совместимости? И разве на самом деле основной вес страницы формируется не её содержанием с картинками? Я вот сопоставил весь секс проскальзывающий здесь в комментариях и хочу спросить, а может _иногда_ (например, как в данном случае при разметке страницы) может всё же использовать классику, т. е. таблицы? А уже вложения можно делать дивами, если нужно? Таблицы тоже очень даже неплохо слушают цсс. Если расположение содержания не меняется, то размер и фон спокойно можно изменять одной только правкой css.

Хотя, как я понял, рассматриваемый в данной статье пример охватывает все самые основные проблемы вёрстки подобным образом, что обеспечивает достаточный уровень подготовленности, в случае освоения материала. Когда-то в своё время учил html. С источником повезло тем, что в нём приводились только те теги, которые одинаково воспринимаются во всех основных браузерах. В результате мне это не только сэкономило время, но и нервы, потому что даже в самых первых работах практически не было проблем с совместимостью в разных браузерах. За что отдельно признателен автору. Отсюда возникает вопрос.

Может и в вёрстке вивами тоже можно изложить кратко основные теги и методы, которые бы позволили, допустим через вложения, получать одинаковые результаты хотя бы в самых популярных браузерах и их версиях? Было бы полезно
прохожий: PanSoul | 09.12.2010, 15:19 #
Дело в том, что таблицы предназначены для представления именно табличных данных, но не как для разметки страниц! К тому же, код, верстаныый с помощью таблиц становится не семантичен + большой размер, что приводит к "загрязнению" страницы и её большого веса.

валидный код- отображается одинаково везде, КРОМЕ, как правило, всеми любимого IE, но граммотный верстальщик решит любую задачу(валидность + семантика = МОЗГ ;)
прохожий: Гость | 08.01.2010, 21:16 #
Подскажите, а как div'ы прописать, чтобы было три блока, центральный - фиксированного размера по центру, а слева и справа от него блоки тянулись в края на 100% ширину? это для шапки нужно.
прохожий: theFlame | 09.01.2010, 05:52 #
И мне интересно. А также я всё-таки не понял как в примере данной статьи можно колонки контента растягивать по высоте от верхнего до нижнего колонтитула. Рекомендуемую ссылку на материал на английском языке просмотрел, но такого именно примера не нашел. А ведь не хватает ответа на эти вопросы. Может кто-нибудь посоветует книгу, где мало воды и много валидных решений? Ктати, по той ссылке часто приводятся примери решений без хаков, чистым кодом, универсальным для всех.

"Только не учите меня жить, лучше помогите интеллектуально" )))
прохожий: Pavel | 24.01.2010, 04:43 #
Все кончено замечательно, с шириной то все гуд, а высота некрасиво получается лесница и разных цветов блока. Тут сразу родилсявопрос как реализовать так чтобы высота всех блоков была 100% от шапки до подвала в независимости сколько там текста?
прохожий: Илья | 26.01.2010, 20:13 #
Все-таки DIVы довольно сильно грузят браузер.
Автор статьи: admin | 01.02.2010, 08:04 #
В каком это смысле дивы грузят браузер? Код с дивами наоборот облегчают код, по сравнению с табличной версткой. А файлы каскадных таблиц стилей кэшируются браузерами, что уменьшает трафик и соответственно уменьшают время загрузки страницы.
прохожий: Сергей | 27.01.2010, 21:08 #
Уважаемый автор, вы привели пример с цветными блоками, распологающимися по всей ширине родителя. Можно ли сделать так, чтоб высота всех блоков в ряду равнялась высоте наибольшего? Чтоб между блоками этого и последующего ряда не было разноразмерных пробрешин.
Заранее спасибо!
Автор статьи: admin | 01.02.2010, 08:01 #
На этот вопрос я не знаю ответа.
прохожий: Жирнов Максим | 28.01.2010, 00:55 #
Отличное пособие!
прохожий: lokanaft | 28.01.2010, 02:10 #
<цитата>commentN204 ...в программирование блоками div знаю... </цитата>


*lol* :D Отжёг!!!
прохожий: Михаил | 03.02.2010, 23:24 #
Скажите, пожалуйста, а в <DIV> можно прописывать фон картинкой? Просто цвет работает, а картинка не отображается... =(
В HTML пишу:
<div id="wapka"></div>
В CSS:
#wapka {background:url(адрес); width:1000; height:200;}
Но картинка в фоне не отображается =(
Автор статьи: admin | 07.02.2010, 02:13 #
Указывайте либо все в одном свойстве (цвет, фон и др. параметры)

background: #333 url(адрес);

либо разделяйте свойства

background-color:#333;
background-image: url(адрес);

Незабудьте правильные пути прописывать к изображению.
Возможно также нужно будет добавить пробел в блок (если в нем вообще нет текста)
<div id="wapka">&nbsp;</div>
прохожий: Гость | 24.02.2010, 10:18 #
Бодрого времени суток!
Только начинаю изучать верстку div'ами. Встала такая проблема, что при полупрозрачных блоках в их содержимом не отображаются ссылки, не подчеркиваются и нет перехода по ссылке. Если кто сталкивался с подобным, подскажите выход из ситуации,плз!
прохожий: Наталья | 05.03.2010, 20:59 #
Хороший пост, побольше бы толковых топиков!
прохожий: Тренер | 05.03.2010, 21:00 #
Присоединяюсь! 5 баллов!
прохожий: IT-MASTER | 05.03.2010, 22:13 #
А как сделать чтобы при растягивании например среднего блока, по высоте, растягивались и боковые???
Может я что-то пропустил или не до понял?...
А вообще статья лучшая!!!
прохожий: it-master | 05.03.2010, 22:15 #
упс так и думал что не заметил такой вопрос...
Может быть всё же кто-нить знает ответ на этот вопрос?
прохожий: Алексей | 11.03.2010, 05:29 #
По коду с центрированием.
<div style="text-align: center;">
<div style="width: 50%; margin-left: auto; margin-right: auto; ">
Содержимое блока DIV
</div>
</div>

Везде, где не посмотрю - у центрируемого дива задан width. Это не интересно...
А вот задачка, решения которой без использования таблицы я пока не вижу (чтобы везде работало, потому вариант display:table; не подходит):
Центрируемый див (ЦД) должен быть произвольной ширины - он должен растягиваться своим контентом, при этом вложенный див растягивается по ширине ЦД (такое легко достигается, например, если указать у ЦД float:left;).

Т.е. фактически для ЦД width не задается и он тянется ровно на столько, на сколько его растянет его контент (например картинка или строка текста, или даже див с указанным width). И после этого получившийся ДИВ центрируем...
Есть ли решение? =)

Маленькое НО:
- решение с использованием чисто display:inline не подходит, поскольку при добавлении в контент простого дива, тот сразу растягивает ЦД на 100% (если быть точнее, вылезает за границы ЦД и тянется на 100%).
прохожий: Гость | 25.03.2010, 03:07 #
а как грамотно подобрать картинку какой размер чтоб в блоке не сильно растягивало? о_О
Автор статьи: admin | 27.03.2010, 07:46 #
Это вы про что спрашиваете?
прохожий: Гость | 01.04.2010, 04:33 #
У вас написано что можно выровнить div тег для IE методом <div style="text-align:center;">
Да, элемент div ценрируется, но и текст в нем то же. Получается так, как если бы вместо этого кода прописать просто <center></center>

Как отценрировать div в IE но не ценрировать текст в нем. Как же блин достал этот IE ...
Автор статьи: admin | 03.04.2010, 19:41 #
Для отцентрованного блока div нужно прописать свойство выравнивающее текст по левому краю <div style="text-align:left;"> и текст будет отображаться как надо.
прохожий: Pan | 09.12.2010, 15:48 #
как известно, для выравнивания тексат в css используется {text-align: left|right|center}

а для выравания самого блока по центру используют margin {margin:0 auto} это сокращенная запись!

Если кому не понятно, могу расписать так {margin:0 auto 0 auto}
прохожий: Lisitsa | 02.04.2010, 07:35 #
Спасибо огромное! Статья очень помогла. Краткость и наглядные примеры позволили сделать мне еще один шаг по направлению к Div'ной верстке. Теперь дело остается за практикой!
прохожий: Гость | 06.04.2010, 03:41 #
А как можно фон задавать картинкой?
Автор статьи: admin | 09.04.2010, 07:18 #
на этой странице написано http://www.linedmk.com/page15.html
прохожий: Илья | 23.04.2010, 01:48 #
О добрый человек, благодарю тебя
проверялось на Firefox, Opera, IE 6,7,8 (на 5.5 отображается криво)
прохожий: Начинающий | 23.04.2010, 23:28 #
Статья СУПЕР!!!!!!
прохожий: Yura | 03.12.2011, 23:06 #
полезная статья, теперь версткой сам занимаюсь и только дивами..
прохожий: проблемный | 24.04.2010, 21:06 #
Статья, класс, но я искал ответ на другой вопрос и увы не нашел: как сделать так чтобы в одном dive отображать разный контент, например сверху страницы выпадающее меню, там выбираешь "тескт1" и текст1 отображается в dive расположенном чуть ниже...? м?
Автор статьи: admin | 25.04.2010, 19:41 #
Такие вещи делаются с помощью javascript.
прохожий: PhoeNiXX | 01.05.2010, 23:55 #
Спасибо за статью, отлично написано!

У меня вот такой вопрос, никак не могу понять, как сделать:

Есть контейнер фиксированной ширины по центру (960 пикселей) в нем располагается основное тело сайта. А по бокам этого контейнера (с двух сторон) нужно сделать два контейнера шириной по 150 пикселей каждый и в них разместить некую графику (методом задания бэкграунда див-тегам, несколько див-тегов с absolute позиционированием внутри этих колонок). Это я сделал, но основная задача в том (и я не могу понять как это сделать) - эти боковые колонки по 150 пикселей с графикой должны обрезаться окном браузера без появления горизонтальной прокрутки (если разрешение экрана маленькое, или при изменении размера окна браузера вручную) а вот центральный контейнер 960 пикселей - не должен обрезаться, и если размер экрана будет меньше него - то должна появляться горизонтальная прокрутка.

Подскажите, пожалуйста, а то я в ступоре.
Автор статьи: admin | 11.05.2010, 07:29 #
хз.
прохожий: RedCat | 13.05.2010, 03:35 #
Попробуй поместить все свои три контейнера в один и обозначить ему свойство overflow=hidden и align=center и min-width=960px. а центральному ничего не надо, т.к. он итак у тебя в ширину задан.
но думается мне что тогда не только боковые у тебя скроются если размер окна меньше будет, но и снизу все обрежется если не задашь высоту сам... а если будет ширина экрана в 1000 пикчелей, то и показывать тебе будет частично и правую и левую колонки.
100% решается только скриптом
прохожий: Толик | 18.05.2011, 20:08 #
вероятней всего они будут обрезаться только в том случае если выполнены в виде фона под центральным блоком
прохожий: Mark | 06.05.2010, 00:19 #
Все гениальное просто. Спасибо, уважаемый автор!
прохожий: Гость | 09.05.2010, 06:14 #
А причем здесь css?
Это же все делается в документе html, даже при отсутсвии документа css, все рабоет так.
Статья вроде понятная, но зачем здесь css? Объясните
прохожий: RedCat | 13.05.2010, 03:48 #
вопрос к администратору. а чем вам не нравится такое решение с 3мя столбцами дивами?...
(лишнее я опустил. только главное)

<style type="text/css">
body {
margin:0px;
padding:0px;
}

#left, #right, #main {
height:400px;
}

#left {
float:left;
width:250px;
background:#99CC33;
}

#right {
float:right;
width:240px;
background:#0099CC;
}

#main {
margin-left:250px;
margin-right:240px;
background:#CC3333;
}

</style>

<div id="container">
<div id="left">левый столбец</div>
<div id="right">правый столбец</div>
<div id="main">главный столбец</div>
</div>
Автор статьи: admin | 13.05.2010, 06:32 #
Во-первых, я разве против? Если работает нормально, то используйте этот вариант. :)
Во-вторых. Особо не смотрел, но у вас задана высота блоков. А это, по-моему, не очень хорошо.
прохожий: Гость | 17.05.2010, 19:00 #
Подскажите п-ста, как побороть проблему в ИЕ (только в ИЕ) - блок С3 "уезжает вниз".
Вот код:
<div id="content">

<div id="c1">
c1 c1 c1 c1
</div>

<div id="c2">
c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 <br>
c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 <br>
c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 <br>
c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 <br>
c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 <br>
c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 <br>
c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 <br>
c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 <br>
c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 c2 <br>
</div>

<div id="c3">
c3 c3 c3 c3 c3
</div>

<div id="beforefooter">
</div>

<div id="footer">
Footer Footer Footer Footer Footer Footer
</div>

</div>

Вот css:
#c1 {
width: 200px;
background: yellow;
float:left;
}

#c2 {
width: 600px;
background: grey;
float:left;
}

#c3 {
width: 200px;
background: red;
float:left;
}

#beforefooter {
clear:both;
background: black;
}

#footer {
background: green;
}
прохожий: Кость | 26.05.2010, 21:26 #
Молодетс. Но я все на таблицах делаю, ибо не иметь значения для раскрутки сайта в поисковых системах (почти не иметь).
прохожий: Гость | 31.05.2010, 06:53 #
Спасибо!
прохожий: виктор | 04.06.2010, 22:13 #
спасибо, хорошо объяснил
прохожий: Олег Сыромолотов | 10.06.2010, 15:50 #
Большое спасибо. Если еще и остальные статьи сайта такие суперские!...
Вот бы и школьные учебники такие толковые люди писали.
прохожий: Den1xxx | 24.07.2010, 08:58 #
Отличная статья!
Для полного счастья не хватает только добавить в CSS
стили для принтера - скыть управляющие правые и левые колонки:

@media print{
#left{display:none;}/*Прячем левую*/
#right{display:none;}/*Прячем правую*/
#center, #container3{width:100%; float:none;}/*Раздвигаем среднюю на всю ширину*/
}
прохожий: GetTo2face | 03.08.2010, 01:48 #
Таблицами как-то проще верстать %)
прохожий: Владимир | 08.08.2010, 06:04 #
Как div дружит с табличками?
Например, можно ли задать ширину для шаблона таблицей, а содержимое оформить divами?
Автор статьи: admin | 10.08.2010, 03:09 #
Зачем ширину задавать таблицами? Почему сразу не div-ами?
прохожий: Егор Егоров | 18.09.2010, 14:31 #
нашел что искал,спасибо.
прохожий: Юра | 28.09.2010, 07:04 #
Хотелось бы увидеть расшифровку строки:
width:expression(document.body.clientWidth > 800 ? "100%" : "800px");
А использование id равносильно class? только отличие, что перед названием класса . а перед названием id #?
Автор статьи: admin | 01.10.2010, 20:48 #
Эта строка для всеми "любимого" IE6 и нужна она для реализации свойства CSS min-width, которое не работает в IE6.
И по ID. ID - это идентификатор html-элемента. ID в коде html можно указывать лишь одному элементу, тогда как один и тот же класс (class) можно указывать любому количеству элементов.
прохожий: Гость | 28.09.2010, 23:32 #
При крупном объекте в центральном блоке, в ИЕ6 при уменьшении ширины окна колонки будут "складываться"...
прохожий: Гость | 05.10.2010, 07:12 #
Честно говоря сначала обрадовался, а потом понял что кривая верстка в примере, ПРАВАЯ колонка при заполнении более 100% по высоте пролазиит под футер. так что автору еще учится и учится ... впрочем как и мне ... гуглить и гуглить.
Автор статьи: admin | 06.10.2010, 07:43 #
Я сделал уже много сайтов с такой версткой, и нормально все работает. Ищите причины, почему у вас не работает правильно пример.
прохожий: Denis | 13.10.2010, 11:03 #
Я архив с примером скинул ... .
У меня такая проблема. задний фон я сделал резиновый, из 4 кусков, чтобы и в стороны и в низ тянулся. но вот вниз не тянеца! Нижние части остаются на уровне непонятно каком. Остается неподвижными. Вы не могли бы дать дельный совет?
прохожий: aladin | 18.10.2010, 07:10 #

погуглил - вот еще один пример, у него подвал
не застывает на размер окна. Если совместить с http://www.linedmk.com/page32.html
то решение точно можно найти.

http://www.htmlcoder.com.ua/css_exemples/height100/index.html
прохожий: Alegren | 30.10.2010, 01:25 #
Отличный материал для самообразования! Хотя, согласитесь, что табличную верстку освоить куда проще.
прохожий: Гость | 01.11.2010, 04:34 #
а можно сделать что бы несколько горезонтальных линий было на одной строке??- -
Автор статьи: admin | 07.11.2010, 20:35 #
В каком это смысле?
прохожий: Гость | 03.12.2010, 06:32 #
Спасибо большое! Работаю в wordpress, но приходиться перерабатывать шаблоны. Очень помогло, очень наглядно и понятно.
прохожий: pozitive | 05.12.2010, 02:57 #
Сейчас буду пробывать переводить сайт на div. Спасибо за пример.
Сейчас сделано таблицами, но не нравиться правая колнка иногда долго подгружаеться.
прохожий: Гость | 25.12.2010, 06:53 #
А как сделать,чтобы сайдбары пропорционально расширялись относительно разрешения экрана,а то дизайн нарушаеться
прохожий: Вертикальный порядок блоков | 19.01.2011, 22:08 #
Присоединюсь к комплиментам по поводу статьи ) Но появился интересный вопрос.

Как изменить визуально порядок по горизонтали я понял. А вот как управлять порядком слоёв по вертикали, если высота слоёв не известна? Это как-то возможно?

Т. е., допустим:

<div class="s1">
<p>Text 1</p>
<p>Text 2</p>
<p>Text 3</p>
<p>Text n</p>

<div class="s2">Internal text</div>
</div>

Т. е. сначала идёт первый блок, в нём текст, потом второй контейнер. Примерно так должен видеть страницу поисковик. А вот для пользователя нужно сделать так, чтобы блок 2 имел значение top:0 относительно первого блока, но текст, который будет под этим блоком в слое 1, должен сдвигаться вниз на высоту второго контейнера, которая варируется в зависимости от содержимого.

Может у кого получалось такое добиться?
прохожий: Гость | 03.02.2011, 07:19 #
Спасибо за статью! Вёрстка блоками div также актуальна. Пытаюсь перекроить шаблон Joostina 1.3. Некоторые вещи заводят в тупик.
прохожий: Гость | 18.02.2011, 11:08 #
Замучался искать, как разместить текст и изображение по центру чтоб валидатор не ругался на align:center с примером пожалуйста.
Автор статьи: admin | 18.02.2011, 18:46 #
Может text-align: center ?
прохожий: max | 02.03.2011, 03:23 #
Подскажите, может кто нибудь знает, как сделать разметку для блока DIV, который содержит два дочерних DIVа. Первый должен иметь высоту в соответствии с содержимым, а второй заполнять всю остальную область родителя и иметь прокрутку по содержанию. Оба растянуты на ширину, равной ширине родителя.
пользователь: pchyolkin | 24.03.2011, 10:32 #
Вот мой вариант: не могу сделать 100% высоты может кто подскажет??? З а ранее спасибо!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Виктор Цой и группа Кино</title>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
* { margin:0px; padding:0px; }
html { height:100%; }
body { min-height:100%; position:relative; min-width:800px; }
* html body { height:100%; }
div {
border: 1px solid #00F;
}

.frames {
width:100%;
height:180px;
background:#666;
}
.scroll_line {
width:100%;
height:24px;
background:#000;
}
.block_left {
background:#0F0;
width:210px;
float:left;
margin-left:-210px;
}
.block_contetn {
background:#FF0;
margin-left:210px;
margin-right:210px;
float:left;
}
.block_right {
background:#F63;
width:210px;
float:right;
margin-right:-210px;
}

</style>
</head>

<body>
<div class="frames">
<!--pictures in frames-->
</div>
<div class="scroll_line">
<!--scrolling line-->
</div>
<div style="width:100%;">
<div class="block_contetn">
<!--content block-->
<div class="block_left">
<!--left block-->1
</div>
<div class="block_right">
<!--right block-->3
</div>
<div style="color:#F00;">
Contentnt
</div>
</div>
</div>

</body>
</html>
прохожий: Кирилл | 30.03.2011, 00:59 #
Такая вёрстка сайта, на мой взгляд, больше нравится ПС. Спасибо.
прохожий: Евгеша | 10.05.2011, 05:29 #
Спасибо огромное мне как новичку очень помогло
прохожий: Толик | 18.05.2011, 19:55 #
спасибо! объяснения понятные и доступные.
Помогите пожалуйста разобраться в еще одном аспекте: мне нужно сделать наложение одного блока на другой с помощью атрибута z-index: 0; высота 1) 400 2) 1000рх, и чтоб третий блок встроился ниже относительно границы 1000рх. Что-то у меня не получается так сделать...
Автор статьи: admin | 25.05.2011, 18:46 #
ничего не понял...
пользователь: snipergood | 02.08.2011, 00:29 #
Здравствуйте. В магазине товар размещается в одной колонке.
Как сделать чтобы товар размещался в 3-х колонках?
Автор статьи: admin | 02.08.2011, 04:59 #
Для отображения списка товаров в 3-х колонках можно воспользоваться таблицами.
прохожий: царь | 03.01.2012, 11:45 #
сему пацаку поставить памятник
прохожий: seo-likes | 17.01.2012, 09:15 #
Это все, конечно, хорошо, но, не работает, если пытаться сделать шаблон резиновым. Если не задать у второго блока ширину, то он располагается ниже первого блока, даже, если нужно сбоку. Мне пришлось ширину для второго блока задавать в процентах, иначе никак не выходило
прохожий: AlexB | 18.04.2012, 04:32 #
Хорошая статья.
Я мучался, не мог две формы в линию выставить, вставали друг на друга, а надо было всего лишь float прописать)
Помогли, спасибо.
прохожий: Владимир | 05.05.2012, 19:03 #
Уважаемый админ. Статья по содержанию хорошая, но впечатление портят ошибки типа: "содержимое не отобразитЬся до тех пор, пока все ее содержимое не загрузитЬся)". Вы поняли?
прохожий: Сергей | 29.05.2012, 07:20 #
Автор, ты молодец! Не обращай внимания на критику про ошибки, не за уроками орфографии сюда все пришли ))
прохожий: mugik | 18.09.2012, 00:21 #
может здесь кто то уже писал?
а у вас в шаблоне верстка валиться в 6,7 осле (
прохожий: mugik | 18.09.2012, 00:28 #
может из зи min-width, min-height в боди
хотя conteiner по всем правилам хака описан
прохожий: mugik | 18.09.2012, 00:31 #
смотрел в IETester может и из за него хз
прохожий: Vasilionis | 25.10.2013, 10:26 #
Спасибо за полезную информацию! Однажды наткнулся на ваш сайт и забыл добавить в закладки. Пришлось порядком поковыряться в интернете, что бы вновь найти именно вашу статью.
прохожий: Вадим | 03.04.2015, 14:57 #
Я первые сайты делал только через table, но потом даже не помню на каком сайте решил сделать и через table и через div (совместить). в итоге, еще через пару сайтов начал верстать исключительно через div. и вот уже я никогда не пойму, как можно вообще верстать через таблицу, все исключительно делаю через дивы, это ооочень круто!!!
прохожий: Галина | 01.03.2016, 20:30 #
Автор, великое вам спасибо!!!
На большинстве сайтов про div-ную разметку так заумно написано, что хочется пристрелить автора.
Первый раз, читая объяснения, понимаю - о чем речь. И мои попытки начать верстку div-ами дают результаты.
Многое еще хочется для себя прояснить, но я теперь все меньше ненавижу div-ы.
Дай бог вам здоровья, прямо помолюсь за вас, чтобы бог вам дал побольше - всего, чего хотите.
Еще раз СПАСИБО!!!!
Добавить комментарий
Новости сайта
  • 06.04.2020
    Уважаемые пользователи, сегодня был обновлен наш сайт www.linedmk.com – сделан новый адаптивный дизайн, улучшена навигация по сайту и улучшен поиск по статьям.
  • 12.10.2012
    С сегодняшнего дня официально прекращена поддержка продуктов реализованных на CMS linedmk.com.
  • 14.09.2011
    Создание современных сайтов не обходится без программирования, и на наш сайт www.linedmk.com так же освещает вопросы связанные с программированием на JavaScript и PHP. И поэтому мы поздравляем и вас и себя с этим праздником! :)
Последние публикации в каталоге статей