За столь продолжительный период верстки сегодня мне впервые пришлось столкнуться с необходимостью разместить на странице фиксированный блок (используя CSS-свойство position:fixed), который бы при скролле страницы всегда сидел в одном месте окна браузера. Информацию по этому поводу я, естественно, почитал на разных блогах и форумах. Но ...
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. ...
Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т. е. одна строка, к примеру, с белым фоном, вторая с серым, третья опять ...
Антон Молодой подкинул мне идею для этого поста. Он столкнулся с проблемой, с которой с моей косвенной помощью сам же и справился. Я с этим багом (да, речь пойдет об очередном баге IE) никогда не сталкивался, поэтому решил написать об этом ...
Данный пост основан на переводе интересной англоязычной статьи «10 Fixes That Solve IE6 Problems». Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, содержимое которых полностью ...
Комментарии (50)
правый блок уплывает под основной контент, при уменьшении ширины
Есть такой плагинчик для ВП — там фиксированный блок мягко подплывает сверху к верхнему краю окна при скроллинге и всегда остается наверху: LC-StatusLine ardy.or.id/2007/11/19/wordpress-plugins-limosin-creative-status-line.xhtml
В общем, тоже может пригодится — зависит от целей :)
Для каждого агента можно делать свой стиль или нужно, пока сам в размышлениях
Выглядит отлично и вообще может быть полезно для размещения навигации или невысокого сайдбара.
Заметил только один небольшой глючок — при уменьшении окна до возникновения горизонтальной прокрутки блок ведёт себя эээ… ненормально :)
Проверял только на Opera 9.50, на последнем билде.
Позитивно.
Еще посмотри на Полноценный fixed в MSIE, а то твой пример в шестом ИЕ прыгает капец некрасиво.
Блин, извиняюсь, до конца не дочитал, думал статья уже кончилась, но всё же, в IE6 блок прыгает, как ни крути.
Да, я знаю. Но этого не избежать, по крайней мере, я не знаю способа для устранения данного недостаток. Но, я считаю, он не существенен, поскольку пользователей с разрешением 800×600 — менее 5% (это в РУнете). Однако, на случай просмотра такой страницы с мобильных устройств данный метод, получается, не подходит.
sonika, я встречал такие штуки. Без ява-скрипта они работать не будут. Мой же пример сделан на голом CSS, за исключением IE6.
Не понял, о чем ты говоришь.
Чуть выше я ответил по этому поводу.
Прыгает, потому что я специально не добавил фоновый прозрачный рисунок, чтобы можно было наглядно увидеть, КАК он нехорошо прыгает :)
Интересно для чего это применялось?
Для баннера и картинки RSS-подписки.
Пойдёт статейка для начинающих)
Dimox — спасибо за позновательные статьи, каждый раз читаю и нахожу что-то новое и интересное:)
Нет, Дмитрий не очень хороший вариант :)
Для Вадима Lasto, а здесь улучшенный вариант: time-info.info/show/
по моему сделал проще, и без expression.
Минус твоего решения и в том, что при разных разрешениях все будет разваливаться.
Так же при уменьшении размеров окна браузера, фиксированный блок не прячется под областью контента, а отрывается от нее, но все равно часть его остается не доступной.
Тут не должно быть компромиссов :)
Хм.
gordi, благодарю. По ссылке нашел отличное решение.
Рыскал по Интернету, но не нашёл нужный пример. Мне необходимо зафиксить полноценно в родительском блоке элемент,т. е. если родительский элемент не на всю высоту документа и он вне зоны видимости, то и «блок, который фиксируем» вне зоны видимости. Надеюсь, изложил понятно свою мысль. Никто с таким примером не сталкивался? Заранее благодарен.
В Опере 9.27 наблюдается глюк — страница не прокручивается, пока не отключишь ява-скрипты.
Что будет разваливаться? Если разрешение экрана 1024×768 и выше, ничего не разваливается! Зачем вообще брать во внимание разрешения ниже 1024×768? Мы живем в 21 веке.
Сергей, твой вариант тоже не очень хорош — фиксированный блок начинает прятаться под основной, когда ширина окна браузера примерно 1250 пикселей и ниже,т. е. фиксированный блок виден на разрешениях, начиная от 1280px и выше, при том, что ширина всего контентного блока — 1000px.
К тому же в FireFox’e (2-я версия) наблюдается некрасивый эффект — та часть основного блока, которая при сужении окна закрывает фиксированный блок, ужасно дергается.
ИМХО, в твоем варианте минусов больше, чем в моем.
Im Eugene, в вашем случае нужно использовать
position: absolute.№ 14
>В Опере 9.27 наблюдается глюк
Тут попытался решить проблему для разных разрешений через скрипт,
чтобы между колонками по сравнению дефолтом 1024*768, при более высоком разрешении не было пустоты, может получилось не совсем удачно :), но похоже это правильный путь.
Сам макет заточен именно под 1024*768 и во всех браузерах — IE6(7), FF, OPERA 9.23
не вижу проблем описанных тобой.
А OPERA вообще и с position: absolute; и с position: fixed; как кошка, что гуляет сама по себе :)
Писал об этом у себя на блоге.
Да в FF есть такая неприятность :), но на сколько это критично?
Дима, в твоем варианте, у меня в IE6 фиксированный блок сваливается под область контента. Могу прислать скрин.
Насчет fixed не уверен, но с absolute я в Опере никогда не наблюдал проблем.
Весьма странно. У меня в нем же все на месте.
Да. Все здорово. Вот только у меня body уже дает свой фон на сайте. Но, думаю, можно закрыть глаза на этот баг.
Извините за идиотский вопрос: — это что и зачем?
LisenOK, это называется условными комментариями, которые используются для Internet Explorer. «if lt IE 7» — обозначает условие «если версия IE меньше 7-й.