Верстка блоками 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 позволяет верстать разные по сложности сайты с использованием приведенных выше свойств каскадных таблиц стилей. Надеюсь, эта статья поможет Вам разобраться с версткой и сделать много хороших и красивых сайтов. Удачи!
Опубликовано 06 октября 2008 г.
Теги: css, div
Комментарии к публикации
Всего комментариев: 150
прохожий: Евгений | 01.02.2009, 01:42 #
Все просто и понятно. Спасибо огромное!
прохожий: Макс | 25.12.2010, 20:00 #
ПО ЦЕНТРИРОВАНИЮ DIV БЛОКОВ !!! В файле css для body пишете text align center и не придется для каждого div повторять это.(центрирование для IE)
прохожий: Бакс | 16.07.2011, 04:53 #
Придется. Свойство text-align:(положение), при использовании в body, будет наследоваться дочерними слоями как бог браузеру на душу положит, по этому в body его определять не следует.
прохожий: Плюшевыйтеддибир | 31.08.2011, 03:45 #
Пасыба учител ! помог
прохожий: Ярослав | 28.04.2012, 09:10 #
E-mail: написать сообщение
Скажите, а как сделать так, чтобы при клике на ссылку изменялся Div на другой, в то же время менялся адрес страницы...
Примером может следить ВКонтакте...
Там шапка сайта и меню одно целое и не обновляется почти, а подгружается содержимое внутри и изменяется адрес страницы...
Как сделать что то аналогичное?
прохожий: Жуков Кирилл | 29.03.2014, 10:04 #
E-mail: написать сообщение
сайт: 2l4u.ru
В Контакте используется ajax. Это позволяет обновлять те элементы страницы, которые требует логика программы.
прохожий: degart | 16.02.2009, 12:26 #
сайт: degart.ru
Спасибо, действительно все расписано кратко и понятно. Давно искал что-то вроде такого мануала по верстке div\&#039ами.
прохожий: Юрий | 09.04.2009, 06:01 #
Спасибо..
Единственное, что не понял в итоговом шаблоне какова роль div-ов container. Без них не работает, а что они дают и почему их 3. Не совсем понятно.
<div id="content">
<div id="container1">
<div id="container2">
<div id="container3">
Суперадмин: | 09.04.2009, 11:19 #
Если заметили, в коде HTML блоки идут в следующем порядке: центральная колонка, левая колонка и затем правая колонка. Если в CSS просто прописать для этих блоков свойства float:left (или right), то наверное сможете представить, как они отобразятся в браузере. Так вот, для нужного нам отображения и используются вспомогательные блоки-контейнеры (container1, container2 и container3). Свойства каскадных таблиц стилей float:left (и right), margin-left и margin-right помогают нужным образом разместить блоки на странице.
прохожий: Юрий | 09.04.2009, 22:40 #
Спасибо. Теперь понятно..
прохожий: Миша | 05.10.2009, 02:09 #
Никак не пойму зачем в контейнерах margin-right:-180px; и -200, без них не работает, но зачем не понятно.
Суперадмин: | 06.10.2009, 07:48 #
Так в этом все и дело. При положительном отступе (margin), блок будет отображаться с отступом на заднанную величину. При отрицательном наоборот. Мысль уловили? Надеюсь объяснил понятно :))
прохожий: Гость | 16.11.2010, 01:21 #
Как раз именно это я и не понял. На примерах, так как про позиционирование, можно разобрать? В последнем примере:

container1 - "float: left" выравнивает элемент по левому краю, а все остальные элементы обтекают его по правой стороне, "margin-right:-180px;" сдвигает правую границу текущего элемента "container1" на 180px за правую границу его родительского элемента "content"? Ширина "container1" - что с ней? она неизменна? где левая граница? тоже сдвигается вправо на 180px? - нет, получается ширина "container1" 100%+180px справа, но то что выходит за ширину родительского элемента "content", не отображается?!

container2 - "margin-right:180px;" устанавливает отступ 180px от внешнего края правой границы текущего элемента "container2" до внутренней правой границы его родительского элемента "container1"
прохожий: Гость | 16.11.2010, 01:23 #
В общем, если можно, прошу подробно объяснить задачу каждого
<div id="content">
<div id="container1">
<div id="container2">
<div id="container3">
Суперадмин: | 20.11.2010, 06:02 #
Сложно объяснить, попробуйте экспериментальным путем разобраться :) Смотрите блоки и соответствующие им стили.
прохожий: Гость | 22.11.2010, 13:15 #
Не понял все-равно. Долго пытался. Приведу пример. Как я понял для его решения надо 2 вложенных блока <div>, только все равно не понял как это работает, очень прошу объяснить.

Суть в том, что internet explorer криво обрабатывает 100% (например, не важно сколько, важно что значение в процентах) ширину таблицы. Например при наличии отступа слева, он посчитает 100% ширины от левой границы до правой, и таблица уедет за правую границу на величину отступа слева. Firefox так не тупит, он считает 100% ширины таблицы от отступа слева до правой границы (или отступа справа, если он есть).
прохожий: Паша | 21.08.2011, 06:51 #
если сложно объяснить, то понять, экспериментируя, еще сложней.Я не понимаю тоже для чего эти блоки
прохожий: Гость | 13.04.2009, 21:56 #
В примере не учтено, что подвал при наличии контента будет поверх контента
Суперадмин: | 14.04.2009, 20:55 #
Учетно: для блока #footer задана высота 60px и для блока #content задается соответствено свойство padding-bottom:60px
прохожий: Гость | 15.04.2009, 21:08 #
http://www.linedmk.com/primers/css/hablon3k.html - не долго думая, сузить браузер по вертикали до #header и будет понятно о чем я пытаюсь сказать. Если вставить много текст в колонку center, footer будет поверх контента, т..к он привязан к нижней кромке окна браузера и имеет позишн абсолют
Суперадмин: | 17.04.2009, 01:11 #
Вы правы, если просматривать в браузере Firefox или Opera, в IE отображается как задуманно. Но решить эту проблему можно указав для блока #content свойство overflow: hidden;
прохожий: Гость | 17.04.2009, 21:09 #
Отлично! Кроссбраузерно!
прохожий: Алексей | 21.05.2009, 02:54 #
В IE8 при таком раскладе сверху, над header остается пустая полоса. Как бы от нее избавиться?
Суперадмин: | 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>
Суперадмин: | 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
Суперадмин: | 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 сразу ) хотя знать надо и то и другое!
Суперадмин: | 13.08.2009, 19:10 #
Перевести в XHTML приведенный здесь код довольно просто: нужно заменить <br> на <br /> и так далее. :))
Знать XHTML конечно нужно! А вообще мне лично валидатор до лампочки, лишь бы сайт нормально отображался в браузерах! :))) Тем более что еще не все браузеры соответствуют стандартам.
прохожий: Гость | 15.08.2009, 04:36 #
Огромное спасибо! Мучился почти вечер пытаясь совместить div с абсолютным и относительным позиционированием, пока не наткнулся на claer и не совместил с float.
прохожий: алекс | 28.09.2009, 07:19 #
в опере 9.23 при изменении размера окна по высоте футер не привязан книзу окна, как в ие или в фф...почему?
Суперадмин: | 29.09.2009, 07:08 #
Если нажать на кнопочку обновить, то отобразиться как надо. У оперы проблемы с динамическим отображением содержимого страницы. Этот случай лишь доказывает это обстоятельство.
прохожий: INOK | 07.10.2009, 09:17 #
спасибо. Как бы еще и боковые колонки вытянуть на 100% по height
Суперадмин: | 08.10.2009, 18:22 #
Вопрос интересный :) Но ответа на него я не знаю :(
прохожий: Гость | 17.10.2009, 00:33 #
Ответ можно подсмотреть здесь:
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths
прохожий: 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 #
сайт: www.intop.su
Задавай стилями border:1px solid #000; или то, что тебе надо. Данный пример сделает сплошную рамку со всех сторон дива черным цветом
прохожий: В ГАЕ .RU | 04.11.2009, 06:58 #
сайт: vgae.ru/
Постараемся переделать свой сайт под блочную верстку
прохожий: Гость | 19.11.2009, 20:53 #
сайт: imuz.org
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 #
сайт: meb.el-dom.net/
И мне интересно. А также я всё-таки не понял как в примере данной статьи можно колонки контента растягивать по высоте от верхнего до нижнего колонтитула. Рекомендуемую ссылку на материал на английском языке просмотрел, но такого именно примера не нашел. А ведь не хватает ответа на эти вопросы. Может кто-нибудь посоветует книгу, где мало воды и много валидных решений? Ктати, по той ссылке часто приводятся примери решений без хаков, чистым кодом, универсальным для всех.

"Только не учите меня жить, лучше помогите интеллектуально" )))
прохожий: Гость | 12.01.2010, 08:38 #
сайт: ufish.ru
Я конечно еще молодой веб программист и занимаюсь эти примерно пол года но некоторые хитрости в программирование блоками div знаю
Тут очень многих как я заметил интересует вопрос как растянуть блок div ну например до низа странице описного автором.
есть пару способов ну например:
1)
<html>
<head>
<title>TITLE</title>
<style type="text/css">

* { margin:0px; padding:0px; }
</style>
</head>
<body style="text-align:center;">

<!-- выравнивание для ie6 по центру-->
<div style="margin:0 auto;width:700; text-align:left;">

<!-- голова -->
<div style="background:#999;width:700px;float:left;">голова</div>

<!-- тело -->
<div style="background:#777;width:700px;float:left;">

<div style="border:1px solid red;width:100px;float:left;">левый блок<br>1<br>2</div>
<div style="border:1px solid red;width:494px;float:left">основной блок<br>1</div>
<div style="border:1px solid red;width:100px;float:right;">правый блок<br>1<br>2<br>3</div>

</div>

<!-- низ -->
<div style="background:#999;width:700px;float:left;">низ</div>
</div>
</body>
</html>
это обычная процедура разметки сайта
Страница будет растягиваться по мере наполнения полей информацией и в том поле в котором её окажится больше всего растянит страницу на максимальную величину
для создания полей разного цвета (визуально они будут казаться растянутыми до низу) можно использовать стили эмитации таблици префеденные ниже

table
Элемент отражается как табличный элемент.
inline-table
Элемент ведет себя как табличный, но отображается как инлайновый прямоугольник.
table-row-group
Элемент ведет себя как tbody элемент.
table-header-group
Элемент ведет себя как thead элемент.
table-footer-group
Элемент ведет себя как tfoot элемент.
table-row
: Элемент ведет себя как tr элемент.
table-column-group
Элемент ведет себя как colgroup элемент.
table-column
Элемент ведет себя как col элемент.
table-cell
Элемент ведет себя как td элемент.
table-caption
Элемент ведет себя как caption элемент.

2) способ создать несколько задних фонов и залить gif фоновой картинкой с различными расположениями

3) способ поэксперементировать с тегом position

ну и в качестве примера верстки блоками div приведу не сложный сайтик www.ufish.ru как образец
прохожий: theFlame | 13.01.2010, 04:21 #
Честно сказать, не понял. До низа страницы способ 1 не растягивает, если коротко.
прохожий: theFlame | 13.01.2010, 04:58 #
Ладно, поставим задачу по-другому.
Допустим, нужно сделать всего одну мелочь. Есть прямоугольный контейнер определённой ширины. Нужно закрепить его по центру так, чтобы когда мало текста, он растягивался на всю высоту окна браузера, а когда текст переполняет его, то он должен растягиваться вниз вместе с текстом и во всех браузерах.

Честно сказать, удивлён. Мне казалось, что это одна из самых популярных задач, а решения на неё я почему-то нигде найти не могу. Или не понимаю чего-то. Может кто-то встречал такой пример?
прохожий: Гость | 20.01.2010, 22:25 #
сайт: ufish.ru
есть такая штука в css как минимальная и максимальная ширина и высота (min-height, max-height, min-width, max-width) какого либо объекта. Правда они тебе наверно не помогут так как у всех окна браузера разного размера, а указать в процентах значение атребута min-height, max-height, min-width, max-width записаного после тега body нельзя

пример
<body>
<div style="min-height:100%">
<!--content-->
</div>
</body>

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


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

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

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

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

Незабудьте правильные пути прописывать к изображению.
Возможно также нужно будет добавить пробел в блок (если в нем вообще нет текста)
<div id="wapka">&nbsp;</div>
прохожий: Гость | 24.02.2010, 10:18 #
сайт: worldgenius.ru/
Бодрого времени суток!
Только начинаю изучать верстку div'ами. Встала такая проблема, что при полупрозрачных блоках в их содержимом не отображаются ссылки, не подчеркиваются и нет перехода по ссылке. Если кто сталкивался с подобным, подскажите выход из ситуации,плз!
прохожий: Наталья | 05.03.2010, 20:59 #
сайт: unix.am
Хороший пост, побольше бы толковых топиков!
прохожий: Тренер | 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 #
а как грамотно подобрать картинку какой размер чтоб в блоке не сильно растягивало? о_О
Суперадмин: | 27.03.2010, 07:46 #
Это вы про что спрашиваете?
прохожий: Гость | 01.04.2010, 04:33 #
сайт: zakruti.com/
У вас написано что можно выровнить div тег для IE методом <div style="text-align:center;">
Да, элемент div ценрируется, но и текст в нем то же. Получается так, как если бы вместо этого кода прописать просто <center></center>

Как отценрировать div в IE но не ценрировать текст в нем. Как же блин достал этот IE ...
Суперадмин: | 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 #
сайт: lisitsa.info/
Спасибо огромное! Статья очень помогла. Краткость и наглядные примеры позволили сделать мне еще один шаг по направлению к Div'ной верстке. Теперь дело остается за практикой!
прохожий: Гость | 06.04.2010, 03:41 #
А как можно фон задавать картинкой?
Суперадмин: | 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 расположенном чуть ниже...? м?
Суперадмин: | 25.04.2010, 19:41 #
Такие вещи делаются с помощью javascript.
прохожий: PhoeNiXX | 01.05.2010, 23:55 #
Спасибо за статью, отлично написано!

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

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

Подскажите, пожалуйста, а то я в ступоре.
Суперадмин: | 11.05.2010, 07:29 #
хз.
прохожий: RedCat | 13.05.2010, 03:35 #
Попробуй поместить все свои три контейнера в один и обозначить ему свойство overflow=hidden и align=center и min-width=960px. а центральному ничего не надо, т.к. он итак у тебя в ширину задан.
но думается мне что тогда не только боковые у тебя скроются если размер окна меньше будет, но и снизу все обрежется если не задашь высоту сам... а если будет ширина экрана в 1000 пикчелей, то и показывать тебе будет частично и правую и левую колонки.
100% решается только скриптом
прохожий: Pan | 09.12.2010, 16:53 #
можно и еще вот как:
задать 1 большой контейнер, шириной равной 100%(!важно) и поместить фоновый рисунок, шириной 150+960+150 (150- это те самые фоны, который Вы хотите, а 960-просто пустое поле), выровнять его по центру. Затем в этото большой див впихнуть див, который является главным контентом(960), задать фиксированную ширину (!важно) и ВУОЛЯ- всё как надо, только нужно уточнить кое-какие детали:
1) Вам нужно, чтобы эти поля по 150рх были плавающими по границам главного контента
2) Не совсем точно были указаны пожелания, по представлению этих полей, т.к. левая граница всегда будет видна- скрываться будет только правая
3) лучше всего- всё в личку ;)
прохожий: Толик | 18.05.2011, 20:08 #
E-mail: написать сообщение
вероятней всего они будут обрезаться только в том случае если выполнены в виде фона под центральным блоком
прохожий: Mark | 06.05.2010, 00:19 #
Все гениальное просто. Спасибо, уважаемый автор!
прохожий: Гость | 09.05.2010, 06:14 #
А причем здесь css?
Это же все делается в документе html, даже при отсутсвии документа css, все рабоет так.
Статья вроде понятная, но зачем здесь css? Объясните
Суперадмин: | 11.05.2010, 07:31 #
Код CSS пишется хоть в html файле, хоть в отдельном. Это не важно, он будет 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>
Суперадмин: | 13.05.2010, 06:32 #
Во-первых, я разве против? Если работает нормально, то используйте этот вариант. :)
Во-вторых. Особо не смотрел, но у вас задана высота блоков. А это, по-моему, не очень хорошо.
прохожий: RedCat | 14.05.2010, 06:08 #
Высота задана просто для примера) можно и без нее.
прохожий: Гость | 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 #
сайт: fromgomel.com
Отличная статья!
Для полного счастья не хватает только добавить в CSS
стили для принтера - скыть управляющие правые и левые колонки:

@media print{
#left{display:none;}/*Прячем левую*/
#right{display:none;}/*Прячем правую*/
#center, #container3{width:100%; float:none;}/*Раздвигаем среднюю на всю ширину*/
}
прохожий: GetTo2face | 03.08.2010, 01:48 #
сайт: getfreebie.ru
Таблицами как-то проще верстать %)
прохожий: Владимир | 08.08.2010, 06:04 #
Как div дружит с табличками?
Например, можно ли задать ширину для шаблона таблицей, а содержимое оформить divами?
Суперадмин: | 10.08.2010, 03:09 #
Зачем ширину задавать таблицами? Почему сразу не div-ами?
прохожий: Егор Егоров | 18.09.2010, 14:31 #
сайт: intsite.su
нашел что искал,спасибо.
прохожий: Юра | 28.09.2010, 07:04 #
сайт: italia-auto.ru
Хотелось бы увидеть расшифровку строки:
width:expression(document.body.clientWidth > 800 ? "100%" : "800px");
А использование id равносильно class? только отличие, что перед названием класса . а перед названием id #?
Суперадмин: | 01.10.2010, 20:48 #
Эта строка для всеми "любимого" IE6 и нужна она для реализации свойства CSS min-width, которое не работает в IE6.
И по ID. ID - это идентификатор html-элемента. ID в коде html можно указывать лишь одному элементу, тогда как один и тот же класс (class) можно указывать любому количеству элементов.
прохожий: Юра | 19.10.2010, 06:44 #
сайт: hyundai-new.ru
я имею ввиду, что использвать id и class равносильно, только id будет использоваться для одного элемента?
Суперадмин: | 26.10.2010, 07:17 #
Использование id и class в каскадых таблицах стилей равносильно.
прохожий: Гость | 28.09.2010, 23:32 #
При крупном объекте в центральном блоке, в ИЕ6 при уменьшении ширины окна колонки будут "складываться"...
прохожий: Гость | 05.10.2010, 07:12 #
Честно говоря сначала обрадовался, а потом понял что кривая верстка в примере, ПРАВАЯ колонка при заполнении более 100% по высоте пролазиит под футер. так что автору еще учится и учится ... впрочем как и мне ... гуглить и гуглить.
Суперадмин: | 06.10.2010, 07:43 #
Я сделал уже много сайтов с такой версткой, и нормально все работает. Ищите причины, почему у вас не работает правильно пример.
прохожий: Гость | 09.10.2010, 23:20 #
А что искать то? Я на вашем примере http://www.linedmk.com/primers/css/hablon3k.html добавил в страницу просто больше текста с переносом <br> и увидел результат - футер стоит на месте на 100% по высоте ОКНА , а колонки пролазиют под низ, в зависимости от наполнения.
прохожий: Толик | 18.05.2011, 20:01 #
E-mail: написать сообщение
я добавляю текст и у меня не пролазит... может в браузере проблема?
Суперадмин: | 25.05.2011, 18:45 #
В каком это смысле "не пролазит"?
прохожий: 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 #
сайт: kmblog.ru
Отличный материал для самообразования! Хотя, согласитесь, что табличную верстку освоить куда проще.
прохожий: Гость | 01.11.2010, 04:34 #
а можно сделать что бы несколько горезонтальных линий было на одной строке??- -
Суперадмин: | 07.11.2010, 20:35 #
В каком это смысле?
прохожий: Гость | 03.12.2010, 06:32 #
Спасибо большое! Работаю в wordpress, но приходиться перерабатывать шаблоны. Очень помогло, очень наглядно и понятно.
прохожий: pozitive | 05.12.2010, 02:57 #
сайт: pozitive.biz/
Сейчас буду пробывать переводить сайт на 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 #
сайт: www.garazh62.ru
Спасибо за статью! Вёрстка блоками div также актуальна. Пытаюсь перекроить шаблон Joostina 1.3. Некоторые вещи заводят в тупик.
прохожий: Гость | 18.02.2011, 11:08 #
Замучался искать, как разместить текст и изображение по центру чтоб валидатор не ругался на align:center с примером пожалуйста.
Суперадмин: | 18.02.2011, 18:46 #
Может text-align: center ?
прохожий: max | 02.03.2011, 03:23 #
Подскажите, может кто нибудь знает, как сделать разметку для блока DIV, который содержит два дочерних DIVа. Первый должен иметь высоту в соответствии с содержимым, а второй заполнять всю остальную область родителя и иметь прокрутку по содержанию. Оба растянуты на ширину, равной ширине родителя.
пользователь: | 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 #
сайт: grabz.ru/
Такая вёрстка сайта, на мой взгляд, больше нравится ПС. Спасибо.
прохожий: Евгеша | 10.05.2011, 05:29 #
Спасибо огромное мне как новичку очень помогло
прохожий: Толик | 18.05.2011, 19:55 #
E-mail: написать сообщение
спасибо! объяснения понятные и доступные.
Помогите пожалуйста разобраться в еще одном аспекте: мне нужно сделать наложение одного блока на другой с помощью атрибута z-index: 0; высота 1) 400 2) 1000рх, и чтоб третий блок встроился ниже относительно границы 1000рх. Что-то у меня не получается так сделать...
Суперадмин: | 25.05.2011, 18:46 #
ничего не понял...
пользователь: | 02.08.2011, 00:29 #
Здравствуйте. В магазине товар размещается в одной колонке.
Как сделать чтобы товар размещался в 3-х колонках?
Суперадмин: | 02.08.2011, 04:59 #
Для отображения списка товаров в 3-х колонках можно воспользоваться таблицами.
пользователь: | 02.08.2011, 17:33 #
Здравствуйте.
В каком файле сделать изменения?
Суперадмин: | 03.08.2011, 07:39 #
Вопросы по интернет-магазину задавайте, пожалуйста, на странице
http://www.linedmk.com/page60.html.
А файл отвечающий за вывод списка товаров в интернет-магазине
/moduls/intshop/filesmodul/forming_tab_synopsis_products.php
прохожий: царь | 03.01.2012, 11:45 #
сему пацаку поставить памятник
прохожий: seo-likes | 17.01.2012, 09:15 #
E-mail: написать сообщение
сайт: seo-ask.net/
Это все, конечно, хорошо, но, не работает, если пытаться сделать шаблон резиновым. Если не задать у второго блока ширину, то он располагается ниже первого блока, даже, если нужно сбоку. Мне пришлось ширину для второго блока задавать в процентах, иначе никак не выходило
прохожий: AlexB | 18.04.2012, 04:32 #
E-mail: написать сообщение
сайт: ftponline.ru
Хорошая статья.
Я мучался, не мог две формы в линию выставить, вставали друг на друга, а надо было всего лишь 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-ы.
Дай бог вам здоровья, прямо помолюсь за вас, чтобы бог вам дал побольше - всего, чего хотите.
Еще раз СПАСИБО!!!!
Вход в аккаунт
Новости сайта