HTML and CSS

HTML and CSS

{Лаборатория экстремальной web-верстки...}

POSITION: fixed; За и против.

POSITION: fixed; За и против.

C выходом IE7, при использовании position:fixed; и общем-то не осталось проблем. Да, IE6, еще держит позиции, как самый распространенный браузер, но его век не долог.

Не буду останавливаться на том, как подвесить одиночный контейнер в каком-либо месте страницы, лучше поговорим о полноценном применении position:fixed; для верстки шаблона страницы.

Данная тема уже затрагивалась мной POSITION fixed; Плюсы и минусы, создаем шаблон для движка. Поэтому нет смысла повторяться.

Так, что же мешает распространению этого способа позиционирования на практике?

Плюсы:

  1. Строгая структура html-кода страницы
  2. Возможность вывода информации в любой последовательности
  3. Навигация или все, что имеет высший приоритет, всегда на месте
  4. Максимальная гибкость (на мой взгляд) при смене дизайна

Минусы:

  1. При уменьшении размера окна браузера часть информации в фиксированном блоке обрезается (запретить бы эту фишку навсегда, к сожалению, зависит и от разрешения монитора)
  2. Графика
  3. Специфика IE (когда здесь было все гладко?)

Ниже приведены примеры на основе условных комментариев MS.

<!--[if IE]><!--> . . . <!--<![endif]-->

Возможные решения на JavaScript не рассматриваются.

Все тестировалось в FF1.5(2.0), OPERA 8.5(9.20), IE 6(7).

На, что следует обратить внимание. Отказ от явного указания ширины блоков header и center. Для FF, OPERA, IE7 используется left и right для IE6 expression что дает необходимую гибкость при уменьшении размеров окна браузера, но накладывает ограничения на вложенные блоки, это в полной мере касается графики, с фиксированной шириной (ведет к нарушению каркаса страницы).

Две колонки:

  1. Header (fixed), меню left, верхняя часть меню (fixed)
  2. Header (fixed), меню right, верхняя часть меню (fixed), проблема с IE6, проявляется при изменении размеров окна браузера, причина, скорее всего, в том, что IE6 лучше понимает слева на право с верху в низ

Как известно при абсолютном позиционировании возникает проблема с высотой колонок и footer-ом (может принадлежать, только одной колонке), решением для footer-а является его фиксация по образцу и подобию header.

В общем-то, и сам до конца не разобрался, есть ли смысл более активного использования position:fixed; С одной стороны чуть оригинальности web-странице не помешает, с другой...


RSS лента ВСЕГО блога с комментариями RSS лента ВСЕГО блога БЕЗ комментариев RSS лента этой КАТЕГОРИИ с комментариями RSS лента этой КАТЕГОРИИ и БЕЗ комментариев RSS лента ЭТОГО ПОСТА с комментариями к нему



Прыг: 81 82 83 84 85 86 87 88 89 90 91
Скок: 10 20 30 40 50 60 70 80 90
English German French Spanish Italian Japanese
  • Programming V. Lasto
  • Designer S. Gordi
  • Created in 0,03379 seconds
  • © 2007-2010