Библиотека Интернет Индустрии I2R.ru

От таблиц к стилям за пять простых шагов

1. Путешествие начинается
2. Принимаем решение
3. Обдумываем разметку
4. Внутри блока
5. Вне блока

СМЕНА ДИЗАЙНА: ТЕПЕРЬ ОБ ЭТОМ МОЖНО РАССКАЗАТЬ

.content {width: 75%; padding-left: 10%; padding-right: 10px; padding-top: 10px;}

Этот слой занимал 75% от всей ширины страницы, плюс небольшой отступ для создания пространства между границей слоя и текстом. В то же время, слою с меню было предназначено занимать остальные 25% ширины (и 100% по высоте страницы).

.menu {position: absolute; left: 75%; top: 0px; height: 100%; width: 25%; margin: 0; padding-left: 15px; padding-right: 10px; padding-top: 10px; background-color: #cc0; background-image: url(backgrounds/striperight.gif); font: 10px/14px geneva, arial, helvetica, sans-serif; color: black; }

В IE5/Windows это работало так, как я и ожидал. Но в броузерах, которые, как я полагал, куда лучше поддерживали стандарты, нежели IE5/Win, я получил горизонтальные и вертикальные полосы прокрутки (и вы их увидите в IE5/Mac, Netscape 6, и Opera 5).

Что стряслось? 100% высоты - это 100%, не так ли? 75% плюс 25% все еще равно 100%, правда? Почему эти броузеры так странно ошибаются?

Ответ, разумеется, состоял в том, что они ни в чем не ошибались. Ошибся я, потому что неверно понимал блочную модель CSS (равно как и IE5/Win).

БЛОЧНАЯ МОДЕЛЬ БЕЗ МАСКИ

Многие веб-дизайнеры, которым приходилось сражаться с CSS, спрашивали - отчего IE и Netscape 6 по-разному поддерживают слои. Дело в том, что IE5/Mac и Netscape 6 (равно как и Opera 5), верно понимают блочную модель. IE5/Win понимает ее неверно. Я могу только мечтать о том, что с IE6 в этом смысле будет все в порядке.

БЛОКИ И ТИПЫ ДОКУМЕНТОВ

Весь этот переполох с блочной моделью объясняет также, почему IE5 и Netscape 6 по-разному поддерживают свойства границы. Граница в десять точек корректно добавляется снаружи слоя, параграфа, или любого другого блочного элемента. Если вы заполните весь экран картинкой, и добавите к ней границу в десять точек, вы получите полосу прокрутки в броузере, правильно поддерживающем CSS, потому что теперь ваша картинка по ширине ровно на двадцать точек больше ширины экрана. В IE5/Win? Никакой прокрутки. Метод IE5/Win кажется во многом предпочтительнее остальных, но он неверен.

IE5/Mac эмулирует нестандартное поведение IE5/Windows в т.н. Quirks режиме, но в тоже время аккуратно поддерживает стандарт в Strict режиме. Quirks режим включается простым невключением в документ тэга DOCTYPE, или же созданием DOCTYPE без адреса W3C:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

В Strict режим вы переключитесь, начав вашу страницу с DOCTYPE, в котором будет указан релевантный адрес W3C:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"

Gecko броузеры (Mozilla, Netscape 6, and Konqueror), равно как и бета IE6, следуют тропой IE5/Mac. В этих броузерах вы можете с помощью DOCTYPE указывать, должен ли ваш сайт отображаться в соответствии со стандартом, или же следует эмулировать поведение старых, менее совместимых броузеров.

СУЕТА ВОКРУГ ПРОКРУТКИ

Как же мне было разобраться с суровой точностью чисел и правил? Я же не мог просто написать в таблице стилей:

{width: 75% И ПРОШУ НЕ ОБРАЩАТЬ ВНИМАНИЯ НА ОТСТУП}

Если бы я задавал ширину в абсолютных единицах, я бы просто ее установил и ни о чем бы больше не беспокоился. Но в результате получилась бы статическая страница, которая для одних мониторов была бы слишком узка, а для других - чересчур широка. Поэтому я выбрал резиновую разметку. Однако, как только я начал вычисления, мне показалось совершенно невозможным смешивать проценты и абсолютные величины, ибо на выходе получались совершенно несуразные величины типа 103% или 104.25%.

В этот момент Анонимный Донор #1 разрешил проблему блочной модели. Он начал мыслить вне блока.

1. Путешествие начинается
2. Принимаем решение
3. Обдумываем разметку
4. Внутри блока
5. Вне блока