Xpoint
   [напомнить пароль]

Совместить fixed div и CSS menu

Метки: [без меток]
2007-05-10 10:34:11 [обр] Валера(0/24)[досье]

Мне нужно на одной страничке разместить фиксированный слой (делаю его так описано на 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 все работало правильно (не нарушая позиционирование фиксированного слоя)

спустя 7 минут [обр] Валера(0/24)[досье]
То есть вы предлагаете использовать другой вариант фиксации слоя, который не использует overflow для body?
спустя 23 минуты [обр] Евгений Петров(76/1055)[досье]
Именно так
спустя 4 минуты [обр] Валера(0/24)[досье]
Евгений Петров[досье], переделал с вашим вариантом: http://testing.vvtmk.ru/fsmenu/fsmenu1.html но что мне использовать в качестве слоя с id='d'? (Полагаю из-за его отсутствия не работает в IE)
спустя 12 минут [обр] Евгений Петров(76/1055)[досье]
Полагаю, просто добавить.
спустя 24 минуты [обр] Валера(0/24)[досье]
ааа, то есть просто весь скроллируемый контент нужно было поместить в этот слой :) Это понятно, но проблема с тем, что элементы меню 'поплыли'...
спустя 41 секунду [обр] Валера(0/24)[досье]
в IE, конечно же, с Mozilla все хорошо
спустя 8 минут [обр] Валера(0/24)[досье]
то есть наблюдается тот же эффект, как в предложенном мною первом варианте (http://testing.vvtmk.ru/fsmenu/fsmenu.html), а именно в IE при прокрутке страницы элементы меню ведут себя так же как и фиксированный слой - прокручиваются вместе со страницей
спустя 18 минут [обр] Евгений Петров(76/1055)[досье]

Откровенно говоря, вариант с

*html{overflow:hidden;}
*html body{overflow:auto;}

тоже должен работать. Без дополнительного блока с прокруткой.

Все проблемы в вашем CSS-меню. Выберите в своем селекте любой вариант, кроме первого и полюбуйтесь.

спустя 18 минут [обр] Валера(0/24)[досье]

То есть дополнительно нужно прописать html body{overflow:auto;} в стили или просто выбрать любой кроме первого варианта в селекте?

 Попробовал оба варианта: просматриваю с помощью IE 6.0, когда в селекте выбран первый вариант - 'плывут' только элементы меню (названия) и все меню пропадает при наведении мышью, а когда выбраны другие варианты - плывет все меню, то есть и элементы и контейнер, меню ведет себя как фиксированный слой, но мне как раз надо чтобы меню располагалось как обычно, то есть не прокручивалось вместе с фиксированным слоем, а оставалось там где изначально находится на странице, вообщем как сейчас в Mozilla отображается - http://e-petrov.ru/test/valera/ Можно ли как-нибудь такого добиться?

спустя 25 минут [обр] Евгений Петров(76/1055)[досье]
Валера[досье] Еще раз - IMHO проблема в используемом варианте CSS-меню. Попробуйте другие варианты - в сети полно.
спустя 36 минут [обр] Валера(0/24)[досье]
Евгений Петров[досье], понятно, я тоже подумал что дело именно в меню, наверное стили для него как раз подходят под стили фиксированного слоя (с учетом дополнительных правил для фиксированных слоев, типа *html{overflow:hidden;}), странно только что пробовал 2 варианта фиксации слоя: тот что на http://www.cssplay.co.uk и ваш и в обоих случаях эффект один и тот же. Просто красивое меню попалось, хотелось использовать его у себя, но почему-то оно не дружит с фиксированными слоями. Все равно спасибо за советы.
спустя 1 час 8 минут [обр] Евгений Петров(76/1055)[досье]

Валера[досье] Проблема оказалась не в меню. Привожу минимальный проблемный код:

<!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. Валера[досье] обновите и постарайтесь в следующий раз сами найти минимально проблемный код.

спустя 19 минут [обр] Валера(0/24)[досье]
Евгений Петров[досье], спасибо. Просто тут столько всего наворочено, CSS меняется динамически скриптом и много хаков и исключений, пока мне сложно разобраться с этим, но я стараюсь :)
спустя 2 часа 36 минут [обр] Илья Cтpeльцын aka SelenIT(12/171)[досье]

Имхо, недавнее открытие Ромы Воронежского и Юры Васильчикова (если это решение где-то упоминалось раньше — давайте восстановим справедливость) полностью реанимирует идею эмуляции position:fixed через expression и забыть о страданиях с overflow у body и div как кошмарный сон...

Кстати, по моим экспериментам, в качестве адреса неподвижного фона при этом способе можно указывать даже about:blank...

спустя 10 минут [обр] Евгений Петров(76/1055)[досье]
Илья Cтpeльцын aka SelenIT[досье] Ну этому "открытию" 100 лет в обед и сделали его явно не указанные Вами авторы, тем более, что постоянный пересчет положения блока заставляет его дрожать.
А в чем кошмарность overflow:auto?
спустя 19 минут [обр] Илья Cтpeльцын aka SelenIT(12/171)[досье]
Евгений Петров[досье], там суть "открытия" — именно в победе над дрожанием (последний абзац по ссылке). А насчет "кошмарности"... когда-то очень давно я спорил на эту тему с уважаемым WingedFox-ом (причем я защищал вариант с overflow), тут несколько его аргументов, на которые я так и не смог "железно" возразить;). Но все равно, мне кажется, недрожащая эмуляция на expression гораздо проще в реализации и модификации...
спустя 2 часа 18 минут [обр] Евгений Петров(76/1055)[досье]

Илья Cтpeльцын aka SelenIT[досье]

  1. Не могли бы Вы привести работающий вариант этого решения в IE 5+, IE 6.0 с любым правильным doctype и без сброса в quirksmode?
  1. Что мне делать, если в body нужно кровь из носу положить картинку с repeat-y? Конечно, можно для этого решения положить картинку с background-position:fixed в html, но Вы посмотрите потом, как тянется картинка в body при появлении вертикальной прокрутки.
  1. Ни одно из перечисленных возражений не показалось мне убедительным. Ни по развитию проекта, ни по поводу прокрутки кроме, возможно, голосовых команд - не пользовался (интересно, как велик процент использования таких команд). Честно говоря, не могу смоделировать команду прокрутки - может подскажут те, кто их использует?

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

спустя 46 минут [обр] Илья Cтpeльцын aka SelenIT(12/171)[досье]
Евгений Петров[досье],
  1. Вот здесь — вариант с доктайпом, насколько помню, я его проверял...
  2. В смысле — прокручиваемую фоновую картинку на body? Да, боюсь что... никак. Разве что создавать дополнительный общий контейнер 100%-й ширины и автоматической высоты... кстати, "кому" нужно задавать такой фон в варианте с overflow — тоже ведь диву-обертке, не так ли?
  3. В целом согласен, проблемы 5-го IE (отсутствие колесной прокрутки) нынче неактуальны... а голосовыми не пользовался. Но вот насчет быстрой "прикрутки" к готовому сложному дизайну... в общем, наверное, в каждом конкретном случае нужно смотреть, какой вариант менее "травматичен". А сам факт, что есть еще одна "недрожащая" эмуляция, и можно выбирать между двумя подходами, по идее уже радует...;)
спустя 3 дня [обр] Валера(0/24)[досье]

Возникла небольшая проблема в IE 6.0, вот здесь минимальный код http://testing.vvtmk.ru/test.html Суть в том, что исчезает вертикальная полоса прокрутки. С одной стороны в стилях прописано *html{ overflow: hidden; }, то есть не показывать прокрутку в IE, с другой весь контент находится в слое с 100% высотой и с overflow: auto; Может тут влияет вложенная таблица?

P.S.На самом деле картина немного другая там если убрать *html{ overflow: hidden;}, то появляется две вертикальных прокрутки, я так понял одна для #d, а вторая для html, просто там много кода и я выбрал по моему мнению минимальный проблемный, но думаю если решить эту задачу то та решится тоже.

спустя 1 час 40 минут [обр] Валера(0/24)[досье]

Получилось восстановить полосу прокрутки таким определением:

* html body #main {
   position: absolute;
   left: 0px;
   top: 0px;
}

Но это не совсем то, что мне надо, если я правильно понял это прокрутка слоя с id="d", а у меня используется скрипт, который управляет полосой прокрутки, так вот он не реагирует на прокрутку, возможно как раз из-за того, что она принадлежит не html, а внутреннему слою. Конечно есть вариант переверстать все на слоях, но там появляются глюки с шириной содержимого и мне надо еще чтобы подвал был прижат к низу независимо от контента (не фиксированный слой), там тоже какие-то глюки были.

спустя 26 минут [обр] Евгений Петров(76/1055)[досье]

Если убрать width="100%" у таблицы, то все нормализуется. Есть вариант #d{width:100%;}, но тогда появится и горизонтальная полоса прокрутки. Не помню, есть ли решения проблемы с рендерингом IE такого случая.

Если непременно нужно таблицу со 100% шириной, может воспользуетесь ссылкой Ильи Cтpeльцына[досье]?

спустя 13 минут [обр] Валера(0/24)[досье]
Евгений Петров[досье], да, когда убираю width=100% прокрутка появляется, но она опять же прокручивает слой с id="d", мне это не подойдет, к сожалению надо чтобы стандартная html прокрутка была. Загляну по ссылке Ильи, может там что найду для себя...
спустя 14 минут [обр] Валера(0/24)[досье]
Евгений Петров[досье], да, скорее всего вариант Ильи наиболее оптимальный в моем случае. Его легко применить (пара строчек в CSS), да и побочных эффектов минимум. Если кому интересно, то я взял вариант по этойссылке
Powered by POEM™ Engine Copyright © 2002-2005