Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 15 Ответов
  • 1970 Просмотров
*

VVWind

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Я не понимаю, лазил в CSS, в код еще не забегал, который само меню добавляет, но подозреваю, что там просто отсутствует часть, ответственная за "положение относительно родителя". Подменю всегда появляется слева (меню на сайте под шапкой, горизонтальное).
Как решить эту проблему? Пунктов меню с подменюшками штуки три, и каждый раз они слева.
*

Shustry

  • Гуру
  • 6434
  • 745 / 3
Родителю (<li> первого уровня) назначаем position:relative, а потомку, т.е. подменю (<ul> второго уровня): position:absolute; top:50px. Где 50 пикселей - это высота вашей полоски меню первого уровня.
*

VVWind

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Родителю (<li> первого уровня) назначаем position:relative, а потомку, т.е. подменю (<ul> второго уровня): position:absolute; top:50px. Где 50 пикселей - это высота вашей полоски меню первого уровня.

Подскажите, я так сделал?
Код
ul.menu_mainmenu li{
position: relative;
display: inline;
margin-left: 50px;
margin-top: 0px;
padding-bottom: 12px;
}

ul.menu_mainmenu li ul {
display: none;
position: absolute;
margin-top: 10px;
margin-left: 0px;
z-index: 10000;
overflow: visible;
border: 1px solid #6b872a;background: -moz-linear-gradient(bottom right, #dbdcdc, #f4f5f5);background: -webkit-linear-gradient(bottom right, #dbdcdc, #f4f5f5);background: -o-linear-gradient(bottom right, #dbdcdc, #f4f5f5);background: linear-gradient(bottom right, #dbdcdc, #f4f5f5);
}

С этим вариантом не работает :(
*

Shustry

  • Гуру
  • 6434
  • 745 / 3
Код: css
ul.menu_mainmenu li ul {
...
top:50px;
...
}
Далее, рекомендую немного оптимизировать селекторы.
Вместо...
ul.menu_mainmenu li
ul.menu_mainmenu li ul
лучше:
.menu_mainmenu li
.menu_mainmenu ul
*

VVWind

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Подменю стало появляться ниже, чем раньше. Суть в том, что у менявсе пункты меню, основные, горизонтально под шапкой.
То есть
пункт 1 || пункт 2 || пункт 3

Так вот, подменю пункта 1 появляется под пунктом 1. Проблема в том, что подменю пункта 3 появляется почему-то тоже под пунктом 1.
*

Shustry

  • Гуру
  • 6434
  • 745 / 3
Не может такого быть. Дайте ссылку на сайт.
Попробуйте ещё так:
Код: css
ul.menu_mainmenu li{
display: block;
float:left;
}
Или даже так:
Код: css
ul.menu_mainmenu li{
display:inline-block;
}
*

VVWind

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Помогло с позицией меню! :) Спасибо большое! Правда текст стал вылезать за линию, в две строки делаться, а изображение для одного подпункта только для одной строчки :(

float:left исправило положение, но сузило ширину подпунктов. Как такое могло произойти? о_о
*

Shustry

  • Гуру
  • 6434
  • 745 / 3
Пожалуйста. Тут нет универсального ответа. Нужно смотреть ваше меню в реале. Например,
чтобы текст не делался в две строки:
Код: css
.menu_mainmenu a,
.menu_mainmenu span {white-space:nowrap;}
чтобы пункты меню не вылазили из своих контейнеров:
Код: css
.menu_mainmenu a,
.menu_mainmenu span {display:block; float:left;}
С изображениями: хз как они у вас там выводятся. Смотреть надо.
*

VVWind

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Еще раз спасибо! :) white-space:nowrap; помогло.
*

VVWind

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
http://amedia-tyumen.ru/

Очень странно, что в хроме меню отображаются вообще без переноса.
Не думал, что с таким браузером могут быть проблемы. Даже IE отлично отображает.
*

Shustry

  • Гуру
  • 6434
  • 745 / 3
*

VVWind

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Теперь в Firefox исчезли все пункты меню о_о
По моему я действительно усложняю ваше желание подсказать, вот полностью весь css:

Код: css
body {
margin: 0 !important;
min-width: 966px;
width: 100%;
}
#wrapper_main {
width: 970px;
margin: auto;
}
div .wrapper {
width: 970px;
max-width: 1000px;
float: center;
}

.wrapper #sideleft, #maincolumn{
display: inline;
float: left;
position: relative;
margin-left: 0px;
margin-right: 0px;
}
.wrapper #sideleft {
width: 22%;
min-width: 240px;
}
.wrapper #maincolumn {
width: 670px;
margin-left: 0px;
}
.wrapper #top {
width: 970px;
overflow: hidden;
clear: both;
float: left;
position: relative;
background: url(../images/menubar.png) no-repeat;
overflow: visible;

}
.wrapper #footer {
width: 970px;
clear: both;
background: url(../images/footer.png) no-repeat;
}

/* Header config */

#hleft, #hright {
display: inline;
min-width: 300px;
position: relative;
}

#hleft {
float: left;
}
#hright {
float:right
}
div#header {
background: url(../images/header_back_a.png) repeat-x;
}

/* Menu config */

ul.menu_mainmenu {

margin-left: 40px;
height: 36px;
margin-top: 8px;
}
ul.menu_mainmenu li{
clear:both;
float:left;
position: relative;
display:block;
margin-left: 50px;
margin-top: 0px;
padding-bottom: 12px;
}
ul.menu_mainmenu li.item-101{
margin-right: 0px;
}
ul.menu_mainmenu li a {
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
ul.menu_mainmenu li a:active, ul.menu_mainmenu li  a:focus, ul.menu_mainmenu li  a:hover{
color: #613080;
}

ul.menu_mainmenu li ul {
white-space:nowrap;
display: none;
float: left;
position: absolute;
margin-top: 10px;
margin-left: 0px;
z-index: 10000;
overflow: visible;
border: 1px solid #6b872a;background: -moz-linear-gradient(bottom right, #dbdcdc, #f4f5f5);background: -webkit-linear-gradient(bottom right, #dbdcdc, #f4f5f5);background: -o-linear-gradient(bottom right, #dbdcdc, #f4f5f5);background: linear-gradient(bottom right, #dbdcdc, #f4f5f5);
}

ul.menu_mainmenu li:hover ul {
display: block;
background-color: #f4f5f5;
border-radius: 10px 1px;
-moz-box-shadow: -3px -1px 10px rgba(0,0,0,0.5); /* Для Firefox */-webkit-box-shadow: -3px -1px 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */box-shadow: -3px -1px 10px rgba(0,0,0,0.5); /* Параметры тени */
}
ul.menu_mainmenu li:hover ul  li{
display: block;
margin-left: -30px;
margin-right: 8px;
margin-top: 5px;
margin-bottom: 5px;
}

ul.menu_mainmenu li ul  li{
border: 1px black;
color: black;
display: block;
margin-left: 0px;padding-bottom: 8px;background: url(../images/li.png) no-repeat 0 3px;
}
ul.menu_mainmenu li ul  li a{
color: black;padding-left: 24px;
}ul.menu_mainmenu li ul  li.item-110{background: none;background: url(../images/dot.png) no-repeat 2px 5px;margin-top: -2px;margin-bottom: 2px;}
*

Shustry

  • Гуру
  • 6434
  • 745 / 3
Моя ошибка. Так надо:
Код: css
ul.menu_mainmenu li li{
clear:both;
}
*

VVWind

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Добавляя дополнительно li li ничего не происходит, только, конечно, убирая из другого места clear: both в Firefox все показывается.
Но в хроме все почему-то так и остается на одной полосе :(
*

VVWind

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Ой, извиняюсь. Все заработало, это я дурак :) Спасибо огромное!
*

VVWind

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Скажите пожалуйста, почему меню на двух сайтах с одинаковым CSS могут не отрисовываться задний фон полностью? В подменю фон это зеленый логотип маленький и полоска под ним. Это png файл, прозрачный.
Так вот на одном сайте видно 3 полоски, на другом вовсе нет. На одном из двух подменю продукты - первый пункт вообще задрало вверх. А вроде ксс один.

http://amedia-tyumen.ru/
http://amedia-hmao.ru/
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Кнопки калькулятора

Автор owl_ssp

Ответов: 3
Просмотров: 964
Последний ответ 28.03.2018, 12:50:35
от beliyadm
Нет верхнего меню, пунктов подменю в разделе Общие настройки

Автор philip

Ответов: 2
Просмотров: 1389
Последний ответ 27.01.2018, 21:50:37
от philip
После восстановления нет реакции на кнопки сохранить

Автор agr

Ответов: 16
Просмотров: 2897
Последний ответ 07.02.2017, 08:24:18
от agr
сетка подкатегорий в родительской категории

Автор melmi229

Ответов: 0
Просмотров: 1010
Последний ответ 12.10.2016, 16:20:37
от melmi229
Реализация кнопки "Купить"

Автор Mesuti

Ответов: 5
Просмотров: 1514
Последний ответ 28.09.2016, 21:46:36
от Mesuti