Блог Верстальщик-виртуоз. Задание 4

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

Обязательные требования:

  1. Чистый HTML и CSS, никаких javascript, expression, условных комментариев и др.
  2. Верстка кроссбраузеная IE5.5 +, FF2.0 +, Opear 9.0 +, Safari, Chrome
  3. Валидный код HTML и CSS для Doctype HTML5, XHTML 1.0 Strict, XHTML 1.0 Transitional
  4. Минимальный HTML и CSS

Какое практическое применение этого задания?

Например, для установки на сайт кнопки онлайн чата. Ее можно вынести в отдельный блок, который будет всегда на виду. Или для поддержания обратной связи с пользователями сайта, как это делают сервисы www.uservoice.com и www.reformal.ru

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

Успехов! Награда ждет своего победителя!

Правила конкурса

P.S. с заданием конкурса довольно быстро справились, поэтому я добавил бонус к заданию. Думаем, решаем, виртуозничаем ;)

Комментарии

webmolot 08 ноября 2010 года, 10:51 #

На видео IE5.5, IE6 и IE7 в IETester

Алексей 08 ноября 2010 года, 11:16 #

Если все правильно понял, то вот:
http://dl.dropbox.com/u/2676651/fixed/index.html

webmolot 08 ноября 2010 года, 11:23 #

Что-то мне подсказывает, что скоро определится победитель ;)
Алексей, поправьте валидацию

Алексей 08 ноября 2010 года, 11:29 #

Странно, валидацию отлично проходит, только html5 шалит, но если убрать примочки xhtml то все будет ок.

webmolot 08 ноября 2010 года, 11:37 #

Алексей, я HTML5 и имею ввиду ;)

Алексей 08 ноября 2010 года, 12:00 #

Все, сделано)
Ссылка прежняя

webmolot 08 ноября 2010 года, 12:11 #

Долго не думая, Алексей взял и выиграл конкурс, не дав другим участникам опомниться. Поздравляю, виртуоз!

Единственное, что я мог бы добавить от себя — использовать для body не overflow:hidden, а overflow:auto

Алексей, расскажи, пожалуйста, подробнее другим участникам конкурса, каким образом тебе удалось добиться эффекта position:fixed для ie5.5 и ie6, ведь они не поддерживают это значение.

Алексей 08 ноября 2010 года, 12:21 #

Все достаточно просто.
Я эмулировал position:fixed с помощью свойства overflow:auto.
Сам «фиксированный» блок я спозиционировал абсолютно всего документа по центру, а контент поместил в блок #wrapper с высотой 100%, чтобы он растягивался на всю высоту браузера и задал ему свойство overflow:auto, чтобы появлялась полоса прокрутки в случае необходимости.
В результате мы прокручиваем не всю страницу внутри body, а лишь контент внутри wrapper, именно поэтому блок fixed остается на месте.

Dmitry Scriptin 08 ноября 2010 года, 12:48 #

По своему опыту скажу, что подобные висящие сбоку элементы никогда не замечаю — вероятно, из-за баннерной слепоты. Но техника исполнения внушает :) Спасибо за идею!

milax 08 ноября 2010 года, 12:58 #

Конкурс завершился по факту и не начавшись :)

Алексей 08 ноября 2010 года, 13:07 #

Я не виноват :D

webmolot 08 ноября 2010 года, 13:17 #

milax, я писал заблаговременно о конкурсе в twitter и facebook. Чтобы получать сообщения на почту, рекомендую подписаться на e-mail рассылку.

Кстати, за первые 15 минут после начала, страницу конкурса посетило 39 человек. Могу предположить, что они так же принимали участие в конкурсе, но немного не успели справиться с заданием ;)

Andy 08 ноября 2010 года, 13:20 #

Честно говоря, задание очень простое было. Лично мне было сразу понятно, как такое делать, и поэтому — лень.

Evgeny Zhlobo 08 ноября 2010 года, 13:59 #

Думаю, лучше делать конкурсы с определенной конечной датой. Когда она наступила, только тогда смотреть получивашиеся работы.

А то неравноправие какое-то : ).

Василий 08 ноября 2010 года, 14:08 #
webmolot 08 ноября 2010 года, 19:24 #

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

Тот, кто знал первый способ решения, наверняка заскучал. Пожалуйста, это ваш шанс поломать голову ;)

Небольшое уточнение задания. Сейчас мы не используем дополнительных блоков, псевдоскроллеров. Есть только body, а в нем текст и фиксированный блок.

<body>
    <span class="fix">F I X E D</span>
    <!-- текст -->
</body>

IE5.5 можно не учитывать

Павел 10 ноября 2010 года, 9:19 #

Немного отредактировал вариант Алексея. Надеюсь никаких законов не нарушил :)
http://dl.dropbox.com/u/568273/fix/index.html

webmolot 10 ноября 2010 года, 10:35 #

Павел, я же подчеркнул, что есть элегантное решение. То, что предлагаете Вы, мне показалось лишь допиливанием предыдущего решения, причем с ошибками. В 6-м и 7-м IE к высоте body 100% Вы добавили еще 20px отступов, из-за чего текст уплыл вниз.

Верстальщики-виртуозы, ну где же Вы? Кому было скучно ;)

webmolot 15 ноября 2010 года, 15:05 #

Пошел обратный отсчет. До конца конкурса осталась одна неделя. Если в течение этого времени никто не найдет решение бонуса к заданию, мне придется самому отдуваться ;). А так хочется, чтобы нашелся еще один верстальщик-виртуоз!

webmolot 16 ноября 2010 года, 13:31 #

Приятно, верстальщики снова зашевелились и начали присылать свои решения. Но пока безрезультатно.

Хочу сразу дать подсказку. Не стоит делать тоже самое, что сделал Алексей в своем решении, только лишь перенеся блок fixed на уровень выше и вместо блока .wrapper использовать body, а вместо body использовать html. Не считаю этот способ новым, это всего лишь переделка старого, т.к. принцип остается тот же.

Мы же ищем принципиально новый способ решения

Это не баг, это фича! 22 ноября 2010 года, 10:03 #

[...] четвертого задания “Верстальщика-виртуоза”, к сожалению, так и не [...]

webmolot 22 ноября 2010 года, 10:16 #

Пришло время раскрывать карты и показывать правильное решение. Для начала ссылка на рабочий пример.

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

Если блоку назначить свойство overflow со значеннием auto или scroll, а его дочернему элементу прописать position:relative, то дочерний элемент будет оставаться на месте при прокрутке родителя

Этот способ довольно гибкий, т.к. можно назначить для блока выравнивание по правому краю при помощи float:right. Все браузеры, которые понимают position:fixed, проигнорируют это правило, а IE6 послушает и прижмется к правому краю окна браузера, не наезжая при этом на скроллер.

gordi 10 марта 2011 года, 11:44 #

Описан частный случай.
Стоит ограничить страницу по ширине,
наезд контента на фиксированный блок с появлением горизонтальной прокрутки и играми с ней, будет обеспечен :)
И скажем, сделать такое — http://trifler.ru/blog/i/layouts/fixed/lef…xed_content.htm

едва ли будет возможно :)

webmolot 10 марта 2011 года, 12:14 #

gordi, описан случай, когда блок в ie6 ведет себя, как будто к нему применили position:fixed. Проблемы с наездом контента, о которых Вы говорите, существуют и для других браузеров с position:fixed.

gordi 11 апреля 2011 года, 18:35 #

webmolot: «Проблемы с наездом контента, о которых Вы говорите, существуют и для других браузеров с position:fixed.»

Так и надо решать эту проблему :)
Потому и говорю, ваше решение частный случай, не более того.

Christik 26 мая 2013 года, 15:50 #

Интересный у Вас блог. Особенно задания для верстальщиков-виртуозов. ))
Жаль, что я раньше не попала сюда, а то обязательно поучаствовала бы.

Написать комментарий

Используйте в комментариях html-теги

ссылка — <a href=""> </a>
выделение — <strong> </strong>
удалённый текст — <del> </del>
цитата — <blockquote> </blockquote>
фрагмент кода html — <pre lang="html"> </pre>
фрагмент кода css — <pre lang="css"> </pre>

Подпишитесь!

Внимание! АКЦИЯ!

Вступите в группу Вконтакте и получите бесплатную консультацию по верстке. Расскажите друзьям про группу и получите 5% скидку на услуги Webmolot.com