{position:fixed;} - эмуляция Gordi

Trifler Blog

{position:fixed;} - эмуляция Gordi

Подсядешь на иглу, а Интернет так затягивает, что и двух недельный перерыв может показаться вечным. Отвечу всем, кто не дождался ответа, толику терпения, как только будет хорошое соединение, провайдер клятвенно заверил, что к концу недели все востановят в лучшем виде. Дай то бог :)

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

Если, в стилях для html {…} задать border, то в IE6 он не прокручивается. И пришла в голову шальная мысль, а что если…

Вообще, абсолютное/фиксированное позиционирование, при верстке напрямую, без контейнера родителя и связки с position:relative; довольно сложная задача. Часть проблем нашла свое освещение в ликбезе.

О том, что ждет посетителя заглянувшего на страничку с иным разрешением и другой диагональю монитора, а страница адаптирована под 1024*768 и 17”, посмотрите сами.

По изысканному замечанию Мастера Lasto, а совсем не давно, подобный вариант стоял у него на блоге, "косоглазие…" заработать пара пустяков.

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

Попробуем сформулировать, что же нам надо, если мы попытаемся сделать разметку страницы с использованием position:fixed;

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

Итак.

  • Не должно быть разрыва между колонками при различных разрешениях монитора.
  • Без скрипта, определяющего разрешение монитора и подсовывающего полагающиеся по случаю стилевые правила.
  • Фиксированная колонка не прячется под область контента, при уменьшении размеров окна браузера по горизонтали, как в приведенных ранее примерах по ссылкам.
  • При появлении горизонтальной прокрутки, макет ведет себя обычным образом, области контента назначен min-width и его аналог на expression для IE6.
  • Минимум стилей, практически полное отсутствие индивидуальных стилевых правил для зоопарка браузеров.

html-код, прозрачен и чист, что всегда привлекало мое внимание к подобным методам верстки в отличии, скажем, от техники с помощью float.

<div class="middle">
  <div class="wrap">…</div>
</div>
<div class="fixed">…</div>

В блок с классом wrap, можно и нужно вложить двух колоночный шаблон с шапкой и подвалом, по аналогии, как в приведенных выше примерах. Все на ваше усмотрение, в соотвествии с вашими же пристрастиями :)

css

html,body {background-color:#eee;height:100%;}
html {overflow-y:hidden;}
* {margin:0;padding:0;}
.fixed {
  background-color:#fff;
  border:#000 1px solid;
  position:absolute;top:10px;left:5px;
  width:185px;height:170px;
}
.middle {overflow:auto;height:100%;}
.wrap {background-color:#fff;margin:0 0 0 200px;}

Не надо искать прямого указания position:fixed; в этом все фишка.

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

В силу того, что данная метода является в каком-то смысле моим ноу-хау, область контента резиновая и не имеет ограничения ни по максимуму, ни по минимуму. Решение здесь не самое сложное.

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

Комментарии к этой заметке больше не принимаются.


Рейтинг популярности - на эти заметки чаще всего ссылаются:

banner counters.php

leftcounters
width:160px;
height:160px;

banner counters.php

centercounters
width:160px;
height:160px;

banner counters.php

rightcounters
width:160px;
height:160px;

Горизонтальный banner counters.php - width:494px;

ноябрь, 2008
пн вт ср чт пт сб вс
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
free  counters