Сдерживающими факторами использования position:fixed; всюду и повсеместно, шучу, так как все хорошо в меру, является невозможность создания полноценной web-страницы.
Это проявляется в следующем.
Подвесив фиксированный блок в любой части страницы, задав необходимые отступы или поля для контейнера в котором будет находиться контент, в общем случае, при уменьшении размеров окна браузера, c появления горизонтальной прокрутки, подвигав оную, вы поймете, о чем речь.
Выход из данной ситуации только один, с помощью отрицательного z-index прятать зафиксированный блок под областью контента. Но с исчезновением этого контейнера теряется весь смысл подобной разметки.
Нам же надо, чтобы он всегда и в любое время был доступен. Не так ли?
Также, развернув фиксированный блок на всю высоту экрана монитора при его переполнении или при уменьшении окна браузера по вертикали, мы теряем часть информации, она просто обрезается снизу. Этот нюанс при разных разрешениях и диагоналях весьма существенен.
К примеру, заполнив блок информацией у себя, взяв за дефолт разрешение 1024*768 и диагональ 17", при минимальных размерах панели инструментов и радуясь, как у меня все красиво и замечательно, попадаю в засаду.
Вот скажите, откуда я могу знать, что у пользователя там может находиться и какова высота этой самой панели? Эффект описан двумя абзацами выше.
Стоит ли говорить о том, что эмуляция данного правила для IE6, тянет за собой другие ограничения, свойственные только "любимому" браузеру.
Перечисленных проблемных моментов вполне достаточно, а список не полный, чтобы навсегда отбить охоту использовать position:fixed; или его эмуляции.
Но не все так прискорбно :)
Решение проблем с горизонтальной прокруткой было предложено мной в статье {position:fixed;} эмуляция...
Давайте займемся вертикальными делами. Для этого нам придется вспомнить фреймы. Да-да, они давно потеряли свое значение, и к прошлому возврата нет. Но мы просто сделаем имитацию, что позволит при любых не благоприятных обстоятельствах не терять информацию в фиксированном контейнере.
Вдаваться в технические детали, как, что и почему, честно скажу - лень, все достаточно прозрачно, поэтому переходим на страницу с примером.
Появление дополнительных вертикальных прокруток в фиксированных блоках, в случае необходимости, стопроцентно огорчает, но и особых резонов для уныния не вижу, тем более что других решений не найдено, а время затраченное на оптимальное размещение информации в данных колонках, принесет ценителям эмуляции position:fixed;, в не всякого сомнения, ни с чем не сравнимое удовлетворение :)
В любом случае, вы просто можете никогда не применять предложенное вам, в силу изложенных выше причин.
Как уже говорилось в "{position:fixed;} эмуляция Gordi" минимальные и максимальные размеры по ширине, предлагаемой web-страницы, являются моим ноу-хау. Следовательно, в примере нет ограничения по ширине ни по min, ни по max.
Рано или поздно все будет опубликовано и растащено :), но пока только так.
Должны же быть, в конце концов, и у меня свои маленькие секреты :)
Некоторые довольно известные персонажи, резко отрицательно относятся к web-страницам, построенным с использованием зафиксированных элементов интерфейса, которые не прокручиваются вместе с основным контентом.
Логика всезнаек, любящих поучать, как надо, в общем-то, понятна, но кажется мне, что если бы они могли это сделать самостоятельно, по всем соответствующим правилам и канонам, думаю, неправедного задора и пыла у них бы слегка поубавилось.
Ну, что тут скажешь, тот, кто не может делать, норовит учить, особенно тому, где ни фига не понимает, судя по тексту статьи, на что и было указано в комментариях.
Не будем далеко ходить, что собственно представляет из себя страница со статейкой, на которую дал ссылку?
Она с комментариями занимает порядка 10-13 экранов. Добравшись до середины оной, взглянем на левую часть страницы. Что видим? Пустое место. Есть или у пользователя возможность практически мгновенно, не особо напрягаясь, перейти в другой раздел ресурса? Конечно же, нет.
Ответ автора - мне это не нужно, ответ не правильный.
А теперь прикинем, сколько экранов занимает левая колонка с меню - полтора экрана. Вот скажите мне, зачем она (колонка), вообще, нужна в таком случае? Если уже на втором экране меню не доступно и нет никаких признаков навигации.
Зададим риторический вопрос противнику position:fixed;, если бы он мог самостоятельно скомпоновать свою страничку, разместив в фиксированном контейнере все содержимое своей левой колонки и, чтобы она не прокручивалась вместе с контентом, было бы удобно пользователям, посещающим его ресурс, просматривать оный, учитывая все выше сказанное?
Думаю, что да.
Любой здравомыслящий человек, как минимум, отнесется к такому положению вещей с пониманием, не отвергая без всяких на то оснований, по надуманным автором причинам, само существование не только этого стилевого правила, но и возможность его использования.
Единственно, с чем можно согласиться, прочитав указанную публикацию, так это с тем, что во всем нужна мера. Но для очень многих это является само собой разумеющимся, к сожалению, автор возомнил себя царем зверей в этом вопросе.
Статья написана полтора года назад. Не надо думать, что озвученное в ней, меня сильно впечатлило и задело до глубины души. Дилетанты от верстки, в первую очередь дискредитируют себя сами, столь откровенными, вызывающими высказываниями, по поводу и без повода, но этого им не дано понять.
По большому счету позиция автора, это его личное дело и, что до меня то прочитал, да и забыл.
Но иногда хотелось бы, более объективных, беспристрастных и самое главное обоснованных, аргументированных утверждений, как "за", так и "против", с базой практических примеров выполненных самим автором, а не голословных заявлений о не допустимости использования тех или иных подходов к принципам верстки.
Автор, скажем так, явно не в теме затронутого им вопроса. И по этой причине ряд его рассуждений, ничего кроме, как улыбки не вызывает, чего стоит такой перл:
…не нужно подвешивать менюшки с помощью position: fixed. Это «прикольно», но пользователя всё это бесит.
Ой, ли? Пользователя, бесит отсутствие логики при разработке web-страницы, пустые места, невозможность быстрого доступа к тем или иным уголкам ресурса и этому надо уделять гораздо больше внимания.
Каким образом это будет сделано, другой вопрос и он никакого отношения к position:fixed; и его эмуляции для IE6, в общем случае, не имеет.
P.S. Любые комментарии с использованием не нормативной лексики, прочих уродований "великого и могучего", опубликованы не будут. Прежде чем оставить свой отзыв на данную, публикацию, да и на другие тоже, рекомендую ознакомиться с правилами блога, ссылка на них, находится без труда.
Вы можете легко расквитаться с автором Trifler Blog, если его высказывания нанесли непоправимый моральный ущерб вашей репутации, опубликовав собственный взгляд на проблему в соответствующих вашему уровню выражениях, на своем ресурсе, оставив необходимый в данном случае линк.
Подсядешь на иглу, а Интернет так затягивает, что и двух недельный перерыв может показаться вечным. Отвечу всем, кто не дождался ответа, толику терпения, как только будет хорошое соединение, провайдер клятвенно заверил, что к концу недели все востановят в лучшем виде. Дай то бог :)
Но нет, худа без добра. Побаловавшись на досуге, частичные результаты экспериментов и исследований будут позже опубликованы, обратил внимание на следующую вещь.
Если, в стилях для html {…} задать border, то в IE6 он не прокручивается. И пришла в голову шальная мысль, а что если…
Вообще, абсолютное/фиксированное позиционирование, при верстке напрямую, без контейнера родителя и связки с position:relative; довольно сложная задача. Часть проблем нашла свое освещение в ликбезе.
О том, что ждет посетителя заглянувшего на страничку с иным разрешением и другой диагональю монитора, а страница адаптирована под 1024*768 и 17”, посмотрите сами.
По изысканному замечанию Мастера Lasto, а совсем не давно, подобный вариант стоял у него на блоге, "косоглазие…" заработать пара пустяков.
Решить проблему с помощью скрипта определяющего разрешение монитора и подкладывающего необходимые для оного свои стили, пример, всего лишь мертвому припарка, никакого кайфа от подобной фишки нет, полумера не более.
Попробуем сформулировать, что же нам надо, если мы попытаемся сделать разметку страницы с использованием position:fixed;
Следует заметить, что эмуляция данного правила для 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 - width:494px;
| февраль, 2012 | ||||||
| пн | вт | ср | чт | пт | сб | вс |
| 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 | ||||