Новости Joomla

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

arsonix

  • Новичок
  • 2
  • 0 / 0
Добрый день. Достался мне сайт на эксперименты.  http://v27.nichost.ru/ И уже неделю не могу понять как выровнять меню по центру...при добавлении параметра position: relative; меню центруется, но слетает подменю...
Код
.menusys_mega {
    width: 113%;
    height: 47px;
}
#menusys_mega {
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
}
#menusys_mega .menusub_mega {
    margin-top: 0;
    margin-left: 13px !important;
    padding: 0;
    z-index: 666;
    position: absolute;
    background: #f4f4f4;
}
#menusys_mega .submenu-wrap{
    float: left;
    width: 100%;
   
}
#menusys_mega .megacol .submenu-wrap{
    border: none;
    background: none;
}
#menusys_mega .megacol .megacol .menusub_mega {
    margin-top: -35px !important;
    margin-left: -10px !important;
}
#menusys_mega .megacol .megacol .megacol .menusub_mega {
    margin-left: -5px !important;
}
#menusys_mega li {
    padding: 0;
    float: left;
    background: none;
    list-style-type: none;
}
 
#menusys_mega li a {
    padding-left: 13px;
    display: block;
    text-decoration: none;
}
#menusys_mega li .menu-title {
    padding-right: 10px;
    padding-left: 10px;
    display: block;
    display: block;
    /color: #1c1c1c;
    color: white;
    width: auto;
    line-height: 47px;
    //font-size: 14px;
    font-weight: bold;
    font-family: "arial";
    /text-shadow: 1px 1px 0px #FFF;
    text-transform: uppercase;
    list-style-type: none;
}
 
#menusys_mega li.first-item a.active,
#menusys_mega li.first-item:hover a.active,
#menusys_mega li.first-item a:hover {
    /padding-left: 40px;
    display: block;
    /background: url(../../images/mainmenu-home.png) no-repeat 0 0;
}
 
#menusys_mega li.first-item a.active span.menu-title {
    /background: url(../../images/mainmenu-hover.png) no-repeat right 0;
    display: block;
    padding: 0;
    padding-right: 10px;
    padding-left: 10px;
    /color: #0565A7;
    /color: white;
    line-height: 47px;
}
#menusys_mega li.first-item a  {
    /padding-left: 40px;
    /background: url(../../images/icon-home.png) no-repeat 20px 14px;
}
#menusys_mega li.first-item a:hover {
    /padding-left: 40px;
    /background: url(../../images/mainmenu-home.png) no-repeat left 0;
}
#menusys_mega li:hover a,
#menusys_mega li:active a,
#menusys_mega li:focus a,
#menusys_mega li.hasChild:hover a,
#menusys_mega li a.active,
#menusys_mega li a.active:hover,
#menusys_mega li a.active:active,
#menusys_mega li a.active:focus {
    display: block;
    overflow: hidden;
    /background: url(../../images/mainmenu-hover.png) no-repeat left 0;
   
}
 
 
#menusys_mega li:active span.menu-title,
#menusys_mega li:focus span.menu-title,
 
#menusys_mega li a.active .menu-title,
 
#menusys_mega li a.active:active .menu-title
 {
    /background: url(../../images/mainmenu-hover.png) no-repeat right 0;
    /background-color:#367DED;
    display: block;
    /color: #0565A7;
    color: white;
   
}
#menusys_mega li:hover  span.menu-title,
 
#menusys_mega li.hasChild:hover span.menu-title,
 
#menusys_mega li a.active:hover .menu-title,
#menusys_mega li a.active:focus .menu-title{
 
    /background: url(../../images/mainmenu-hover.png) no-repeat right 0;
    background-color:#367DED;
    display: block;
    /color: #0565A7;
    color: white;
   
}
#menusys_mega li:hover ul a .menu-title,
#menusys_mega li:active ul a .menu-title,
#menusys_mega li:focus ul a .menu-title {
    color: #0565A7;
    text-shadow: none;
    display: block;
}
#menusys_mega li ul a.active .menu-title {}
#menusys_mega li ul a:hover ,
#menusys_mega li ul a:active,
#menusys_mega li ul a:focus{
   
}
 
#menusys_mega li ul a:hover .menu-title,
#menusys_mega li ul a:active .menu-title,
#menusys_mega li ul a:focus .menu-title {
    color: #0565A7;
    text-decoration: underline;
}
 
/*--------------------------------*/
#menusys_mega .menu-desc{
    padding: 0 0px 5px 0;
    border: none;
    display: block;
    font-size: 110%;
    color: #6d6d6d;
}
#menusys_mega .menu-image {
    border: none;
    float: left;
    line-height: 44px;
    padding: 8px 0 0;
    margin-right: 3px;
}
#menusys_mega .menu-image img {}
#menusys_mega li.hasChild:hover a .menu-title{
   
}
 
span.has-image {
    display: block;
    background-repeat: no-repeat;
    background-position: 2px 7px;
    padding-left: 22px;
}
span.no-image {
    display: block;
}
 
#menusys_mega .mega-group span.has-image,
#menusys_mega .mega-group span.no-image,
#menusys_mega .mega-group span.has-image {
    padding-left: 20px;
}
#menusys_mega .mega-group a,
#menusys_mega ul a {
    padding-left: 20px;
    color: #767676;
    margin: 0;
    background: none;
}
#menusys_mega li ul.mega-ul  span.has-image,
#menusys_mega li ul.mega-ul  span.no-image,
#menusys_mega li:hover ul.mega-ul  span.no-image {
    /padding-left: 10px;
    display: block;
    height: 25px;
    /background: url(../../images/submenu-arrow.png) no-repeat 0 9px;
}
#menusys_mega li ul.mega-ul a:hover span.has-image,
#menusys_mega li ul.mega-ul a:hover span.no-image,
#menusys_mega li:hover ul.mega-ul a:hover span.no-image{
    padding-left: 10px;
    background: url(../../images/submenu-arrow.png) no-repeat 0 -14px;
}
#menusys_mega .mega-group .menu-title{
    display: block;
    color: #fff;
    line-height: 30px;
    background: none !important;
    text-shadow: none;
}
 
#menusys_mega .megacol .mega-group .menu-title{
    padding: 0;
    font-weight: bold;
    font-size: 100%;
    color: #333 ;
    text-shadow: 1px 1px 0px #dfdfdf;
    line-height: 22px;
}
#menusys_mega .column1,
#menusys_mega .column2{
    width: 100%;
    display: block;
}
#menusys_mega .megacol {
    float: left;
    padding: 5px 10px;
    z-index: 9;
    /margin-bottom: 3px;
        background-color:#367DED;
        list-style: none;
}
#menusys_mega .megacol .megacol{padding: 0;}
#menusys_mega .megacol .megacol .megacol{padding: 5px 10px;}
#menusys_mega .megacol ul {margin: 0;float: none;}
#menusys_mega .megacol ul.mega-ul {padding: 0;}
#menusys_mega .megacol ul li {
    padding: 0;
    float: none;
    /border-bottom: 1px dashed #dee1e1;
    list-style: none;
 
}
 
#menusys_mega .megacol ul li.first-item a,
#menusys_mega .megacol ul li.first-item:hover a,
#menusys_mega .megacol ul li.first-item a.active{
    width: auto;
    height: auto;
    background: none;   
}
#menusys_mega .megacol .mega-group a{
    padding: 3px 0px;
    margin: 0;
}
 
#menusys_mega .megacol ul li.first-item span.has-image{
    display: block;
}
#menusys_mega .menusub_mega .mega-group {
    padding: 0;
    clear: both;
    margin-bottom: 10px;
    /background: url(../../images/mega-group-bg.png) no-repeat left 31px;
}
#menusys_mega .mega-group span.has-image,
#menusys_mega .mega-group span.no-image {
    margin: 0;
    padding: 5px 0;
    display: block;
}
#menusys_mega div.megacol div.mega-group a{
    padding: 0 10px;
    background: none;
}
#menusys_mega div.megacol div.mega-group span.menu-title{
    padding-right: 0;
    font-weight: bold;
    font-size: 100%;
    color: #1c1c1c ;
    text-transform: none;
    line-height: 22px;
    background: none;
}
#menusys_mega .menusub_mega .mega-module {
    clear: both;
    padding-top: 5px;
}
#menusys_mega .menusub_mega h3 {
    margin: 0 0 10px 0;
    font-size: 110%;
    line-height: 25px;
    font-weight: normal;
    color: #FF2C7A !important;
    text-transform: uppercase;
}
#menusys_mega .megacol ul.mega-ul li a,
#menusys_mega li:hover ul.mega-ul li a {
    padding-left: 8px;
    background: none;
    margin: 2px 0;
}
#menusys_mega .megacol ul.mega-ul li span.menu-title {
    line-height: 24px;
   
    height: 25px;
    padding-right: 10px;
    display: block;
    font-size: 100%;
    font-weight: normal;
    text-transform: none;
    /color: #1C1C1C !important;
    /color: white !important;
    background: none ;
}
 
#menusys_mega .megacol ul.mega-ul li a:hover,
#menusys_mega .megacol ul.mega-ul li a:focus,
#menusys_mega .megacol ul.mega-ul li a:active {
    text-decoration: none;
    display: block;
    /padding-left: 8px;
    /background:  #0565A7;
}
#menusys_mega li ul a.item:hover span.menu-title,
#menusys_mega li ul a.item:active span.menu-title,
#menusys_mega li ul a.item:focus span.menu-title,
#menusys_mega li ul a.active:hover span.menu-title {
    color: #fff !important;
    padding: 0;
    margin: 0;
    text-decoration: none;
}
*

IzrA

  • Захожу иногда
  • 322
  • 27 / 0
Re: Горизонтально меню по центру
« Ответ #1 : 15.10.2014, 09:51:01 »
А если уменшить пэддинги:?
Код
#menusys_mega li a {
  display: block;
  padding-left: 5px;
  text-decoration: none;
}
Код
#menusys_mega li .menu-title {
  color: white;
  display: block;
  font-family: "arial";
  font-weight: bold;
  line-height: 47px;
  list-style-type: none;
  padding-left: 7px;
  padding-right: 7px;
  text-transform: uppercase;
  width: auto;
}

Значение left у выпадающих пунктов подставляются в файле zt.megamenus.js в зависимости от координат меню, поэтому, по идее, должны правильно показываться, но зуб не дам)
« Последнее редактирование: 15.10.2014, 09:54:49 от IzrA »
Спасибо для меня слишком много. Стакан вина Плюс в репутацию - в самый раз.

Велосипедист — бедствие для экономики. Он не покупает автомобиля и не берет под него кредит. Не покупает бензин. Не пользуется услугами ремонтных мастерских. Не страхует «гражданскую ответственность». Не пользуется платными стоянками. Не страдает от ожирения. Да он еще и здоров, черт возьми! Здоровые люди не нужны для экономики. Они не покупают лекарства. Они не ходят к частным врачам. Они не увеличивают ВВП.
*

arsonix

  • Новичок
  • 2
  • 0 / 0
Re: Горизонтально меню по центру
« Ответ #2 : 16.10.2014, 01:12:48 »
Всё равно подменю съезжает почему-то вниз...не в стороны, а именно вниз...
*

almika

  • Захожу иногда
  • 325
  • 27 / 0
Re: Горизонтально меню по центру
« Ответ #3 : 17.10.2014, 02:22:21 »
Выравнивание по центру делается с помощью margin: 0 auto;
В вашем случае должно быть так
Код
.menusys_mega {
    height: 47px;
    margin: 0 auto;
}
Но, поскольку меню у вас шире 960px, заданных для .zt-wrapper, последний элемент не будет виден. Поэтому, либо надо увеличить так
Код
.zt-wrapper {
    margin: 0 auto;
    width: 1100px;
}
либо сократить количество элементов в меню, что даже будет лучше. И по-моему, лучше вообще не центрировать, а просто сократить количество элементов.
*

Taatshi

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Re: Горизонтально меню по центру
« Ответ #4 : 17.10.2014, 03:17:27 »
Код: css
#menusys_mega {
margin: 0;
padding: 0;
float: left;
width: 100%;
margin-left: -60px;
}
Но это все равно уродство. Оно у Вас не помещается в общий блок. При  маленьких разрешениях последний пункт слетает вниз.

Вариант 2
Код: css
#menusys_mega li a {
padding-left: 0px;
display: block;
text-decoration: none;
}
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Кликабельность псевдоэлемента в пункте меню

Автор vasilii.pupkov

Ответов: 4
Просмотров: 3436
Последний ответ 29.12.2021, 23:15:38
от v42bis
Выпадающее меню

Автор DrShepard

Ответов: 10
Просмотров: 2975
Последний ответ 20.10.2021, 12:36:16
от DrShepard
Как закруглить края выпадающего меню?

Автор coliandra

Ответов: 1
Просмотров: 1460
Последний ответ 11.12.2020, 21:15:57
от effrit
При прокрутке страницы виджет залезает на меню

Автор coliandra

Ответов: 2
Просмотров: 1376
Последний ответ 27.11.2020, 11:33:58
от coliandra
Как убрать маркер только из одного пункта меню.

Автор kuraev64

Ответов: 2
Просмотров: 1625
Последний ответ 20.07.2020, 11:18:44
от kuraev64