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

[Leonidk]

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

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

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

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

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

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

[psywalker]

SoftlinkПонял дружище, теперь Царь желает видеть твою работу :lol: . Знаешь, похоже на что-то типа: "Так, ты свободен, а ты иди сюда"По сабжу: Да, всё таки вариант с внешним бг никак не прокатит. Но я тут придумал ещё один вариант, ребята, зацените. Наводите мышь на пункт4. http://psywalker.ru/Forum/Menu/Menu-fon/2.html

поди к вечеру что-нибудь сваяю. Твой последний пример практически дублирует вариант SelenIT'a

Нет проблем, пусть будет так, но дело-то в том, что задачу он решает идеально или нет? Где косяки?

А можно еще раз для тех кто в танке, а то я что-то сути спора не уловлю никак.1. В чем отличие http://psywalker.ru/Forum/Menu/Menu-fon/1.html и http://psywalker.ru/Forum/Menu/Menu-fon/2.html, кроме того что ограничена ширина боди и задана ширина вложенному списку.2. Чем п.1. принципиально отличается от варианта, предложенного SelenIT, кроме того что у него и в боди фон фиксированный.3. И последний главный вопрос. Почему всё-таки fixed не устраивает?

Нет проблем Оксан, смотри:

1. Это я случайно переделывал первый вариант сначала и уже сохранил в блокноте, а так как было уже очень поздно и я был в сонном бреду, засыпал на ходу, то видимо накосячил и забыл вернуть обратно, ну и залил блиин оба одинаковых... Чёрт, щас попробую вернуть обратно старую версию, чтобы ты видела отличие.

2. Сегодня ночью, когда делал, не обратил на это внимание, но щас понимаю, что на вариант SelenIT очень похоже, по крайней мере идея точно. Только частично, можно сказать, сделано на базе его решения

3. Да, теперь и я присоединяюсь к вопросу. И даже больше спрошу:

Что в моём варианте плохо и перечислите косяки пожалуйста.

Ловите, вот два варианта. Первый качичный вообще всё же. Пилить-не перепилить))

1) http://psywalker.ru/Forum/Menu/Menu-fon/1.html

2) http://psywalker.ru/Forum/Menu/Menu-fon/2.html

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

[Softlink]

А я сделал

Фон появляется только под выпадалкой. Сделано одной картинкой. Независим от добавления и убавления пунктов меню. Ну и шрифтов вроде бы тоже. Разных там натыкал шрифтов и размеров.

Проверял во всех актуальных браузерах(ИЕ 6 естественно не работает :hover для блока). Единственный минус, что надо подгружать картинку и ее размер может быть единственным, что отработать неправильно при ну ооочень большом кол-ве пунктов меню. Это тоже решаемо, надо только вырезать картинку побольше.

Никаких "хардкодов" тут нет. Все решается

background-position 

. Мы ему задаем отрицательный top, равный высоте основного пункта меню.

В общем ссылка вот. Смотрите, судите.

Жду Мишкиной рецензии.

[psywalker]

Softlink,

Забил текст в боди, сверху и всё разлетелось. Всего пару строк с <br /> для наглядности.

http://screencast.com/t/foifr57W0K

[Softlink]

Softlink,

Забил текст в боди, сверху и всё разлетелось. Всего пару строк с <br /> для наглядности.

http://screencast.com/t/foifr57W0K

ну ты даешь! Это же стандартная архитектура сайта. Две колонки резиновый дизайн.

Зачем в боди-то текст забивать? Для этого есть блок для контента. Ну можно и для боди сделать такую штуку. Я делал, как просил Мишка, т.е. максимально близко к примеру автора.

всегда ли ты прям в боди пишешь текст?

[sigma77]

Softlink,

Это плохое решение. Т.к. при малейшем сдвиге вложенного списка, нужно опять ловить background-position.

С fixed этой проблемы нет, т.к. точка отсчета всегда будет одна и та же - верхний угол окна браузера.

[psywalker]

Softlink,

Забил текст в боди, сверху и всё разлетелось. Всего пару строк с <br /> для наглядности.

http://screencast.com/t/foifr57W0K

ну ты даешь! Это же стандартная архитектура сайта. Две колонки резиновый дизайн.

Зачем в боди-то текст забивать? Для этого есть блок для контента. Ну можно и для боди сделать такую штуку. Я делал, как просил Мишка, т.е. максимально близко к примеру автора.

всегда ли ты прям в боди пишешь текст?

Да, практически в 99% случаев на сайте есть шапка, а это означает, что твой вариант не катит никак. На том же Маке интервал в строках может быть чуть больше, а чтобы сломать твой пример, достаточно всого 1px

Поэтому этот вариант мы с Королём вчера и отмели, так как нужен универсальный, качественный рабочий пример, а не сделанный на авось.

sigma77

Оксан, ну как, посмотрела оба варианта, увидела разницу? Что скажешь?

[Softlink]

Softlink,

Это плохое решение. Т.к. при малейшем сдвиге вложенного списка, нужно опять ловить background-position.

С fixed этой проблемы нет, т.к. точка отсчета всегда будет одна и та же - верхний угол окна браузера.

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

А что за пример с fixed?

Softlink,

Забил текст в боди, сверху и всё разлетелось. Всего пару строк с <br /> для наглядности.

http://screencast.com/t/foifr57W0K

ну ты даешь! Это же стандартная архитектура сайта. Две колонки резиновый дизайн.

Зачем в боди-то текст забивать? Для этого есть блок для контента. Ну можно и для боди сделать такую штуку. Я делал, как просил Мишка, т.е. максимально близко к примеру автора.

всегда ли ты прям в боди пишешь текст?

Да, практически в 99% случаев на сайте есть шапка, а это означает, что твой вариант не катит никак. На том же Маке интервал в строках может быть чуть больше, а чтобы сломать твой пример, достаточно всого 1px

Поэтому этот вариант мы с Королём вчера и отмели, так как нужен универсальный, качественный, а не сделанный на авось.

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

А по поводу интервала в строках - это line-height который? Ничего никуда не уедет. Все будет на месте стоять.

[psywalker]

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

Да это ты не понял. Во-первых я тебе говорил, что шрифты на маке и пс отличаются, а это значит, что разница в 1пк возможна на 100%. Во-вторых так нельзя говорить в принципе, потому что в будущем сайт может меняться 100 раз, в плане контента, и легко может добавиться пару строк текста в ту же шапку или ещё куда сверху.

Так что, как вчера сказал нервный, тестировщики вёрстки за такое решение убили бы.

А что за пример с fixed?

http://psywalker.ru/Forum/Menu/Menu-fon/2.html

[Softlink]

Да это ты не понял. Во-первых я тебе говорил, что шрифты на маке и пс отличаются, а это значит, что разница в 1пк возможна на 100%. Во-вторых так нельзя говорить в принципе, потому что в будущем сайт может меняться 100 раз, в плане контента, и легко может добавиться пару строк текста в ту же шапку или ещё куда сверху.

Так что, как вчера сказал нервный, тестировщики вёрстки за такое решение убили бы.

Где этот 1пк будет вылазить? Я просто ни разу не видел как это бывает.

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

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

[sigma77]

sigma77

Оксан, ну как, посмотрела оба варианта, увидела разницу? Что скажешь?

Да посмотрела. Не годится.

Там ты, видимо, забыл добавить отображение абсолютного дива?

Ну и сейчас у тебя абсолютное позиционирование привязано к окну браузера. Но если внутри появятся относительно позиционированные элементы, всё это нафиг поедет.

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

Макет он ниразу не статичен. Он не верстается раз и навсегда. Завтра к тебе подойдет заказчик/руководителя и скажет "давай сдвинем блок не на 150px, а на 160px, так лучше смотрится" или "а вот тут у нас появится новый блок, а этот мы перенесем вот сюда" ну и т.п. А тут еще нерадивый пользователь захотел поменять себе шрифты. Это случается постоянно и это надо предусматривать, а не искать на свою голову лишнюю работу .

А что за пример с fixed?

background-attachment: fixed, который предложил SelenIt

В этом случае точкой отсчета позиционирования фона будет не верхний левый угол элемента, а верхний левый угол браузера. Соответственно будет полное наложение фонов.

[mishka]

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

Не сделал.

[psywalker]

sigma77,

Да посмотрела. Не годится.

Там ты, видимо, забыл добавить отображение абсолютного дива?

Ну и сейчас у тебя абсолютное позиционирование привязано к окну браузера. Но если внутри появятся относительно позиционированные элементы, всё это нафиг поедет.

Оксан, погоди, а ты щас про какой вариант? Скорее всего про первый, тогда да, он действительно хреновый, согласен. А что скажешь про второй?

Ещё на боди повесил fixed, чтобы при прокрутке фон был фиксированным чётко.

[Softlink]

Хорошо, не сделал. Не сделал его универсальным. Я не знаю как его сделать полностью универсальным. Чтобы что ни добавь, все смотрелось красиво. Но с другой стороны, он решает конкретную и весьма не очень часто встречающуюся задачу. То бишь если хочешь такое сделать, будь добр подумать о том, как это будет работать и как это все потом менять.

Как и говорю, я не очень люблю вот такие вот "а если.." - если бы да кабы на луне б росли грибы! Есть макет, его надо сделать

[psywalker]

Хорошо, не сделал. Не сделал его универсальным. Я не знаю как его сделать полностью универсальным. Чтобы что ни добавь, все смотрелось красиво. Но с другой стороны, он решает конкретную и весьма не очень часто встречающуюся задачу. То бишь если хочешь такое сделать, будь добр подумать о том, как это будет работать и как это все потом менять.

Как и говорю, я не очень люблю вот такие вот "а если.." - если бы да кабы на луне б росли грибы! Есть макет, его надо сделать

Да, это всё понятно, но всё таки такое решение не примут те, кто будет сайт тестировать, а если заказчик про такое узнает, то это вообще ппц

[sigma77]

sigma77,

Оксан, погоди, а ты щас про какой вариант? Скорее всего про первый, тогда да, он действительно хреновый, согласен. А что скажешь про второй?

Ещё на боди повесил fixed, чтобы при прокрутке фон был фиксированным чётко.

Про первый. Второй же я видела

Да fixed тут, имхо, оптимальное решение.

[psywalker]

sigma77,

Оксан, погоди, а ты щас про какой вариант? Скорее всего про первый, тогда да, он действительно хреновый, согласен. А что скажешь про второй?

Ещё на боди повесил fixed, чтобы при прокрутке фон был фиксированным чётко.

Про первый. Второй же я видела

Да fixed тут, имхо, оптимальное решение.

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

[sigma77]

Как и говорю, я не очень люблю вот такие вот "а если.." - если бы да кабы на луне б росли грибы! Есть макет, его надо сделать

Ну если так рассуждать. То psd --> save for web ---> <img src="" />, делов-то

[Softlink]

Как и говорю, я не очень люблю вот такие вот "а если.." - если бы да кабы на луне б росли грибы! Есть макет, его надо сделать

Ну если так рассуждать. То psd --> save for web —> <img src="" />, делов-то

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

[psywalker]

Как и говорю, я не очень люблю вот такие вот "а если.." - если бы да кабы на луне б росли грибы! Есть макет, его надо сделать

Ну если так рассуждать. То psd --> save for web —> <img src="" />, делов-то

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

Да, но ты вот попробуй вот этот вариант сломать: http://psywalker.ru/Forum/Menu/Menu-fon/2.html

Всё таки что не делай, а главное, чтобы фон был повешан и всё.

[Softlink]

Как и говорю, я не очень люблю вот такие вот "а если.." - если бы да кабы на луне б росли грибы! Есть макет, его надо сделать

Ну если так рассуждать. То psd --> save for web —> <img src="" />, делов-то

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

Да, но ты вот попробуй вот этот вариант сломать: http://psywalker.ru/Forum/Menu/Menu-fon/2.html

Всё таки что не делай, а главное, чтобы фон был повешан и всё.

так зато он на скролле совсем поршиво смотрится. И как вы говорите "а если.." там будет 2 десятка пунктов в выпадалке и надо будет скроллировать, что тогда?

[sigma77]

так зато он на скролле совсем поршиво смотрится. И как вы говорите "а если.." там будет 2 десятка пунктов в выпадалке и надо будет скроллировать, что тогда?

Про какой скрол ты говоришь? Хоть 2 сотни. Разницы нету. Или мы о разных вещах говорим. По скриншоту не фига ничего не понятно.

[Softlink]

так зато он на скролле совсем поршиво смотрится. И как вы говорите "а если.." там будет 2 десятка пунктов в выпадалке и надо будет скроллировать, что тогда?

Про какой скрол ты говоришь? Хоть 2 сотни. Разницы нету. Или мы о разных вещах говорим. По скриншоту не фига ничего не понятно.

Дубль два

Добавь в выпадалку не пять пунктов, а 30 например. Появится вертикальный скролл. Страницу можно скроллировать, но фон не подстраивается.

Залил на хост, посмотри: http://www.alpatriott.ru/works/primer/menu-fon1.html

[sigma77]

Добавь в выпадалку не пять пунктов, а 30 например. Появится вертикальный скролл. Страницу можно скроллировать, но фон не подстраивается.

Залил на хост, посмотри: http://www.alpatriott.ru/works/primer/menu-fon1.html

Ты про то что фон скролиться не будет? Ну так это да. Тут скорее всего только js поможет.

Ну а так сколько пунктов не добавляй фоны будут совпадать - http://jsfiddle.net/4TEzc/embedded/result/

[psywalker]

Добавь в выпадалку не пять пунктов, а 30 например. Появится вертикальный скролл. Страницу можно скроллировать, но фон не подстраивается.

Залил на хост, посмотри: http://www.alpatriott.ru/works/primer/menu-fon1.html

Ты про то что фон скролиться не будет? Ну так это да.

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

[Softlink]

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

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

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

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

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

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

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

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