Горизонтально меню по центру

Добрый день. Достался мне сайт на эксперименты. 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;
}

либо сократить количество элементов в меню, что даже будет лучше. И по-моему, лучше вообще не центрировать, а просто сократить количество элементов.

Записан

Русская локализация HikaShop

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 Просмотров: 5406	29.12.2021, 23:15:38 от v42bis
Выпадающее меню Автор DrShepard	Ответов: 10 Просмотров: 4647	20.10.2021, 12:36:16 от DrShepard
Как закруглить края выпадающего меню? Автор coliandra	Ответов: 1 Просмотров: 3099	11.12.2020, 21:15:57 от effrit
При прокрутке страницы виджет залезает на меню Автор coliandra	Ответов: 2 Просмотров: 2808	27.11.2020, 11:33:58 от coliandra
Как убрать маркер только из одного пункта меню. Автор kuraev64	Ответов: 2 Просмотров: 2942	20.07.2020, 11:18:44 от kuraev64

Горизонтально меню по центру - Вопросы по CSS

Новости Joomla

‼️ 👩‍💻 Обновление безопасности для Tassos Framework!

👩‍💻 Joomla включена в программу Google Summer of Code 2026.

Вышли релизы Joomla 6.0.3 и Joomla 5.4.3

arsonix

Горизонтально меню по центру

IzrA

Re: Горизонтально меню по центру

arsonix

Re: Горизонтально меню по центру

almika

Re: Горизонтально меню по центру

Taatshi

Re: Горизонтально меню по центру

Похожие темы