Закрепленное меню для всех браузеров (position:fixed)

[Трубчатый Кот]

Способ больше не работает.

Читать тут: http://pay.diary.ru/~diaryCSS/?comm...postid=29862611



Исходник статьи можно почитать у Лебедева

Этот код - только пример! Однако он адаптирован для дайри.



Прежде чем вы возьмете и воткнёте код в свой дайрь, задумайтесь! Посмотрите какая красивая природа/город/космос/чтотамувасзаокном! А надо ли вам страдать такой фигней, какой страдал я? )

Вообще это я к тому, что фиксированное меню должно в первую очередь быть продуманным.Неумно фиксировать меню в тыщу пикселей высотой, поскольку не у всех вертиральное разрешение монитора 2000px. Впрочем 500px - тоже много. 300...ну если совсем невмоготу 400...но не больше. Оставьте в фиксированном меню только самое нужное - благо как убирать пункты меню и сами блоки меню уже писали. Кстати необязательно ведь фиксировать ВСЁ меню





html {

background: transparent !important;

background-attachment:fixed;

background:url('/userdir/9/3/1/2/93120/17895735.gif') ;

}

Картинка - абсолютно любая из вашей библиотеки изображений. Можно поставить прозрачный гиф, но хоть что-то там должно быть. Этот код нужен для того, чтобы меню не дергалось при прокрутке (см статью)



.menuSection{

position:fixed !important;

position: absolute;

top: 10px;

top: exprеssion(parseInt(document.documentElement.scrollTop, 10) + 10 + "px");

}

Всё - закрепили, прибили гвоздями и т.п. Меняйте выделенную(!) десятку на сколько пикселей, на сколько хотите сдвинуть меню вниз. Замечу, что сдвинеться оно только в IE.

Еще замечу, что у дневников тип документа XHTML, поэтому выражение для parsInt заменено на document.documentElement.scrollTop



Вот мы написали этот код и вдруг БДЫЩ!!! Все меню склеились в одно. Ну что ж. Берем лопату и разгребаем:



#YaSearch {display: none;} допустим "Поиск" мы выключим

#thisDiaryOwner {display: none;} и владельца отрубим



А вот блок меню "Все дневники" опустим на 180px

#globalLinks {

margin-top:180px;ЭТО определяет положение менюшки по вертикали

max-height: 100px; height: 100px; overflow:auto; А это делает ее 100px высотой с полосой прокрутки. Эту строку можно и не писать. Но это хороший способ оставить в меню ВСЕ пункты и уменьшить его высоту.

}



Аналогично меню "Мой дневник"

#myDiaryLinks {margin-top:60px;max-height: 100px; height: 100px; overflow:auto;}

Аналогично меню "Постоянные читатели"

#pchs {margin-top:300px;height: 100px; overflow:auto;}



кстати таким же образом можно закинуть менюшки в любое место страницы.

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

@темы: основные блоки

Comments

[Тень-во-Тьме]

о! а я так и не успел добраться до етого) работа, чтоб ее =)

респект)

[Тень-во-Тьме]

Дневники убивают "exprеssion" в стилях

Ж)

[Трубчатый Кот]

Тень-во-Тьме ага щаз! а чем я повашему картинку в эпиграфе в IE закрепил? )

[Тень-во-Тьме]

О.о яхз, тока что убивал =) ...чет я видать переработался ужо...

Ж)

[Трубчатый Кот]

Тень-во-Тьме вот этот код я вынял из исходника страницы. чтобы наверняка знать, что ничего не порезалось )

а вот способ через eval() режется (см статью)

[Someone Like Me]

У меня ничего не фиксится(( В самодельной хтмл-странице я без проблем могу сделать блок, который будет выравниваться по краям страницы, а на дайри не выходит(((

[Трубчатый Кот]

у меня приведенным выше способом работало



пробуйте указание блока другим способом )

типа div#thisDiaryOwner

+пропишите display:block

[iLyonka]

а у меня просто слиплось все вверху, а дальше никак не получается.

коды такие:

html { background: transparent !important; background-attachment:fixed; background:url('/userdir/6/4/8/4/64841/20401695.png') ; }

.menuSection{position:fixed !important; position: absolute; top: 10px; top: (parseInt(document.documentElement.scrollTop, 10) + 10 + "px");}

.YaSearch, .thisDiaryOwner {display: none;}

.globalLinks {margin-top:180px; max-height: 100px; height: 100px; overflow:auto; }

.myDiaryLinks {margin-top:60px; max-height: 100px; height: 100px; overflow:auto; }



браузер - Опера последняя

[Someone Like Me]

{umbra}

Скорее всего нужно указывать параметры не для всего .menuSection , а для его элементов по отдельности... То есть заменить строчку с .menuSection на строчки типа:

#thisDiaryInfo {position:fixed !important; position: absolute; top: 10px; top: (parseInt(document.documentElement.scrollTop, 10) + 10 + "px");}

#thisDiaryLinks {position:fixed !important; position: absolute; top: 100px; top: (parseInt(document.documentElement.scrollTop, 10) + 100 + "px");}



Итд для всех элементов... И менять параметр top , чтоб каждый следующий элемент был ниже и ниже, чтоб они не залазали друг на друга.... Очередность элементов и их имена, извините, точно не помню....

[Someone Like Me]

Рёцке

Кстати, а что делает display:block ? Я нашел описание в пособии по css, но так и не понял...

[Трубчатый Кот]

Someone Like Me в данном случае позволяет позиционирование окошка вне зависимости от основного потока элементов.

[iLyonka]

Someone Like Me не помогло

[Трубчатый Кот]

{umbra} и не поможет: http://diary.ru/~diaryCSS/?comments&postid=29794647

[iLyonka]

Рёцке спасибо - спасибо - спасибо

[Трубчатый Кот]

{umbra} хотя мя нашел как все таки починить способ, но на diaryCSS не выложу, чтобы и его не закрыли

[iLyonka]

Рёцке почему?

а меня и так все устраивает

[именно мертвый]

Рёцке и снова здравствуйте=)

посмотрите пожалуйста, какая у меня кросота получилос))

хехе) вот поставила коды и все сбилось в кучу, а если же подправить кодами после БДЫЩ (), то результат такой же. (на рисунке без послеБДЫЩенских))

вооот. браузер ИЕ. не поможете?

[Трубчатый Кот]

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

[Трубчатый Кот]

кстати картинка вызывает у меня исключительно пошлые ассоциации. полминуты всматривался чтобы понять что это все таки пальцы.

не стоило именно так обрезать картинку из эпиграфа.

[именно мертвый]

Рёцке =\\\ а это может быть специально. пошлятинко. а на эпигрфе и на лицо посмотри. на губы. больше поводо для раздумий.

[дежа вю?]

долго читала..ничего не поняла. вставила код, вроде чтобы меню не смещалось. без записей все было ок. но потом все равно сместилось..(( что исправить, чтоб оно посередине было?

html { background: transparent !important; background-attachment:fixed; background: ; }
#side div.bordered{position:fixed !important; display: block; z-index: 3; zoom:1; position: absolute; top: 100px; left: 10px; top: (parseInt(document.documentElement.scrollTop, 10) + "px");}

[Трубчатый Кот]

дежа вю? осильте первую строку поста.

[Wahrheit]

А у меня меню все равно не зафиксированно
А все остальное получилось

браузер Maxthon 2.0, если это важно