![[logo]](/site/images/logo.jpg){kind=logo}
Совместить fixed div и CSS menu
Мне нужно на одной страничке разместить фиксированный слой (делаю его так описано на http://www.cssplay.co.uk/layouts/fixed.html ) также на странице использую CSS menu. В Mozilla все работает отлично, в IE глюк - при прокрутке страницы элементы меню остаются на месте, а при наведении на них и вовсе исчезают. Пример здесь: http://testing.vvtmk.ru/fsmenu/fsmenu.html
Предполагаю что проблема в том что для body установлено overflow-y: auto и для body,html установлено height: 100%, потому что когда убираешь одно из них (или оба), то глюк пропадает, однако нарушается фиксированный слой, хотя возможно я ошибаюсь и дело в другом.
Подскажите как подправить CSS чтобы и в IE все работало правильно (не нарушая позиционирование фиксированного слоя)
Откровенно говоря, вариант с
*html{overflow:hidden;}
*html body{overflow:auto;}
тоже должен работать. Без дополнительного блока с прокруткой.
Все проблемы в вашем CSS-меню. Выберите в своем селекте любой вариант, кроме первого и полюбуйтесь.
То есть дополнительно нужно прописать html body{overflow:auto;} в стили или просто выбрать любой кроме первого варианта в селекте?
Попробовал оба варианта: просматриваю с помощью IE 6.0, когда в селекте выбран первый вариант - 'плывут' только элементы меню (названия) и все меню пропадает при наведении мышью, а когда выбраны другие варианты - плывет все меню, то есть и элементы и контейнер, меню ведет себя как фиксированный слой, но мне как раз надо чтобы меню располагалось как обычно, то есть не прокручивалось вместе с фиксированным слоем, а оставалось там где изначально находится на странице, вообщем как сейчас в Mozilla отображается - http://e-petrov.ru/test/valera/ Можно ли как-нибудь такого добиться?
Валера[досье] Проблема оказалась не в меню. Привожу минимальный проблемный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=windows-1251">
<style type="text/css">
html,body{height:100%;}
body{margin:0;padding:0;background:#eee;}
body,body a{font:12px arial,tahoma,sans-serif;color:#000;text-decoration:none;}
#fix{width:100px;height:100px;top:50%;left:50%;margin-left:-50px;margin-top:-50px;background:#fff;border:1px solid #000;}
html>body div#fix{position:fixed;}
.menulist{position:relative;width:200px;height:100px;background:#fff;border:1px solid #000;}
</style>
<!--[if IE]>
<style type="text/css">
*html{overflow:hidden;}
*html #fix{position:absolute;}
*html #d{height:100%;overflow:auto;}
</style>
<![endif]-->
</head>
<body>
<div id="d">
<div style="height:100px;"></div>
<div class="menulist"></div>
<div style="height:2000px;"></div>
</div>
<div id="fix"></div>
</body>
</html>
В IE 6.0 наблюдаем "застывание" нефиксированного блока. В остальных версиях IE проблемы не видим. Лечим:
*html #d{position:relative;height:100%;overflow:auto;}
P.S. Валера[досье] обновите и постарайтесь в следующий раз сами найти минимально проблемный код.
Имхо, недавнее открытие Ромы Воронежского и Юры Васильчикова (если это решение где-то упоминалось раньше — давайте восстановим справедливость) полностью реанимирует идею эмуляции position:fixed через expression и забыть о страданиях с overflow у body и div как кошмарный сон...
Кстати, по моим экспериментам, в качестве адреса неподвижного фона при этом способе можно указывать даже about:blank...
А в чем кошмарность
overflow:auto?
overflow), тут несколько его аргументов, на которые я так и не смог "железно" возразить;). Но все равно, мне кажется, недрожащая эмуляция на expression гораздо проще в реализации и модификации...
Илья Cтpeльцын aka SelenIT[досье]
- Не могли бы Вы привести работающий вариант этого решения в IE 5+, IE 6.0 с любым правильным doctype и без сброса в quirksmode?
- Что мне делать, если в body нужно кровь из носу положить картинку с repeat-y? Конечно, можно для этого решения положить картинку с
background-position:fixedв html, но Вы посмотрите потом, как тянется картинка в body при появлении вертикальной прокрутки.
- Ни одно из перечисленных возражений не показалось мне убедительным. Ни по развитию проекта, ни по поводу прокрутки кроме, возможно, голосовых команд - не пользовался (интересно, как велик процент использования таких команд). Честно говоря, не могу смоделировать команду прокрутки - может подскажут те, кто их использует?
Безусловно, есть моменты, когда решение не подходит. Например, сложные, давно написанные и функционирующие проекты. Но на таких проектах, как правило, ужасный код и добавления/изменения чего-либо - головная боль. Какие уж там пользовательские стили.
- Вот здесь — вариант с доктайпом, насколько помню, я его проверял...
- В смысле — прокручиваемую фоновую картинку на
body? Да, боюсь что... никак. Разве что создавать дополнительный общий контейнер 100%-й ширины и автоматической высоты... кстати, "кому" нужно задавать такой фон в варианте с overflow — тоже ведь диву-обертке, не так ли? - В целом согласен, проблемы 5-го IE (отсутствие колесной прокрутки) нынче неактуальны... а голосовыми не пользовался. Но вот насчет быстрой "прикрутки" к готовому сложному дизайну... в общем, наверное, в каждом конкретном случае нужно смотреть, какой вариант менее "травматичен". А сам факт, что есть еще одна "недрожащая" эмуляция, и можно выбирать между двумя подходами, по идее уже радует...;)
Возникла небольшая проблема в IE 6.0, вот здесь минимальный код http://testing.vvtmk.ru/test.html Суть в том, что исчезает вертикальная полоса прокрутки. С одной стороны в стилях прописано *html{ overflow: hidden; }, то есть не показывать прокрутку в IE, с другой весь контент находится в слое с 100% высотой и с overflow: auto; Может тут влияет вложенная таблица?
P.S.На самом деле картина немного другая там если убрать *html{ overflow: hidden;}, то появляется две вертикальных прокрутки, я так понял одна для #d, а вторая для html, просто там много кода и я выбрал по моему мнению минимальный проблемный, но думаю если решить эту задачу то та решится тоже.
Получилось восстановить полосу прокрутки таким определением:
* html body #main {
position: absolute;
left: 0px;
top: 0px;
}
Но это не совсем то, что мне надо, если я правильно понял это прокрутка слоя с id="d", а у меня используется скрипт, который управляет полосой прокрутки, так вот он не реагирует на прокрутку, возможно как раз из-за того, что она принадлежит не html, а внутреннему слою. Конечно есть вариант переверстать все на слоях, но там появляются глюки с шириной содержимого и мне надо еще чтобы подвал был прижат к низу независимо от контента (не фиксированный слой), там тоже какие-то глюки были.
Если убрать width="100%" у таблицы, то все нормализуется. Есть вариант #d{width:100%;}, но тогда появится и горизонтальная полоса прокрутки. Не помню, есть ли решения проблемы с рендерингом IE такого случая.
Если непременно нужно таблицу со 100% шириной, может воспользуетесь ссылкой Ильи Cтpeльцына[досье]?