Реализация меню с сложным фоном пунктов

[bodyk]

Подскажите, как реализовать вот такое меню. Интересует фоновое изображение пунктов меню. Проблема в том, что сначала идут ромбики (обведен красной линией), которые смещены вниз.

[Great Rash]

Элементарно, надо просто по особому нарезать картинки (те что ромбы). Одна картинка будет содержать кусок верхнего ромба и нижний ромб без этого куска. Не знаю понятно ли объяснил, нет возможности залить картинку.

[bodyk]

Элементарно, надо просто по особому нарезать картинки (те что ромбы). Одна картинка будет содержать кусок верхнего ромба и нижний ромб без этого куска. Не знаю понятно ли объяснил, нет возможности залить картинку.

Я так делал, но получается вот так

[Justnewone]

А если увеличат шрифт? или, вдруг, в две строки?

[s0rr0w]

Элементарно, надо просто по особому нарезать картинки (те что ромбы). Одна картинка будет содержать кусок верхнего ромба и нижний ромб без этого куска. Не знаю понятно ли объяснил, нет возможности залить картинку.

Главное правильно нарезать разделители между пунктами меню. Не надо ромбы нарезать - это сплошная заливка.

Ну, или сделать отрицательные марджины.

[bodyk]

Так как все-таки лучше сделать. Если можно, дайте код в пример

[Great Rash]

Что-то мне тоже стало интересно про отрицательные маргины. На тестовой странице у себя я такое воспроизвести не смог.

[psywalker]

Короче вот такое вот придумал решение, но правда это только наброски, графику поправит сам автор я думаю, просто смысл такой: http://psywalker.ru/SAITS/menu2/index2.html

Edited August 27, 2009 by psywalker

[Great Rash]

Че-то у меня все криво отображается.

[psywalker]

ну конеш криво, я же сказал, что Графику поправит сам автор, я лишь падал идею

Немного поправил графику, но идею оставил!

http://psywalker.ru/SAITS/menu2/index2.html

Edited August 27, 2009 by psywalker

[bodyk]

а как убрать в первом пункте меню ненужную нижнюю часть ромбика?

[psywalker]

а как убрать в первом пункте меню ненужную нижнюю часть ромбика?

Если ты имеешь ввиду сверху? тогда пропиши так: li:first-child { background: (...)} - и тут уже другой фон без ромбика, а если важно ИЕ6, то тогда задай класс первому li

[bodyk]

хорошо, попробую так сделать.

Кстати, сделал с отрицательными полями. Все получилось кроме ослика 6

Edited August 27, 2009 by bodyk

[psywalker]

Кстати, сделал с отрицательными полями. Все получилось кроме ослика 6

а дай код позырить

[Justnewone]

можно еще вот так

[bodyk]

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

проект

Вот если бы исправить баг в ие6...

Edited August 28, 2009 by bodyk

[psywalker]

Justnewone

Кстати тоже интересное решение!

bodyk

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

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

[bodyk]

я уже не говорю о левом фоне, который у тебя попусту не тянется вообще.

О каком фоне идет речь. уточните пожалуйста

[BassEast]

как вариант за 15 минут, право IE немного надо будет подправить.

[psywalker]

как вариант за 15 минут, право IE немного надо будет подправить.

Не прокатывает твой вариант, так как при перескакивании текста на другую строку левый фон НЕ тянется, как у наших вариантов!

[BassEast]

Не прокатывает твой вариант, так как при перескакивании текста на другую строку левый фон НЕ тянется, как у наших вариантов!

прямо таки не прокатывает , согласен вариант пробиваемый, но он расчитан на короткие пункты меню.

как у наших вариантов!

дет. сад, ей Богу.

[psywalker]

как у наших вариантов!

дет. сад, ей Богу.

Причём тут дет.сад, не понял??? Я тебе пример просто привёл, на что ориентир брать

Ты пост читал? У нас с Justnewone варианты разные, но непробиваемые, будь внимателен!

Edited August 31, 2009 by psywalker

[BassEast]

Причём тут дет.сад, не понял??? Я тебе пример просто привёл, на что ориентир брать

Ты пост читал? У нас с Justnewone варианты разные, но непробиваемые, будь внимателен!

в том то и дет. сад, что ты не понял .

какой пример, какой ориентир?)) хочешь сказать, что это лично твоя методика вёрстки?)

psywalker, не злись, пост я читал и всё прекрасно понял, Justnewone не стал бы выкладывать вариант, похожий на твой.

[psywalker]

какой пример, какой ориентир?)) хочешь сказать, что это лично твоя методика вёрстки?)

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

[BassEast]

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

да нафиг мне твой пример, когда я выложил свой? объясни мне? это ж не я за помощью пришёл)

[psywalker]

да нафиг мне твой пример, когда я выложил свой? smile.gif объясни мне? это ж не я за помощью пришёл)

Да всё намного проще, просто ты выложил пример, я увидел, что он не соответствует задаче автора, следовательно я подумал, что ты невнимательно прочитал пост и указал тебе на примеры того, что примерно должно получиться, что-бы не объяснять тебе, да и вообще наглядный пример намного понятнее, вот и всё А кто делал эти примеры, я или Вася пупкин, мне всё пофиг