Доброго времени суток! Есть понравившийся шаблон, в котором предусмотрен обычный вывод главного меню, т.е без боксов просто список. Но стиль модуля стоит style=«rounded». Я добавила следующий код в Цсс Код (CODE): div.module_menu { background: url(../images/blue/mw_box_br.png) 100% 100% no-repeat; } div.module_menu div { background: url(../images/blue/mw_box_bl.png) 0 100% no-repeat; } div.module_menu div div { background: url(../images/blue/mw_box_tr.png) 100% 0 no-repeat; } div.module_menu div div div { background: url(../images/blue/mw_box_tl.png) 0 0 no-repeat; } Все это работает, если делать боксы стандартно с закругленными углами, но у меня меню выстроено таким образом, что верхушка бокса с выступами и все это на прозрачном фоне. Вертикальные полосы которые должны меняться в зависимости от высоты меню вылазиют сверху и снизу. Полями не регулируется. Примерно это выглядит как на прилагаемом рисунке во вложении Пробовала вставить конструкцию типа (как например в шаблоне bluewater) Код (CODE): <div class="art-Block"> <div class="art-Block-tl"></div> <div class="art-Block-tr"></div> <div class="art-Block-bl"></div> <div class="art-Block-br"></div> <div class="art-Block-tc"></div> <div class="art-Block-bc"></div> <div class="art-Block-cl"></div> <div class="art-Block-cr"></div> <div class="art-Block-cc"></div> <div class="art-Block-body"> Но видно в шаблонах с такой конструкцией как то хитро прописаны функции вывода оформления модуля Подскажите пожалуйста как сделать такое меню??
в шаблонах такого типа все эти элементы помещены на Z-INDEX ниже чем контент который выводится внутри смысл в том что сначала выводится рамочка состоящая все из 3-х рисунков, а потом только контент, посмотри в CSS как это сделано
Вам спасибо за ответ! Вот тока не пойму: нужно ставить Z-INDEX мЕньший для дива содержащего рисунок который и вылазиет за границы? Код (CODE): div.module_menu { background: url(../images/mw_box_tl.png) 0 0 no-repeat; } div.module_menu div { background: url(../images/mw_box_bl.png) 0 100% no-repeat;background } div.module_menu div div { background: url(../images/mw_box_br.png) 0 50% repeat-y; z-index:-1; } Не работает почему-то( Или данной конструкцией я не добьюсь результатов и надо менять содержимое модуля меню, прописывать свою функцию function modChrome_Style($module, &$params, &$attribs)??
я описывал как работает структура <div class="art-Block"> из первого поста описание структуры ROUNDED из какого-то CSS файла: Код (CODE): /* Round Conners example */ .module {background: url(../../../auto-mag/images/bl_grey.gif) 0 100% no-repeat #dddddd; width: 20em; margin-bottom: 10px;} .module div {background: url(../../../auto-mag/images/br_grey.gif) 100% 100% no-repeat} .module div div {background: url(../../../auto-mag/images/tl_grey.gif) 0 0 no-repeat} .module div div div {background: url(../../../auto-mag/images/tr_grey.gif) 100% 0 no-repeat; padding:10px; padding-top: 0px; padding-bottom: 2px;} .module div div div div {background: none;} при этом в index.php пишется: Код (PHP): <jdoc:include type="modules" name="left" style="rounded" /> у меня такое работает
Может я что-то не так делаю, почему эти вертикальные полосы вылазиют, прилагаю более точную картинку неполучающегося меню. Три рисунка: верх, низ и середина которая должна ратсягиваться по высоте.Я пробовала устанавливать поля, всеравно они равняются по первому диву, который div.module_menu. Вот как в коде Код (CODE): div.module_menu { background: url(../images/mw_box_tl.png) 0 0 no-repeat; } div.module_menu div { background: url(../images/mw_box_bl.png) 0 100% no-repeat;background } div.module_menu div div { background: url(../images/mw_box_br.png) 0 50% repeat-y; } div.module_menu { margin: 0; padding: 0; padding-bottom: 0; margin-bottom: 15px; } div.module_menu div div div { padding: 10px; padding-top: 30px; padding-bottom: 15px; width: auto; } div.module_menu div div div div { background: none; padding: 0;
Еще раз большое спасибо за ваш ответ! Я попробовала сделать так как вы сказали. Я поэкспериментировала со стилями меню в настройках самого модуля, остановилась на Legacy плоский список, и верх перестал вылазить (случайно обнаружила)!! вот лучшее что у меня получилось. Делать длинные и широкие части которые должны быть резиновыми нет смысла, картинки с тенями друг на друга накладываются, выходит нужно точно подмерять все стыки? и точно по ширине отмерять картинки в моем случае?
Увы! никакого отношения стили не имеют(( убрала пару пунктов меню, оно сузилось по высоте и снова они вылазиют наверх(((
есть вариант сделать вертикальные линии высотой в 5-ть пикселей и просто размножить их по высоте, если почитать про background директиву используемую в этом случае, то там есть описание что такое размножение по вертикали и горизонтали или давай прикрепляй свой шаблон (только весь а не отдельные файлы) к посту после посмотрим что надо сделать
Без вариантов - пробовала, он их размножает до верхней границы, всеравно вылазиет. Прикрепила, описание неполучающегося меню в template_css 4 файла нового оформления меню в images, в templateDetails не описаны Спасибо вам за помощь! +1
Проблему решила! Путем выбора стиля «xhtml» и небольшими дополнениями функции function modChrome_xhtml
