Блочные элементы

Влад Мержевич

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся контейнеры <DIV>, <H1> и <P>.

Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них встроенные элементы (<SPAN>, например). Запрещено добавлять внутрь встроенных элементов блочные (пример 1).

Пример 1. Использование блочных элементов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Блочные элементы</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<div><p>Lorem ipsum dolor sit amet...</p></div>
<h2><a href="link1.html">Ut wisi enim ad minim veniam</a></h2>
</body>
</html>

В данном примере параграф (тег <P>) вставляется внутрь контейнера <DIV>, а ссылка (тег <A>) — в заголовок <H2>. Кстати, ошибкой будет поступить наоборот — добавить <H2> в контейнер <A> (<a href=”link1.html”><h2>Ut wisi</h2></a>), поскольку тег <A> не относится к блочным элементам.

Замечание

Вкладывание блочных тегов внутрь встроенных элементов характерно, скорее, для новичков, которые еще не понимают разницы между ними. К тому же браузеры научились отлавливать подобные ошибки и отображают код более-менее корректно. Тем не менее, рекомендуем придерживаться в этом вопросе спецификации, чтобы выводить веб-страницу без ошибок.

Ширина блочных элементов

По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Здесь следует оговорить, что под этим подразумевается. Например, если тег <DIV> в коде документа присутствует один, то он занимает всю свободную ширину окна браузера и ширина блока будет равна 100%. Стоит поместить один тег <DIV> внутрь другого, как ширина внутреннего тега начинает исчисляться относительно его родителя, т.е. внешнего контейнера.

Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока (width), отступов (margin), полей (padding) и границ (border). В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.

Пример 2. Ширина слоя

В результате данного примера получим слой шириной 342 пиксела. На рис. 1 показано, из чего складывается ширина слоя.

Рис. 1

Рис 1. Ширина блочного элемента

В том случае когда !DOCTYPE в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение параметра width.

Разберем еще один пример связанный с шириной. По умолчанию ширина слоя задается как auto, это позволяет вписывать слой в окно браузера, не принимая в расчет значения установленных полей. Если изменить ширину на 100%, то при добавлении значения отступов, полей или границ неминуемо появится горизонтальная полоса прокрутки.

Для получения универсального результата существует несколько подходов. В примере 3 продемонстрировано создание трех слоев, ширина которых определяется в процентах.

Пример 3. Ширина слоя в процентах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ширина</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
#layer1 {
width: 100%; /* Ширина первого слоя */
padding: 10px; /* Поля вокруг текста */
background: #fc0; /* Цвет фона */
}

#layer2 {
width: 100%; /* Ширина второго слоя */
background: #cc0; /* Цвет фона */
}

#layer2 P {
padding: 10px; /* Поля вокруг параграфа */
}

#layer3 {
background: #3ca; /* Цвет фона третьего слоя */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>

<div id="layer1">Lorem ipsum dolor sit amet...</div>
<div id="layer2"><p>Lorem ipsum dolor sit amet...</p></div>
<div id="layer3">Lorem ipsum dolor sit amet...</div>

</body>
</html>

Результат примера показан на рис. 2.

Рис. 2

Рис. 2. Отображение ширины слоев в браузере Firefox

Ширина первого слоя в данном примере (layer1) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя (layer2) ширина также задана 100%, но поля определяются для внутреннего параграфа (тег <P>). За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3) вообще не применяется параметр width, поэтому он определяется по умолчанию — auto. В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.

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

Высота

С высотой блочных элементов дело обстоит аналогично ширине. Т.е. браузер Internet Explorer (а также Opera) за высоту слоя принимает значение параметра height, а Firefox добавляет к нему еще значение параметров margin, padding и border. Если высота слоя не установлена явно, то она вычисляется автоматически исходя из объема содержимого.

Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (пример 4). Браузеры и здесь начинают по-своему отображать подобную ситуацию.

Пример 4. Высота слоя

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Высота</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
#layer1 {
width: 300px;/* Ширина слоя */
background: #fc0; /* Цвет фона */
height: 50px; /* Высота слоя */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>

<div id="layer1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
</div>

</body>
</html>

Результат данного примера продемонстрирован на рис. 3.

Рис. 3а
а. Internet Explorer

Рис. 3б
б. Firefox

Рис. 3. Высота блока в разных браузерах

Видно, что Internet Exporer увеличивает высоту слоя, подстраивая ее под содержимое (рис. 3, а), а Firefox (и Opera) оставляет высоту неизменной, за счет чего текст не помещается в блоке и накладывается поверх слоя (рис. 3, б).

Цвет фона

Цвет фона элемента проще всего устанавливать через универсальный параметр background. Фоном при этом заливается область, которая определяется значениями атрибутов width, height и padding (рис. 4).

Рис. 4

Рис. 4. Область слоя, которая заполняется фоновым цветом

Таким образом, margin не принимает участия в формировании цветной области.

Границы

Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается и различие при отображении границ. Браузер Internet Explorer проводит рамку внутри блока, а Firefox — снаружи. Но если использовать фоновую заливку, то увидим совершенно противоположную картину (рис. 5). А все потому, что Firefox (Opera) цвет фона устанавливает по внешнему краю границы, а Internet Explorer — по внутренней.

Рис. 5а
а. Internet Explorer

Рис. 5б
б. Firefox

Рис. 5в
в. Opera

Рис. 5. Отображение рамки в браузерах

В примере 5 показано, как создать код для получения подобной границы.

Пример 5. Пунктирная рамка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Рамка</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
#layer1 {
width: 300px; /* Ширина слоя */
padding: 10px; /* Поля вокруг текста */
background: #fc0; /* Цвет фона */
border: 5px dashed black;/* Параметры границы */
}
</style>
</head>
<body>
<div id="layer1">Lorem ipsum dolor sit amet...</div>
</body>
</html>

Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически одинаковым.

Резюме

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

Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями параметров height и width, но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы. Можно только посоветовать ограниченно использовать свойства width и height, поскольку по умолчанию браузер применяет аргумент auto, который заставляет настраивать размеры элемента автоматически.

Статья опубликована: 06.02.2006

Последнее обновление: 01.05.2008

Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.

Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
Потренироваться в написании комментариев вы можете в песочнице.

Комментарии к статье

meyra

20.04.2006

А какие значения padding, border, margin в пикселах стоят при auto?

Влад Мержевич

04.05.2006

Если явно margin не указывать для DIV-а, то он автоматически не добавляется.

shalFey

17.08.2006

На самом деле, я заметил, что Опера v9.01 не отображает блоки также как Эксплорер. То есть, в случае рассмотренного вами 2-ого примера, Опера отобразит блок шириной 342px.
Не очень понял, какой конкретно вариант отображения правильный согласно спецификации CSS. Поэтому 2 вопроса если можно: 1) в случае если ширина задана в пикселах, IExplorer или Firefox отображает "правильно"? 2) то же самое, если ширина задана в процентах.
Спасибо за статьи и внимание)

Влад Мержевич

18.08.2006

Дело не в том, в пикселах или процентах задана ширина блока, а в том, что браузеры за ширину слоя берут разное значение.

Для статьи ширину элементов я тестировал в браузере Opera 8.5, похоже, что в 9-ой версии модель расчета изменилась.

Юрий

23.08.2006

Подскажите, пожайлуста, можно ли добавить в слой вертикальную полосу прокрутки, если слой имеет определенную высоту, но меньшую высоты всего экрана?

Влад Мержевич

24.08.2006

Используй стилевой параметр overflow.

Маслаков А.В.

04.10.2006

У.в. Влад Мержевич, вот вы написали, что Firefox не увеличивает высоту слоя, а печатает поверх него, но не рссказали как с этим бороться. Я уже почти доверстал сайт, и уже только в конце столкнулся с этой проблемой, когда начал вс? проверять. Расскажите как мне поступить что-бы для релеативного слоя высота увиличивалась. Просто у меня вся страница изначально принимает высоту "экрана", а потом текстом она должна увеличисваться. Но в Firefox этого не происходит. У меня этот слой вложен в другие + были созданы слои-подложки и т.д. Одним словом получилось что-то очень сложное и в тоже время простое, но проблемму самостоятельно решить я не в силах, т.к. только учусь блочной в?рстке

Влад Мержевич

05.10.2006

Для блочной верстки нехарактерно явно задавать высоту слоя, потому как она вычисляется автоматически на основании контента. Если высота задается явно, то надо использовать свойство overflow, чтобы появились полосы прокрутки. Другие способы (подложки, например) противоречят концепции верстки слоями.

Арина

02.11.2006

Уважаемый Влад! Объясните, пожалуйста, почему в Опере между блоками остается пространство? Это и есть margin? В ИЕ блоки располагаются вплотную друг к другу. Заранее большое спасибо

corvideus

03.11.2006

То Арина: Если я правильно понял суть проблемы, то нужно использовать атрибут "float:left;" во всех слоях, которые необходимо состыковать друг с другом.

kost BebiX

14.11.2006

Наверное суть проблемы была не в "float: left", а в примере:
"Пример 3. Ширина слоя в процентах".
В IE блоки идут подряд без отступа, в лисичке или опере между ними остается свободное пространство.

Арина

22.11.2006

kost Bebix: именно так...

Арина

22.11.2006

По поводу границ. Совсем уже замучилась, хотя вроде мелочь. Есть #menubar с шириной в 100%, внутри располагаю горизонтальный список ul, который тоже должен быть в 100%, так как li у меня 5 штук и все по 20%. Если ul не задать всю ширину, то они не отображаются как надо - по всей ширине экрана. НО: вокруг меню нужно сделать бордюр. Если его проставить у ul (или у #menubar), то выскакивает прокрутка (100% + 1px + 1px) либо правый край границы "съезжает" вправо

Что делать?

Влад Мержевич

23.11.2006

2Арина
Вариантов решения несколько.
1. Не указывать 100% в качестве ширины, поскольку по умолчанию ширина стоит auto.
2. Для внешнего слоя задать ширину 100%, а для внутреннего - указать границу и поля, ширину не устанавливать.

Арина

23.11.2006

Влад, спасибо за совет. Попробую

Михаил

05.01.2007

Уважаемые верстальщики, не подскажете, каким образом можно заставить IE растягивать пустой блок на 100% высоты от родительского блока, заполненного данными?

Пример данного вопроса (этакий двухмерный резиновый дизайн) можно увидеть на www hot ee/sources/frames.html

Правильно работает под Opera и Firefox, но неправильно под IE

Александр

25.05.2007

Влад, Вы отвечали на вопрос о мозилле Маслакову А.В. тем, что
"Если высота задается явно, то надо использовать свойство overflow, чтобы появились полосы прокрутки."

Но это смотрится довольно неприятно, может быть есть ещ? какой то способ , верстают вроде бы, или используют хаки?

Александр

25.05.2007

На данный момент я наблюдаю более лучшую визуальную картину при помощи установки высоты в 100% height: 100%; overflow: visible;
Ноя полагаю, что можно найти и более лучший вариант.

Александр

01.06.2007

Маслаков А.В.

делайте стопроцентное растягивание фона из html или из body

V@dimk@

07.06.2007

Влад, обрати внимание на описание примера 1. Можно подумать, что нельзя использовать тег <p> в <div>-е. :"В данном примере параграф (тег <P>) вставляется внутрь контейнера <DIV>, а ссылка (тег <A>) - в заголовок <H2>. Кстати, ошибкой будет поступить наоборот - добавить <H2> в контейнер <A> (<a href="link1.html"><h2>Ut wisi</h2></a>), поскольку тег <A> не относится к блочным элементам."

Мне по началу так и показалось!!!

Полина

18.07.2007

Соглашусь с V@dimk@. Тоже сначала так полумала.

Roman

03.08.2007

Посоветуйте как решить такую проблему

есть слой <div> строго заданной ширины в котором есть еще слои и нужно добавить слой c relative позиционнированием и отрицательным смещением top:-47px, так чтобы главный слой не изменил своей высоты

привожу код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>pos</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
div * {margin:0;padding:0;}
#LayBirka {position:relative;left:1px;top:-30px; z-index:1000;width:117px;height:103px;}
#common{min-height:120px;background:#000040;margin-top:100px;}
.LinBluCommon{height:8px;font-family:verdana;font-size:0ex;background:#880040;width:200px;margin-top:2px}
</style>
</head>
<body>
<div id="common"style="">
<div class="fl_l">
<div class="cl_b fl_l w100">
<div class="LinBluCommon"></div>
<div class="LinBluCommon"></div>
<div class="LinBluCommon"></div>
<div class="cl_l" id="LayBirka"><img src="img/a1.gif" alt="birka" width="117" height="103"></div>
</div>
</div>
</div>

</body>
</html>

проблема в том что при помещении строки
<div class="cl_l" id="LayBirka"><img src="img/a1.gif" alt="birka" width="117" height="103"></div>

главный слой увеличивается ровно на высоту этого слоя - хотя визуально слой не выходит за пределы осоновного слоя.
{ни стилевой параметр min-height ни просто height для главного слоя не помогают } метод абсолютного позиционнирования не годиться из-за дальнейших проблем при изменении масштаба браузера итп.

буду благодарен за помощь!!!

Алексей

14.09.2007

Влад, по поводу параметра auto у блочных тегов. В примере 3 у Вас указан неправильный доктайп, поэтому IE допускает ошибку при отображении первого блока. Если использовать правильный доктайп <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, то во всех браузерах (Опера, ИЕ и Файерфокс) результат один и тот же(что и соответсвует спецификации)

Mishell

17.09.2007

<H1> - is inline element http://www.w3.org/TR/html401/struct/global.html#edef-H1

OSBoy

19.09.2007

Я никак не могу понять одной вещи:
Вроде бы по всем определениям: div - это блоковый компонент, то бишь прямоугольник, высота которого определяется содержимым блока!
НО, почему же тогда в мо?м случае (код ниже) при попытке вставить в div рисунок и "обтечь" его текстом, при условии, что общая "высота" текста, обусловленная количеством строк меньше высоты рисунка, рисунок вылезает за рамки div'а???
То есть, куда в этом случае девается эта самая прямоугольность блока, и какие есть предложения, чтобы вернуть е? обратно?
Ниже привожу кусок кода и ссылку на скриншот, поясняющий суть проблемы!

<div id="news">
<div id="darkhead"><div id="darktitle">Тестовая новость</div></div>
<div id="newscontent"><p><img id="newsimg" align="left" src="http://...img.jpg">Это тестовая версия краткой версии статьи (аннотации, вступления, введения статьи). Здесь можно что-нибудь написать, отражающее суть статьи.</p><a href="test.php" title="Read more...">Read more...</a></div>
<div id="newsfooter"><b>Добавлено:</b> вторник, 18 сентября 2007 20:14</div>
</div>
<div id="newspages">Страница: <span class="ditto_currentpage">1</span></div>

Скриншот:
http://funkyimg.com/u/32521SNAG_19092007_214137.jpg

Влад Мержевич

20.09.2007

DOCTYPE в примерах поправлю.

E}{i$T

20.09.2007

Если кому не сложно, скиньте плз начинающему верстальщику статью, как сделать горизонтальный список <ul> на HTML, уже много чего пробовал, неполучалось... (

OSBoy

20.09.2007

Не совсем в тему, но примерно так:
<STYLE>

</STYLE>
<Div class="hmenu">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div>

А ля критик

01.10.2007

Влад Мержевич, 05.10.2006 - я не считаю это ответом на вышенаходящийся вопрос. Либо файрфокс "не самый лучший браузер", либо ты не знаешь ответа и пытаешься показать обратное, вводя в заблуждение читателей. Tertum non datur.

Влад Мержевич

15.10.2007

Согласно спецификации CSS, при использовании параметра height высота блока меняться не должна. Вот Firefox и отображает текст поверх слоя, в том случае, если он не помещается в заданную высоту. Браузер IE наплевательски относится к спецификации и трактует ее по своему.

Исходя опять же из поддержки браузерами спецификации, следует, что "Firefox лучший браузер".

А что касается слоев и их высоты, то повторю свою позицию. Есть особенности слоев, которые следует учитывать при верстке. В частности, высота слоя формируется автоматически, исходя из содержимого. Если задана высота слоя, то она не должна меняться.

Если вас эти особенности не устраивают, верстайте таблицами.

Alx

16.10.2007

Влад Мержевич, спасибо большое за этот материал.

>В частности, высота слоя формируется автоматически, исходя из содержимого.
>> а почему же тогда такие проблемы у OSBoy на скриншоте?

еще вопрос, идеологический: у вас написано, что все стили необходимо отделять от html? я понимаю такой подход при использовании некоторых одинаковых элементов, объединенных одним class'ом или каких-то крупных, основных элементов страницы.
но зачем выносить в css стили абсолютно всех элементов? получается, тег style вообще не рекомендуется использовать?..

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

спасибо!

Влад Мержевич

21.10.2007

Совершенно верно, параметр style лучше вообще не использовать.
Про доктайп на русском языке не встречал хороших статей. На англ. вот подробное описание поведения браузеров:
http://hsivonen.iki.fi/doctype/

Андрей Искатель

10.01.2008

Влад Мержевич, спасибо за этот материал.
Однако я для себя не вижу приемуществ использования новых доктайпов и полностью отказываться от табличной верстки.
Я всегда делал резиновый дизайн, где часть страницы имела фиксированные размеры, а часть относительные. С таблицами, конечно были проблемы, но с блочной версткой и HTML 4.01 это стало невозможным!
Если делать кроссбраузерный код и резиновый дизайн, то без скриптов теперь обойтись почти нельзя!
Я не смог отцентрировать контент по вертикали в <div>, в таблице все нормально.
Я не смог отцентрировать по горизонтали строку из нескольких <div>; параметр inline-block все равно не все броузеры понимают.
А если на странице есть блок фиксированной высоты, вроде шапки, и сразу под этим блоком должен быть резиновый блок до нижней границы окна, то красиво без скриптов это почти нереально сделать. Даже padding и margin не смотря на стандарты броузеры понимают по-разному.
Теперь надо прибегать к невероятным ухищрениям, чтобы добится боле-менее приемлемого варианта и объем страницы с этими ухищрениями становится иногда больше, чем при использовании табличной верстки даже в Quirks.
Я понимаю, что новые стандарты - может быть лучше старых, хотя броузеры как в Quirks работают каждый по-своему, так и новые стандарты интерпретируются каждым по-своему. В чем тогда разница? Все равно проблемы кроссбраузерности, только новые!
А вот пропаганда отказа от табличной верстки на мой взгляд совсем неуместна. У таблиц свои приемущества у блоков - свои.

Андрей Искатель

10.01.2008

Тут еще возникает проблема 2-х идеологий: дизайнер хочет сделать красивее, а кодер валидней. Например с точки зрения Влада как кодера - при многоколонном дизайне совершенно нормально, что колонки не должны быть одной высоты, а с точки зрения дизайнера - ужасно когда колонки разные.
Но есть еще одна идеология, которая важнее идеологии кодера - пользователь. Он видит только дизайн, а на валидность ему наплевать. Дизайнер в этом смысле ближе к пользователю. Нельзя отрываться от идеологии дизайна, потому что пользователь - наш король )))
И нельзя строить дизайн исходя из принципов построения таблиц или блоков!

Влад Мержевич

15.01.2008

Если рассуждать с точки зрения пользователя, то большинство так называемых "проблем" оказывается надуманными. Например, пользователи вообще не замечают, одинаковой высоты колонки или нет. Им на это просто плевать. Поэтому дизайнер, который считает, что колонки непременно и обязательно должны быть одной высоты думает в первую очередь о себе, а не о пользователе.

Выскажу свою позицию по разным вопросам.
1. Я ни в коей мере не пропагандирую отказ от таблиц. Наоборот, занимаю в этом вопросе нейтральную позицию. Хотите использовать для верстки таблицы - вперед, никто вас за это не осудит. Однако вы должны понимать, что подобная верстка устаревает и если вы хотите соответствовать моде и времени, учиться верстке слоями все равно придется.

2. Я категорически не согласен и буду бороться всеми способами с попытками верстать слоями как таблицами. Если требуется сделать колонки одинаковой высоты - применяйте для этой цели таблицы, это будет знакомо и правильно. Делать то же самое на слоях такой же абсурд как строить кирпичный дом из бруса. Кирпичный дом надо строить из кирпича, деревянный - из дерева - это понимают все. Но почему то когда речь заходит о табличном дизайне, его пытаются делать не на таблицах, а на слоях. Это разные вещи, требующие разного подхода и идеологии.

Мне понятно, почему так много возникает "обид" по отношению к слоям, дескать и это они не умеют и то не могут, когда на таблицах это делалось в полпинка. Все дело в том, что верстка слоями требует отказа от старого мышления и обучения новым технологиям. А вот это не все хотят или не у всех получается. Признаюсь, сам когда-то находился среди противников стандартов и слоев, но решил не останавливаться на достигнутом, начал учиться и продолжаю учиться до сих пор. Я сделал шаг вперед, теперь ваша очередь.

Андрей Искатель

17.01.2008

Спасибо, Влад. Я совершенно согласен, что нельзя останавливаться на достигнутом, необходимо самосовершенствоваться и идти в ногу со временем и технологиями. Я всегда старался не отставать, поэтому и пытаюсь переходить на слои там, где это логично. Но этот переход у меня отнимает времени и сил больше чем все прошлые переходы между языками программирования и всякими стандартами. Видимо старею... )))
Сейчас мне необходимо сделать резиновую область с рамкой с закругленными краями да еще с полупрозрачным фоном. Таблицей это легко осуществить в HTML 3.2, но я совершенно не могу это сделать слоями в HTML4, да и таблицы там себя ведут иначе... Немного позже я на соответствующем форуме выложу код.

12.04.2008

Влад Мержевич
Тема:Высота блока и верстка слоями или таблицами
Это, наверное против течения( то бишь, прогресса ), но хорошо, если бы вы сказали в чем преимущество ( и как оно реализуется )верстки таблицами по сравнению со слоями?
И, пользуясь случаем, большое спасибо за представленный материал!

mister.maki

15.04.2008

У каждого браузера есть свои умолчальные значения CSS. Поэтому при верстке, если не сбросить эти значения, сайт будет выглядеть по разному в разных браузерах. На странице http://java-research.blogspot.com/2008/04/blog-post_15.html приводится набор стилей, для сброса практически всех значений в 0. В дальнейшем, при верстке, вам нужно будет явно задать все значения стилей, но это избавит вас от многих проблем, описанных здесь.

esstoreo

21.04.2008

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

Евгений

08.05.2008

Насчет "Firefox лучший браузер" и высоты.
Проблема заключается в том, что ИЕ интерпретирует высоту не так, как "Firefox и другие хорошие браузеры".
Например если в Firefox у блока указана высота, то она остается неизменной (не меняется от содержимого).
К тому же "хорошие браузеры" умеют оперировать свойством min-height;
ИЕ (до седьмого) не понимает свойство min-height, но вместо это свойство height обрабатывает как min-height.
Для того, что бы это все учесть, используют хак, специально для ИЕ и задают стиль примерно так.
<style type="text/css">
#layer1 {
width: 300px;/* Ширина слоя */
background: #fc0; /* Цвет фона */

min-height: 50px; /* Минимальная высота высота слоя */
_height: 50px; /* Хак для ИЕ */

padding: 5px; /* Поля вокруг текста */
}
</style>

Владимир

31.07.2008

Рис. 2. Отображение ширины слоев в браузере Firefox - у вас на рисунке Опера..

Блочные элементы

Ширина блочных элементов

Высота

Цвет фона

Границы

Резюме

Комментарии к статье

Добавить комментарий