У Галса:заметки о полях

Волшебное заклинание (заметки о полях)

Для начала я приведу небольшой фрагмент из книги Дмитрия Кирсанова "Веб-дизайн" (с.194), чтобы довести до вас суть проблемы.

Заметки о полях. Упомянутые только что поля -- это не поля, которые устанавливает вокруг содержимого страницы дизайнер, а те небольшие просветы вдоль левой и верхней границ окна, которые оставляет сам броузеер. Пользователь не может ни поместить что-либо в эту мертвую зону, ни повлиять на размеры полей средствами стандартного HTML. Еще хуже то, что величина этих полей непостоянна — она зависит от марки и версии броузера и от установленного в данный момент базового кегля шрифта. Из-за этого возникают трудности с точным совмещением фонового изображения и материала переднего плана — ведь броузер настилает фоновую картинку по всему пространству окна вплоть до рамки, вне зависимости от того, насколько отодвинуты от этой рамки текст и изображения переднего плана.

Примечание: проведя небольшое исследование, я составил вот такую табличку размеров отступов для некоторых браузеров. -- А. В.

браузер	Netscape Navigator				MS Internet Explorer			Opera
платформа	win32		unix		win32			win32
версия	3.x	4.x	3.x	4.x	3.x	4.x	5.0	3.5x
отступы	8px	8px	7px	7px	10px	10px	10px	10px

Оговорка относительно "стандартного HTML" не случайна -- очевидно, поля эти были введены именно для того, чтобы размеченные в минималистском, академическом стиле тексты можно было читать, не стукаясь взглядом о вплотную прижатую к тексту рамку окна. Предоставляя со временем все больше оформительской свободы автору страницы броузеры не могли обойти своим вниманием и этот аспект. Так, MSIE поддерживает атрибуты leftmargin н topmargin тега BODY, позволяющие устанавливать любую (в том числе нулевую и отрицательную) величину полей страницы. Однако и стандарт HTML 4.0, и броузер Netscape игнорируют эти «MSlE-only» атрибуты.

Более идеологически правильный, хотя и выходящий за рамки HTML подход - использование CSS-свойств margin-left и margin-top для тега BODY. К сожалению, незрелость реализации CSS не позволяет воспользоваться даже таким невинным трюком: дело в том, что если MSIE отмеряет поле от рамки окна, то NC принимает отправную точку то "поле по умолчанию", которое имеет место в отсутствие CSS. Поэтому, чтобы прижать содержимое страницы вплотную к левой рамке окна, в MSIE достаточно сказать <BODY style="margin- left: 0рх">, тогда как в NC вместо 0рх придется подбирать некую отрицательную величину (около -7рх).
Желание обойтись без CSS заставляет некоторых дизайнеров прибегать к еще более замысловатому трюку. Пользуясь тем, что у тега FRAME есть поддерживаемые обоими броузерами атрибуты marginwidth и marginheight, они заключают всю страницу в единственный фрейм с тем, чтобы иметь возможность точно устанавливать величину полей.

А вот теперь давайте разберемся!

Во-первых, нам известен простейший способ создания одинаковых полей (в том числе нулевых) для браузеров NN и MSIE начиная с 4-х версий. Для этого нужно, чтобы тег BODY выглядел следующим образом:

<BODY LEFTMARGIN="X" TOPMAGIN="Y" MARGINWIDTH="X" MARGINHEIGHT="Y">

Здесь X - левый отступ, а Y - верхний. Первые два атрибута понимает только MSIE, вторые два - только NN. (Opera не понимает ни тот, ни другой)

Но эти чисто визуальные атрибуты элемента BODY не входят ни в одну официальную спецификацию HTML, и их использование противоречит идеологии языка. Куда удобнее и правильнее было бы использовать CSS, ведь тогда достаточно иметь одну инструкцию в css-файле для всего сайта. Я полностью соглашаюсь с тов. Кирсановым - с помощью свойства magrin (margin-top, margin-left) невозможно создать одинаковые поля в обоих браузерах.

Тут есть один тонкий секрет!

Netscape 4.x знает, что такое CSS-позиционирование. Можно вложить все содержимое страницы в один общий слой:
<div id="MyBody" style="position:absolute; top:0; left:0">Содержимое страницы</div>
Но это как-то накладно. А вот если добавить такой style-атрибут к тегу BODY - результат будет неожиданный: Explorer и Opera его игнорируют (тут им подавай margin, а не position!), а Netscape создает нулевые (в нашем примере) поля. Остается только привести стили к общему знаменателю:

<style type="text/css">
       body { margin-left:0px; margin-top:0px;
              position:absolute; top:0; left:0}
</style>

Похоже, волшебное заклинание найдено!

Все заметки: 1 2 3 4 5 6 7 8 9 11 12

Наверх