Как модулю меню дать свое оформление??

Доброго времени суток!
Есть понравившийся шаблон, в котором предусмотрен обычный вывод главного меню, т.е без боксов просто список. Но стиль модуля стоит style=«rounded». Я добавила следующий код в Цсс

Код (CODE):

1. div.module_menu {
2.     background: url(../images/blue/mw_box_br.png) 100% 100% no-repeat;
3. }
4. div.module_menu div {
5.     background: url(../images/blue/mw_box_bl.png) 0 100% no-repeat;
6. }
7. div.module_menu div div {
8.     background: url(../images/blue/mw_box_tr.png) 100% 0 no-repeat;
9. }
10. div.module_menu div div div {
11.     background: url(../images/blue/mw_box_tl.png) 0 0 no-repeat;
12. }

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

Примерно это выглядит как на прилагаемом рисунке во вложении
Пробовала вставить конструкцию типа (как например в шаблоне bluewater)

Код (CODE):

1. <div class="art-Block">
2.     <div class="art-Block-tl"></div>
3.     <div class="art-Block-tr"></div>
4.     <div class="art-Block-bl"></div>
5.     <div class="art-Block-br"></div>
6.     <div class="art-Block-tc"></div>
7.     <div class="art-Block-bc"></div>
8.     <div class="art-Block-cl"></div>
9.     <div class="art-Block-cr"></div>
10.     <div class="art-Block-cc"></div>
11.     <div class="art-Block-body">

Но видно в шаблонах с такой конструкцией как то хитро прописаны функции вывода оформления модуля

Подскажите пожалуйста как сделать такое меню??

 

Вам спасибо за ответ!
Вот тока не пойму: нужно ставить Z-INDEX мЕньший для дива содержащего рисунок который и вылазиет за границы?

Код (CODE):

1. div.module_menu {
2.     background: url(../images/mw_box_tl.png) 0 0 no-repeat;
3. }
4. div.module_menu div {
5.     background: url(../images/mw_box_bl.png) 0 100% no-repeat;background
6. }
7. div.module_menu div div {
8.     background: url(../images/mw_box_br.png) 0 50% repeat-y;
9.           z-index:-1;
10. }

Не работает почему-то(

Или данной конструкцией я не добьюсь результатов и надо менять содержимое модуля меню, прописывать свою функцию function modChrome_Style($module, &$params, &$attribs)??

 

Может я что-то не так делаю, почему эти вертикальные полосы вылазиют, прилагаю более точную картинку неполучающегося меню. Три рисунка: верх, низ и середина которая должна ратсягиваться по высоте.Я пробовала устанавливать поля, всеравно они равняются по первому диву, который div.module_menu.
Вот как в коде

Код (CODE):

1. div.module_menu {
2.     background: url(../images/mw_box_tl.png) 0 0 no-repeat;
3. }
4. div.module_menu div {
5.     background: url(../images/mw_box_bl.png) 0 100% no-repeat;background
6. }
7. div.module_menu div div {
8.     background: url(../images/mw_box_br.png) 0 50% repeat-y;
9. }
10. div.module_menu {
11.     margin: 0;
12.     padding: 0;
13.    
14.     padding-bottom: 0;
15.     margin-bottom: 15px;
16. }
17. div.module_menu div div div {
18.     padding: 10px;
19.     padding-top: 30px;
20.     padding-bottom: 15px;
21.     width: auto;
22. }
23. div.module_menu div div div div {
24.     background: none;
25.     padding: 0;

 

Еще раз большое спасибо за ваш ответ!
Я попробовала сделать так как вы сказали. Я поэкспериментировала со стилями меню в настройках самого модуля, остановилась на Legacy плоский список, и верх перестал вылазить (случайно обнаружила)!! вот лучшее что у меня получилось.
Делать длинные и широкие части которые должны быть резиновыми нет смысла, картинки с тенями друг на друга накладываются, выходит нужно точно подмерять все стыки? и точно по ширине отмерять картинки в моем случае?

 

Увы! никакого отношения стили не имеют(( убрала пару пунктов меню, оно сузилось по высоте и снова они вылазиют наверх(((

 

Без вариантов - пробовала, он их размножает до верхней границы, всеравно вылазиет.

Прикрепила, описание неполучающегося меню в template_css
4 файла нового оформления меню в images, в templateDetails не описаны
Спасибо вам за помощь! +1

 

Проблему решила!
Путем выбора стиля «xhtml» и небольшими дополнениями функции function modChrome_xhtml