Веб-компас сайтостроителей
Верстка блоками DIV
Верстка блоками DIV имеет ряд преимуществ по сравнению с табличной версткой. Верстка блоками DIV обеспечивает более быструю загрузку страницы сайта, содержимое блоков DIV отображается по мере загрузки (в отличие от таблицы, в которой содержимое не отобразиться до тех пор, пока все ее содержимое не загрузиться), код страницы удобочитаем. Но и блочная верстка не идеальна, есть и недостатки. Так нельзя получить представление данных как это делает таблица. То есть таблицы нужно использовать для отображения табличных данных. Табличную верстку также можно использовать и для задания структуры страницы, но злоупотреблять все, же не стоит. Давайте посмотрим, как можно управлять положением блока DIV на странице сайта.
Для начала рассмотрим стилевое свойство float, которое управляет позиционированием перемещаемого блока. Свойство float может принимать значения
Совместно с float очень часто используется стилевое свойство clear, которое управляет потоком после перемещаемых блоков. Стилевое свойство clear задает, какие границы элемента страницы не могут совпадать с предшествующим перемещаемым блоком свойством float. Свойство clear может принимать значения
Для иллюстрации работы свойств float и clear, а также для ознакомления с основами, как осуществляется верстка блоками DIV, рассмотрим следующий пример: создадим три блока DIV
В браузере отобразиться этот HTML-код следующим образом
Все три блока располагаются один под другим и имеют ширину равную ширине окна браузера (или ширине HTML-элемента страницы, с этим кодом). Теперь изменим ширину каждого блока DIV.
Отобразится в браузере этот код следующим образом
Ширина блоков будет у каждого своя, но располагаться будут также один под другим. Далее каждому блоку укажем стилевое свойство float со значение left:
Получим следующее представление
Ширина у блоков осталась такая же, как и в предыдущем примере, но свое положение они изменили: выстроились в один горизонтальный ряд. Если добавить еще один блок, то он отобразится не под записанными ранее блоками, а по-другому. В общем случае определить, как отобразится его содержимое, нет возможности.
Но в нашем случае он отобразится следующим образом
Чтобы новый блок располагался ниже предшествующих блоков, нужно задать ему свойство clear, с соответствующим значением, в нашем случае можно задать значение либо both, либо left:
Полученный код отобразится следующим образом (причем в разных браузерах, таких как IE, Opera и Firefox, пример будет отображаться с отличиями)
С помощью приведенных свойств создают структуры страницы различной сложности, в том числе состоящих из трех столбцов, с резиновыми либо c фиксированными размерами.
Верстка блоками DIV предусматривает также и центрирование блока div в каком-либо элементе HTML-кода. Для центрирования блока в браузерах Opera и Firefox нужно использовать свойства margin-left и margin-top со значением auto, например
Но подобный код не работает в браузере IE6, для этого браузера нужно центрируемый блок DIV поместить в дополнительный блок DIV, в котором будет стилевое свойство text-align со значением center. Например
То есть в браузере IE6 можно управлять положением блока DIV свойством text-align, используя значения left, center, right. В браузерах Opera и Firefox управлять положением блока DIV с помощью свойства text-align нельзя, только свойством margin.
В общем случае для центрирования блока DIV получим код, который будет одинаково отображаться в различных браузерах
Верстка блоками DIV не обходится без управления положением HTML-элементов с помощью стилевого свойства position, которое определяет схему позиционирования блока. Свойство position может принимать значения
Для задания положения блоков, у которых свойство position имеет значение relative, absolute или fixed, используются свойства top, left, bottom и right. Познакомимся с ними.
Задавать величины перечисленных выше свойств можно в абсолютных значениях (например, пиксели), в процентных величинах относительно размеров родительского элемента, и также могут принимать значение auto (является значением по умолчанию).
При абсолютном, относительном и фиксированном позиционировании блоки могут накладываться друг на друга, и в этом случае может появиться вопрос, какой из них окажется "выше"? То есть, какой элемент будет отображаться, а какой будет перекрываться находящимся "выше" блоком. Решить этот вопрос поможет свойство z-index. Оно определяет позицию уровня, которую будет занимать блок. Его значением может быть любое положительное или отрицательное целое число. При этом элементы с большим значением z-index будут перекрывать блоки с меньшим значением этого свойства.
Для иллюстрации описанных выше свойств рассмотрим пример. Создадим несколько блоков без свойств позиционирования.
Для ознакомления с относительным позиционированием добавим в один блок свойства относительного позиционирования
Для ознакомления с абсолютным позиционированием посмотрите, как отобразится следующий код в браузере
В последнем примере, для того чтобы положение абсолютно позиционируемого блока можно было задавать свойствами top и left относительно того места где он был бы расположен при обычном позиционировании, в код был добавлен относительно позиционируемый блок с id="dopoln_block".
В завершение темы "Верстка блоками 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
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
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
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
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
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.10.2008, просмотров 476698
Еще статьи из данной категории
Предыдущие статьи
- нет
Следующие статьи
Новости сайта
-
05.05.2022Уважаемые пользователи, наш сайт переехал на новый домен, но все материалы останутся без изменений.
-
06.04.2020Уважаемые пользователи, сегодня был обновлен наш сайт www.linedmk.com – сделан новый адаптивный дизайн, улучшена навигация по сайту и улучшен поиск по статьям.
-
12.10.2012С сегодняшнего дня официально прекращена поддержка продуктов реализованных на CMS linedmk.com.
Последние публикации в каталоге статей
Партнеры сайта
Современный бесплатный скрипт интернет-магазина на CMS boxcode.ru.
Примером может следить ВКонтакте...
Там шапка сайта и меню одно целое и не обновляется почти, а подгружается содержимое внутри и изменяется адрес страницы...
Как сделать что то аналогичное?
Единственное, что не понял в итоговом шаблоне какова роль div-ов container. Без них не работает, а что они дают и почему их 3. Не совсем понятно.
<div id="content">
<div id="container1">
<div id="container2">
<div id="container3">
типа как в таблицах <td valign="middle"></td>
http://xpoint.ru/know-how/CSS/VerticalAlign
http://cssing.org.ua/2005/07/14/vertical-align-middle/
Знать XHTML конечно нужно! А вообще мне лично валидатор до лампочки, лишь бы сайт нормально отображался в браузерах! :))) Тем более что еще не все браузеры соответствуют стандартам.
Интересно почему? ^_^
А за статью, спасибо)
В моем сайте есть левая колонка и контент, ну так вот когда блок с контентом заполняется собственно контентом и допустим height в рез-те стал 200px , а в левом меню мало всего написано (предположим height получился 100px) и получается ступень, а теперь вопрос как сделать так чтобы левое меню было одной длины с контентом не зависимо от его величины, и на оборот если левое меню вдруг длиньше по высоте чем контент как их уровнять, тупо прописать стат. высоту я не могу потому что хочу сверстать шаблон под Joomla и соответственно не могу знать какой длины будут страницы. Заранее спасибо за ответ на вопрос.
Почему так? никак не соображу...
Мне интересна кодировка на UTF-8 которая отлична воспринимает киррилицу... Еще хотел спросить с jQuery 1.3 все будет нормально, там вроде как раз используется исключительно UTF-8.
Прошу поправить меня, если где-то я неграмотен...
За ранее благодарю за ответ.
Почему в аргументах такого подхода сравнивают только вес html-разметки, игнорируя конечный вес всех css, полученных ради совместимости? И разве на самом деле основной вес страницы формируется не её содержанием с картинками? Я вот сопоставил весь секс проскальзывающий здесь в комментариях и хочу спросить, а может _иногда_ (например, как в данном случае при разметке страницы) может всё же использовать классику, т. е. таблицы? А уже вложения можно делать дивами, если нужно? Таблицы тоже очень даже неплохо слушают цсс. Если расположение содержания не меняется, то размер и фон спокойно можно изменять одной только правкой css.
Хотя, как я понял, рассматриваемый в данной статье пример охватывает все самые основные проблемы вёрстки подобным образом, что обеспечивает достаточный уровень подготовленности, в случае освоения материала. Когда-то в своё время учил html. С источником повезло тем, что в нём приводились только те теги, которые одинаково воспринимаются во всех основных браузерах. В результате мне это не только сэкономило время, но и нервы, потому что даже в самых первых работах практически не было проблем с совместимостью в разных браузерах. За что отдельно признателен автору. Отсюда возникает вопрос.
Может и в вёрстке вивами тоже можно изложить кратко основные теги и методы, которые бы позволили, допустим через вложения, получать одинаковые результаты хотя бы в самых популярных браузерах и их версиях? Было бы полезно
валидный код- отображается одинаково везде, КРОМЕ, как правило, всеми любимого IE, но граммотный верстальщик решит любую задачу(валидность + семантика = МОЗГ ;)
"Только не учите меня жить, лучше помогите интеллектуально" )))
Заранее спасибо!
*lol* :D Отжёг!!!
В HTML пишу:
<div id="wapka"></div>
В CSS:
#wapka {background:url(адрес); width:1000; height:200;}
Но картинка в фоне не отображается =(
background: #333 url(адрес);
либо разделяйте свойства
background-color:#333;
background-image: url(адрес);
Незабудьте правильные пути прописывать к изображению.
Возможно также нужно будет добавить пробел в блок (если в нем вообще нет текста)
<div id="wapka"> </div>
Только начинаю изучать верстку div'ами. Встала такая проблема, что при полупрозрачных блоках в их содержимом не отображаются ссылки, не подчеркиваются и нет перехода по ссылке. Если кто сталкивался с подобным, подскажите выход из ситуации,плз!
Может я что-то пропустил или не до понял?...
А вообще статья лучшая!!!
Может быть всё же кто-нить знает ответ на этот вопрос?
<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%).
Да, элемент div ценрируется, но и текст в нем то же. Получается так, как если бы вместо этого кода прописать просто <center></center>
Как отценрировать div в IE но не ценрировать текст в нем. Как же блин достал этот IE ...
а для выравания самого блока по центру используют margin {margin:0 auto} это сокращенная запись!
Если кому не понятно, могу расписать так {margin:0 auto 0 auto}
проверялось на Firefox, Opera, IE 6,7,8 (на 5.5 отображается криво)
У меня вот такой вопрос, никак не могу понять, как сделать:
Есть контейнер фиксированной ширины по центру (960 пикселей) в нем располагается основное тело сайта. А по бокам этого контейнера (с двух сторон) нужно сделать два контейнера шириной по 150 пикселей каждый и в них разместить некую графику (методом задания бэкграунда див-тегам, несколько див-тегов с absolute позиционированием внутри этих колонок). Это я сделал, но основная задача в том (и я не могу понять как это сделать) - эти боковые колонки по 150 пикселей с графикой должны обрезаться окном браузера без появления горизонтальной прокрутки (если разрешение экрана маленькое, или при изменении размера окна браузера вручную) а вот центральный контейнер 960 пикселей - не должен обрезаться, и если размер экрана будет меньше него - то должна появляться горизонтальная прокрутка.
Подскажите, пожалуйста, а то я в ступоре.
но думается мне что тогда не только боковые у тебя скроются если размер окна меньше будет, но и снизу все обрежется если не задашь высоту сам... а если будет ширина экрана в 1000 пикчелей, то и показывать тебе будет частично и правую и левую колонки.
100% решается только скриптом
Это же все делается в документе html, даже при отсутсвии документа css, все рабоет так.
Статья вроде понятная, но зачем здесь css? Объясните
(лишнее я опустил. только главное)
<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>
Во-вторых. Особо не смотрел, но у вас задана высота блоков. А это, по-моему, не очень хорошо.
Вот код:
<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;
}
Вот бы и школьные учебники такие толковые люди писали.
Для полного счастья не хватает только добавить в CSS
стили для принтера - скыть управляющие правые и левые колонки:
@media print{
#left{display:none;}/*Прячем левую*/
#right{display:none;}/*Прячем правую*/
#center, #container3{width:100%; float:none;}/*Раздвигаем среднюю на всю ширину*/
}
Например, можно ли задать ширину для шаблона таблицей, а содержимое оформить divами?
width:expression(document.body.clientWidth > 800 ? "100%" : "800px");
А использование id равносильно class? только отличие, что перед названием класса . а перед названием id #?
И по ID. ID - это идентификатор html-элемента. ID в коде html можно указывать лишь одному элементу, тогда как один и тот же класс (class) можно указывать любому количеству элементов.
У меня такая проблема. задний фон я сделал резиновый, из 4 кусков, чтобы и в стороны и в низ тянулся. но вот вниз не тянеца! Нижние части остаются на уровне непонятно каком. Остается неподвижными. Вы не могли бы дать дельный совет?
погуглил - вот еще один пример, у него подвал
не застывает на размер окна. Если совместить с http://www.linedmk.com/page32.html
то решение точно можно найти.
http://www.htmlcoder.com.ua/css_exemples/height100/index.html
Сейчас сделано таблицами, но не нравиться правая колнка иногда долго подгружаеться.
Как изменить визуально порядок по горизонтали я понял. А вот как управлять порядком слоёв по вертикали, если высота слоёв не известна? Это как-то возможно?
Т. е., допустим:
<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, должен сдвигаться вниз на высоту второго контейнера, которая варируется в зависимости от содержимого.
Может у кого получалось такое добиться?
<!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>
Помогите пожалуйста разобраться в еще одном аспекте: мне нужно сделать наложение одного блока на другой с помощью атрибута z-index: 0; высота 1) 400 2) 1000рх, и чтоб третий блок встроился ниже относительно границы 1000рх. Что-то у меня не получается так сделать...
Как сделать чтобы товар размещался в 3-х колонках?
Я мучался, не мог две формы в линию выставить, вставали друг на друга, а надо было всего лишь float прописать)
Помогли, спасибо.
а у вас в шаблоне верстка валиться в 6,7 осле (
хотя conteiner по всем правилам хака описан
На большинстве сайтов про div-ную разметку так заумно написано, что хочется пристрелить автора.
Первый раз, читая объяснения, понимаю - о чем речь. И мои попытки начать верстку div-ами дают результаты.
Многое еще хочется для себя прояснить, но я теперь все меньше ненавижу div-ы.
Дай бог вам здоровья, прямо помолюсь за вас, чтобы бог вам дал побольше - всего, чего хотите.
Еще раз СПАСИБО!!!!