Вопрос знатокам

[Leonidk]

Здравствуйте!

подскажите,как решить проблему.

фон - картинка, текст контента не имеет своего фона, менюшка тоже не имеет фона (общий фон картинка).

меню имеет выпадающее подменю на текст.

Вопрос: как сделать прозрачный текст под меню или чтобы фон в подменю повторял в точности основной фон?

Заранее благодарен!

[psywalker]

Softlink,

Да нет, я ж те уже говорил, что в любом случае шрифты разные на Маке и других браузерах. Да и вообще у тебя очень хрупкий пример, который может развалиться при малейшем ветре. А каждый раз поправлять - это уже дикий геммор. Да и потом если будет резина, а сверху текст, и при сужении/увеличении ширины экрана строки будут прыгать, то твоё меню всегда будет хреново работать. Так что тут дружище выключай упёртость, и прими это как должное.

[sigma77]

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

Отказался от вырезной картинки и подгружаю только 1 бг. Позишинами выравниваю фон под выпадалкой. Итого, что получается.

Мы имеем для дропа всегда левый позишн в 150пк. При случае, если что-то куда-то поедет по горизонтали, мы легко меняем это.

Сама выпадалка тянется по высоте. Т.е. если добавится пункт в подменю, то ничего никуда не уедет. Если надо добавить пункт в само меню, то присваиваем ему класс и ровняем только высоту нужному пункту. Высчитывать ничего не надо, все смещаем на высоту родительского пункта, откуда оно выпадает. Все сходится пиксель в пиксель, т.к. мы дублируем картинку.

Т.е. при каком-то вмешательстве в верстку поправить меню не составит никакого труда - 3 минутки с перекуром

ИМХО - это самый лучший вариант без JS.

Ссылка http://www.alpatriott.ru/works/primer/menu-fon.html

В готовом проекте, для того чтобы просто добавить пункт меню никто верстальщика обычно не зовет. Всё делается средствами CMS и хорошо, если это будет делать хотя бы контентщик. И вот если при этом что-то поедет, то это будет твой косяк.

[Softlink]

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

Если меню высотой в 50 пунктов и они не добавляются, что будете делать?

Да пусть даже не 50 пунктов, а 10, но меню находится на нижнем горизонте окна, т.е. в любом случае появится скролл.

p.s. Макс, посмотри сначала на Маке, а потом скажи, что куда поехало

Edited July 6, 2011 by Softlink

[psywalker]

sigma77, Оксан, ты получала от меня лс?

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

Если меню высотой в 50 пунктов и они не добавляются, что будете делать?

Да пусть даже не 50 пунктов, а 10, но меню находится на нижнем горизонте окна, т.е. в любом случае появится скролл.

p.s. Макс, посмотри сначала на Маке, а потом скажи, что куда поехало

Да а чё смотреть, мы ж тебе не с пустого места это говорим. Там действительно шрифты отличаются, или я не прав по твоему?

[sigma77]

sigma77, Оксан, ты получала от меня лс?

Да получила, я позже отвечу.

Да а чё смотреть, мы ж тебе не с пустого места это говорим. Там действительно шрифты отличаются, или я не прав по твоему?

Шрифты отличаются и не только на мак, есть еще линукс. Там еще больший геморой со шрифтами.

Если меню высотой в 50 пунктов и они не добавляются, что будете делать?

fixed

Сегодня не добавляются - завтра добавились.

Да пусть даже не 50 пунктов, а 10, но меню находится на нижнем горизонте окна, т.е. в любом случае появится скролл.

Если есть скрол и при этом нужна прокрутка фона, то js.

[Softlink]

Сегодня не добавляются - завтра добавились.

Да пусть даже не 50 пунктов, а 10, но меню находится на нижнем горизонте окна, т.е. в любом случае появится скролл.

Если есть скрол и при этом нужна прокрутка фона, то js.

1) вставлять пункты в конец списка меню и будет красота, замечательно просто будет!

2) я же говорил, что если без js.

[psywalker]

Сегодня не добавляются - завтра добавились.

Да пусть даже не 50 пунктов, а 10, но меню находится на нижнем горизонте окна, т.е. в любом случае появится скролл.

Если есть скрол и при этом нужна прокрутка фона, то js.

1) вставлять пункты в конец списка меню и будет красота, замечательно просто будет!

2) я же говорил, что если без js.

Ну последний пункт оговаривается заранее, если что. А вот твоё решение - это геммор чистой воды и там, как не обговаривай, ничего не выйдет и будет много проблем. Такие вещи отметаются сразу, и даже не рассматриваются.

[sigma77]

1) вставлять пункты в конец списка меню и будет красота, замечательно просто будет!

Ага "ты туда не ходи, ты сюда ходи..."

2) я же говорил, что если без js.

Ну тут либо хорошо и надежно, либо без js.

[Softlink]

да ну вас. Мой пример (если без js) изящнее. Это объективно.

Макс, твои доводы неубедительны. Сегодня специально буду проверять на маке и выложу скрин.

Если там действительно все поедет, я признаю свою ошибку. И к тому же, я сам до него дотумкал. А вот ты сейчас не хочешь этого сделать. Переделанный пример SelenIT'а, здесь подходит не так хорошо. Ну согласись же.

ТС, как появишься здесь, напиши что лучше подошло хотя бы в твоем случае.

Edited July 6, 2011 by Softlink

[psywalker]

да ну вас. Мой пример (если без js) изящнее. Это объективно.

Макс, твои доводы неубедительны. Сегодня специально буду проверять на маке и выложу скрин.

Если там действительно все поедет, я признаю свою ошибку. И к тому же, я сам до него дотумкал. А вот ты сейчас не хочешь этого сделать. Переделанный пример SelenIT'а, здесь подходит не так хорошо. Ну согласись же.

ТС, как появишься здесь, напиши что лучше подошло хотя бы в твоем случае.

Ну так я ж тоже до своего второго варианта, додумкавал и до твоего, но в итоге пришлось его отмести из-за вышеназванных косяков. Потом была вторая идея, которая тоже провалилась, ну а третья - это та, которая на мой взгляд самая оптимальная. И я не один тебе тут это говорю ж

ТС, как появишься здесь, напиши что лучше подошло хотя бы в твоем случае.

Ну я бы делал так, как предложила Оксана.

Ну тут либо хорошо и надежно, либо без js.

[sigma77]

С прокруткой (набросок) - http://jsfiddle.net/4TEzc/6/embedded/result/

Есть идея и о 2-м варианте. Если прокатит позже тоже выложу.

Edited July 6, 2011 by sigma77

[psywalker]

С прокруткой (набросок) - http://jsfiddle.net/4TEzc/5/embedded/result/

Есть идея и о 2-м варианте. Если прокатит позже тоже выложу.

Оксан, а поведай бедному студенту алгоритм пожалуйста

[sigma77]

Оксан, а поведай бедному студенту алгоритм пожалуйста

$(window).scroll(function() { // При прокрутке окна
    var scT = $(this).scrollTop(); // получаем вертикальное смещение скрола
    $('body').css({'background-position' : '0 ' + (-scT) +  'px'}); // соответственно с полученным значением
                                                                    // смещаем фон верх на это количество единиц
    $('#inner').css({'background-position' : '0 ' + (-scT) +  'px'}); // аналогично 
});

[psywalker]

Оксан, а поведай бедному студенту алгоритм пожалуйста

$(window).scroll(function() { // При прокрутке окна
    var scT = $(this).scrollTop(); // получаем вертикальное смещение скрола
    $('body').css({'background-position' : '0 ' + (-scT) +  'px'}); // соответственно с полученным значением
                                                                    // смещаем фон верх на это количество единиц
    $('#inner').css({'background-position' : '0 ' + (-scT) +  'px'}); // аналогично 
});

Ааа, понял, спасибы, так я и предполагал в принципе Только проблема есть, рывками как-то он меняется. Нужно допиливать походу.

[Softlink]

Проверено на маке.

Самый большой шрифт:

Самый маленький шрифт:

Какие еще проблемы придумаете?

[psywalker]

Softlink,

Да причём тут это? Если текста будет по разному, то и отступы могут быть разные.

Вот тебе ещё пример простой. Сделай так же, как тут, т.е. чтобы при сужении экрана, когда верхние строки перескакивают на следующие, то твоё меню не должно косячить http://psywalker.ru/Forum/Menu/Menu-fon/1.html

[sigma77]

Вариант 2

В полном окне - http://jsfiddle.net/4TEzc/8/embedded/result/'>http://jsfiddle.net/4TEzc/8/embedded/result/

с кодом - http://jsfiddle.net/4TEzc/8/

Какие еще проблемы придумаете?

Проблемы тебе будет ПМ или заказчик придумывать.

Минусы твоего решения мы изложили.

[Softlink]

Softlink,

Да причём тут это? Если текста будет по разному, то и отступы могут быть разные.

Вот тебе ещё пример простой. Сделай так же, как тут, т.е. чтобы при сужении экрана, когда верхние строки перескакивают на следующие, то твоё меню не должно косячить http://psywalker.ru/Forum/Menu/Menu-fon/1.html

капец, ну ты спорщик. Да не изменится ничего там, пойми ты наконец. Слей себе код, поставь разное кол-во текста и посмотри.

При любом разрешении(вплоть до ширины блока меню) оно будет отрабатывать исправно и без косяков.

[psywalker]

Softlink,

Да причём тут это? Если текста будет по разному, то и отступы могут быть разные.

Вот тебе ещё пример простой. Сделай так же, как тут, т.е. чтобы при сужении экрана, когда верхние строки перескакивают на следующие, то твоё меню не должно косячить http://psywalker.ru/Forum/Menu/Menu-fon/1.html

капец, ну ты спорщик. Да не изменится ничего там, пойми ты наконец. Слей себе код, поставь разное кол-во текста и посмотри.

При любом разрешении(вплоть до ширины блока меню) оно будет отрабатывать исправно и без косяков.

Дружище, ну как же не измениться, если я даже одну строку текста ставлю в боди и уже ппц?

http://www.alpatriott.ru/works/primer/menu-fon.html

sigma77

А что ты допилила, что стало работать хорошо?

[Softlink]

Softlink,

Да причём тут это? Если текста будет по разному, то и отступы могут быть разные.

Вот тебе ещё пример простой. Сделай так же, как тут, т.е. чтобы при сужении экрана, когда верхние строки перескакивают на следующие, то твоё меню не должно косячить http://psywalker.ru/Forum/Menu/Menu-fon/1.html

капец, ну ты спорщик. Да не изменится ничего там, пойми ты наконец. Слей себе код, поставь разное кол-во текста и посмотри.

При любом разрешении(вплоть до ширины блока меню) оно будет отрабатывать исправно и без косяков.

Дружище, ну как же не измениться, если я даже одну строку текста ставлю в боди и уже ппц?

http://www.alpatriott.ru/works/primer/menu-fon.html

опять двадцать пять Ну где в сайты вставляют контент в боди? Я тебе говорю про конкретную задачу и как ее можно решить только на CSS. Ну будет у тебя хедер, ну ты сделаешь бг-позишн не такой, какие проблемы? Добавишь пункт меню, поменяешь бг-позишн. Но вот в твоем примере хоть все гладко и отрабатывает, но скролл абсолютно портит всю малину.

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

Спор-то идет вокруг двух вариантов на чистом CSS, какой лучше.

[sigma77]

sigma77

А что ты допилила, что стало работать хорошо?

Не, тут сделано по-другому. Тут обычный фон, но внутри списка он смещается на величину координат верхнего левого угла подсписка. Т.е. по принципу Softlink'а, но всё считается автоматически.

опять двадцать пять Ну где в сайты вставляют контент в боди? Я тебе говорю про конкретную задачу и как ее можно решить только на CSS. Ну будет у тебя хедер, ну ты сделаешь бг-позишн не такой, какие проблемы? Добавишь пункт меню, поменяешь бг-позишн. Но вот в твоем примере хоть все гладко и отрабатывает, но скролл абсолютно портит всю малину.

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

Спор-то идет вокруг двух вариантов на чистом CSS, какой лучше.

Твой вариант предполагает слишком много гемороя при поддержки. Из серии "ищу работу". Ну задал ты жесткие размеры и что? Малейшее изменение хоть одного из них предполагает перелопачивание кучи кода. В идеале после сдачи проекта от верстальщика вообще ничего не должно требоваться править в случае каких-либо изменений, добавления контента и т.п. Тем более такой мелочи, как добавление одного пункта.

[Softlink]

Твой вариант предполагает слишком много гемороя при поддержки. Из серии "ищу работу". Ну задал ты жесткие размеры и что? Малейшее изменение хоть одного из них предполагает перелопачивание кучи кода. В идеале после сдачи проекта от верстальщика вообще ничего не должно требоваться править в случае каких-либо изменений, добавления контента и т.п. Тем более такой мелочи, как добавление одного пункта.

хорошо, значит вариант Макса очень неплох по сравнению с моим, так? Можешь сравнить тогда?

[psywalker]

Твой вариант предполагает слишком много гемороя при поддержки. Из серии "ищу работу". Ну задал ты жесткие размеры и что? Малейшее изменение хоть одного из них предполагает перелопачивание кучи кода. В идеале после сдачи проекта от верстальщика вообще ничего не должно требоваться править в случае каких-либо изменений, добавления контента и т.п. Тем более такой мелочи, как добавление одного пункта.

хорошо, значит вариант Макса очень неплох по сравнению с моим, так? Можешь сравнить тогда?

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

sigma77

А что ты допилила, что стало работать хорошо?

Не, тут сделано по-другому. Тут обычный фон, но внутри списка он смещается на величину координат верхнего левого угла подсписка. Т.е. по принципу Softlink'а, но всё считается автоматически.

Понял, спасибо.

[mishka]

Сигма, скажи пожалуйста не пришла ли ты в итоге к тому о чем я писал в своем первом посте?

А из вариантов решения без JS Sofltnik предложил самый лучший и изящный вариант. Да это хардкод, но лучший из предложенных.

Плагиат Макса на пример SilentIT я даже не рассматриваю. Об этом я писал в том посте который он стер.

[SelenIT]

Пример с фикс-фоном вообще-то был авторства великого Мейера, а я только разместил объяву