Центровка пунктов в выпадающем меню по центру ul блока (Битрикс меню)

@Натахост · Регистрация: 15.02.2012

Студворк — интернет-сервис помощи студентам

Всем привет!

Требуется в выпадающем меню, т.е. в самых блоках выпадающего меню, сделать чтобы все ссылки были в центре, т.е. чтобы они сбились в центре, не нужно центровать блоки, центровать ссылки выше, а только сами ссылки в блоке, который выпал из ссылок меню. Надеюсь в чем тут суть объяснил, а теперь привожу коды - CSS и HTML с моими комментариями БОЛЬШИМИ буквами где нужный момент для исправления.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/**Top menu**/
 #horizontal-multilevel-menu,#horizontal-multilevel-menu ul
 {
 margin:0; padding:0;
 position:relative;
 min-height:27px;
 width:100%;
 list-style:none;
 font-size:11px;
 float:left; 
 z-index:50;
 /*font-size:90%*/;
 text-align:center;
 }
 
 #horizontal-multilevel-menu
 {
 text-align:center;
 }
 
 /*Links*/
 #horizontal-multilevel-menu a
 {
 display:block;
 padding:4px 10px;
 /*padding:0.3em 0.8em;*/
 text-decoration:none;
 text-align:center;
 
 }
 
 #horizontal-multilevel-menu li 
 {
 float:left;
 }
 
 /*Root items*/
 #horizontal-multilevel-menu li a.root-item
 {
 color:#000; font-size: 14px; padding:4px 10px 5px;
 font-weight:bold; position: relative;
 margin:0 7px; background:#ffda00;
 }
 /*Root menu selected*/
 #horizontal-multilevel-menu li a.root-item-selected
 {
 background:#ff6291; font-size: 14px;
 color:#fff; position: relative; margin:0 7px;
 font-weight:bold; padding:4px 10px;
 
 }
 
 /*Root items: hover*/
 #horizontal-multilevel-menu li:hover a.root-item, #horizontal-multilevel-menu li.jshover a.root-item
 {
 background:#ff6291;
 color:#fff;
 }
 
 /*Item-parents*/
 #horizontal-multilevel-menu a.parent
 {
 background: url(images/arrow.gif) center right no-repeat;
 }
 
 /*Denied items*/
 #horizontal-multilevel-menu a.denied
 {
 background: url(images/lock.gif) center right no-repeat;
 }
 
 /*Child-items: hover*/
 #horizontal-multilevel-menu li li:hover, #horizontal-multilevel-menu ul li li.jshover
 {
 background:#D6D6D6;
 color:#fff;
 }
 .bcw, .rcw{ height: 15px;
 width: 100%; position:relative; z-index:0; overflow:hidden;}
 .bcw .lc, .bcw .rc{top:-12px;}
 /*Child-items selected*/
 #horizontal-multilevel-menu li.item-selected
 {
 background:#D6D6D6;
 color:#fff;
 }
 
 /*Sub-menu box*/
 #horizontal-multilevel-menu li ul
 {
 position:absolute;
 width: 960px;
 top:auto;
 display:none;
 z-index:500;
 left:5px; zoom:1;
 height:auto;
 background:#ff6291;
 margin: 0 auto;
 text-align: center;
 
 }
 
 /*ВОТ ОН САМ БЛОК, КОТОРЫЙ ОТОБРАЖАЕТ ССЫЛКИ, НО ЕГО ЦЕНТРИРОВАТЬ НЕ ПОЛУЧАЕТСЯ, ОН ЧАСТО УЕЗЖАЕТ КУДА-ТО*/
 /*Sub-menu item box*/
 #horizontal-multilevel-menu li li 
 {
 border-left:1px solid #fff;
 }
 
 /*А ВОТ КАЖДАЯ ССЫЛКА ЭТОГО ВЫПАДАЮЩЕГО БЛОКА ИЗ МЕНЮ*/
 /*Item link*/
 #horizontal-multilevel-menu li ul a
 {
 text-align:center;
 }
 li.rcw:hover, li.bcw:hover{background:none !important;}
 div.menu-clear-left
 {
 clear:left;
 }

А теперь код шаблона HTML:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<ul id="horizontal-multilevel-menu">
 
 <?
 $previousLevel = 0;
 foreach($arResult as $arItem):?>
 
 <?if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):?>
 <?=str_repeat("<li class='bcw'><img src='/images/cmmenul.png' class='lc' /><img src='/images/cmmenur.png' class='rc' /></li></ul></li>", ($previousLevel - $arItem["DEPTH_LEVEL"]));?>
 <?endif?>
 
 <?if ($arItem["IS_PARENT"]):?>
 
 <?if ($arItem["DEPTH_LEVEL"] == 1):?>
 <li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><img src="/images/cmmenul.png" class="lc" /><?=$arItem["TEXT"]?><img src="/images/cmmenur.png" class="rc" /></a>
 <ul><li class='rcw'><img src='/images/cmmenul.png' class='lc' /><img src='/images/cmmenur.png' class='rc' /></li>
 <?else:?>
 <li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>" class="parent"><?=$arItem["TEXT"]?></a>
 <ul><li class='rcw'><img src='/images/cmmenul.png' class='lc' /><img src='/images/cmmenur.png' class='rc' /></li>
 <?endif?>
 
 <?else:?>
 
 <?if ($arItem["PERMISSION"] > "D"):?>
 
 <?if ($arItem["DEPTH_LEVEL"] == 1):?>
 <li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><img src="/images/cmmenul.png" class="lc" /><?=$arItem["TEXT"]?><img src="/images/cmmenur.png" class="rc" /></a></li>
 <?else:?>
 <?php
 // ВОТ ТО МЕСТО, ГДЕ ВЫВОДИТСЯ КАЖДАЯ ТАКАЯ ССЫЛКА ИЗ ВЫПАДАЮЩЕГО БЛОКА,
 // КОТОРЫЕ Я БЫ ХОТЕЛ ЦЕНТРОВАТЬ В ЭТОМ ВЫПАДАЮЩЕМ БЛОКЕ
 ?>
 <li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
 <?endif?>
 
 <?else:?>
 
 <?if ($arItem["DEPTH_LEVEL"] == 1):?>
 <li><a href="" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li>
 <?else:?>
 <li><a href="" class="denied" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li>
 <?endif?>
 
 <?endif?>
 
 <?endif?>
 
 <?$previousLevel = $arItem["DEPTH_LEVEL"];?>
 
 <?endforeach?>
 
 <?if ($previousLevel > 1)://close last item tags?>
 <?=str_repeat("</ul></li>", ($previousLevel-1) );?>
 <?endif?>
 
 </ul>
 <div class="menu-clear-left"></div>

@Tixon · 30.01.2013, 11:10

Сообщение от Натахост

CSS
1
2
3
4
#horizontal-multilevel-menu li ul a
 {
 text-align:center;
 }

там скорее #horizontal-multilevel-menu li a без ul.

@Натахост · 01.02.2013, 11:04 **[ТС]**

Спасибо, не помогло, либо я не понял, код именно такой, как в первом посте, а именно:

CSS
1
2
3
4
#horizontal-multilevel-menu li ul a
{
    text-align:center;
}

"ul" убрал, но разницы никакой.

@Натахост · 04.02.2013, 15:25 **[ТС]**

up! Тема далеко ушла, т.к. ее переносили из раздела Битрикса, сначала почему-то решили модераторы что дело в Битриксе. Никто не подскажет с точки зрения CSS? Это чисто CSS-ная задача...

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Натахост 1 / 1 / 0 Регистрация: 15.02.2012 Сообщений: 8
	04.02.2013, 15:25 [ТС]
	up! Тема далеко ушла, т.к. ее переносили из раздела Битрикса, сначала почему-то решили модераторы что дело в Битриксе. Никто не подскажет с точки зрения CSS? Это чисто CSS-ная задача... 0

Опции темы