Поправить меню

[drewz]

Проблема в следующем: см. скрин:

Это верхнее горизонтально меню. Стоит ocstore 1.5.1.3

Код этого куска выглядит след. образом:

<li>
<a href="ххх/">Концевые выключатели</a>
<div style="margin-left: -62px;">
<ul>
<li>
<a href="ххх/">Промфактор концевые выключатели (10)</a>
</li>
</ul>
</div>
</li>

Смещение дочернего блока происходит как раз из-за margin-left: -62px;

Если прямо в браузере поправить это значение на -66px, то все становится на свои места:

Все бы хорошо, но я никак не могу найти, где генерируется или откуда берется это значение?! В CSS его нету, в header.tpl тоже... Да и вообще оно появляется только на крайнем элементе меню, на остальных <div> идет без стилей..

[Гість]

ссылку на сайт дайте, посмотрим

[drewz]

http://eltehno.com.ua

спасибо!

[AlexFisher]

найдите и подправьте в stylesheet.css параметр:

 #menu > ul > li > div {left:-5px;}

однако, это кривой костыль.

У вас в файле шаблона стили применяются, что не есть гуд.

[drewz]

У вас в файле шаблона стили применяются, что не есть гуд.

можно, пожалуйста, детальнее, где именно? я вижу, что некоторые отдельные элементы имеют свои стили, но вроде глобальных вставок CSS нету. или я что-то упустил?

upd:

подправил праметр, как Вы сказали. с left:-5px; вообще ничего не произошло, а с margin-left:-5px; поплыли все дочерние пункты меню.. ((

Змінено 16 березня 2013 користувачем drewz

[AlexFisher]

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

Он-то и забивает css. Покажите, что у вас в header.tpl после

<div id="menu">

[drewz]

вот. дальше ничего нету

<?php if ($categories) { ?>
<div id="menu">
 <ul>
   <?php foreach ($categories as $category) { ?>
   <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
  <?php if ($category['children']) { ?>
  <div>
    <?php for ($i = 0; $i < count($category['children']);) { ?>
    <ul>
	  <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
	  <?php for (; $i < $j; $i++) { ?>
	  <?php if (isset($category['children'][$i])) { ?>
	  <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
	  <?php } ?>
	  <?php } ?>
    </ul>
    <?php } ?>
  </div>
  <?php } ?>
   </li>
   <?php } ?>
 </ul>
</div>
<?php } ?>
<div id="line"></div>
<div id="notification"></div>

[AlexFisher]

Да и вообще оно появляется только на крайнем элементе меню, на остальных <div> идет без стилей..

Ан нет. На предпоследнем пункте вижу

margin-left: -113px;

Так что это какое-то очень сильное колдунство.

[drewz]

Ан нет. На предпоследнем пункте вижу

margin-left: -113px;

Так что это какое-то очень сильное колдунство.

действительно...я и не заметил..

колдунство очень сильное, только где от него ноги растут? )

[AlexFisher]

И колдунство, видимо, заключается в

#menu > ul > li:hover

там бордер 2 пикселя толщиной. Думается мне, что загвоздка именно в этом.

[drewz]

попробовал бордер поставить в 1px, все равно идет смещение...

[AlexFisher]

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

Нужно попробовать на стандартной теме "забить" в ширину категориями/подкатегориями меню и поглядеть, как оно формируется.

Тогда действительно не исключено, что толстенькие обводки "сбивают прицел".

upd: и категории и подкатегории?

[drewz]

сейчас вообще убрал бордеры..все равно div'у присваивается какой-то непонятный

margin-left: -46px; (было -62)

[AlexFisher]

А если попробовать решение из поста #4, только заставить его быть !important ?

Интересно.

[drewz]

Для крайних правых сработало. Встали на место, но теперь проблема со всеми остальными - левый края выпадающих меню, соответственно сдвинулись на эти же 5px влево..

[AlexFisher]

#menu - левый паддинг обнулить?

Но это уже явно кривень несусветный :-D

вобщем, думать нужно.

[elf39]

Скорее всего у вас работает скрипт, который и назначает дивам стиль прямо в шаблоне. Я вообще не могу понять зачем там дивы в списке. На вашем месте я бы из меню убрал дивы и переверстал меню. У вас меню конечно специфическое, я бы или в php добавил id категорий или с помощью псевдоклассов выкручивается http://htmlbook.ru/css/nth-child , конечно может если подумать то и более ровное решение можно найти.

[drewz]

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

как этот скрипт выявить? )

по поводу - переверстать меню - я бы с радостью, да вот пока что знаний для этого не сильно хватает ((

[elf39]

как этот скрипт выявить? )

по поводу - переверстать меню - я бы с радостью, да вот пока что знаний для этого не сильно хватает ((

вот этого не скажу. Это нужно искать по шаблону. А если убрать то просто снести <div> и ему просто будет нечего двигать

[dram]

#menu > ul > li > a {
border-radius: 11px 11px 0px 0px;
color: #0C83D4;
display: block;
font-size: 14px;
font-weight: 700;
line-height: 14px;
padding: 12px 6px 11px 4px;
position: relative;
text-decoration: none;
z-index: 6;
}



#menu > ul > li ul > li > a {
color: #FFFFFF;
display: block;
min-width: 120px;
padding: 2px;
text-decoration: none;
white-space: nowrap;
}

[askirov]

Нужно все бордеры сделать в одном стиле, а то у вас при li:hover бордер 2 px а в спокойном 1 px вот и косячит.

[drewz]

<p>

вот этого не скажу. Это нужно искать по шаблону. А если убрать то просто снести</p>

<div>и ему просто будет нечего двигать

попробовал убрать div, все меню пошло косяками.. ((

 #menu > ul > li > a { border-radius: 11px 11px 0px 0px; color: #0C83D4; display: block; font-size: 14px; font-weight: 700; line-height: 14px; padding: 12px 6px 11px 4px; position: relative; text-decoration: none; z-index: 6; } #menu > ul > li ul > li > a { color: #FFFFFF; display: block; min-width: 120px; padding: 2px; text-decoration: none; white-space: nowrap; }

</div>

сделал ваш вариант..практически ничего не изменилось ((

[elf39]

<p>

попробовал убрать div, все меню пошло косяками.. ((

</div>

сделал ваш вариант..практически ничего не изменилось ((

Конечно если убрать див то нужно ввертываться второй уровень меню. Конечно трудно придется без знания верстки магазин вести. Допишите тогда кусок в цсс:

#menu li:nth-child(7) div {
          margin-left: -65px !important;
}