Устранил проблему с кнопками навигации, но появилась проблема с выдвижными панелями

Здравствуйте)

Уже давно была проблема с кнопками навигации. Установка в ПА галочки: слева, по центру, справа - никак не влияла на положение кнопок. Они все время жались к левой стенке. Также не удавалось скрыть через css какую-нибудь кнопку, все равно оставалась узенькая полосочка(уже где-то писал об этом)

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

У меня в ксс стоят настройки для кнопок навигации, также в ксс настройки для выдвижных панелей Разное и Ворлд, Сообщения ЛС, в виджете настройки ксс для выдвижной панели Профиль..
Во всех этих местах, устанавливая по очереди элементы ксс, потом возвращая виджеты на место, мне пришлось сделать исправления с left на center. только в этом случае, кнопки в панели навигации до сих пор остаются на месте. (это я так интуитивно поставил, естественно содержание кодов не понимаю..)

вот моя ксс

Код:

/* Скругление цитаты, и изменение высоты текста Code */
    .content blockquote {
    border: 1px solid #fff;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
    }

   
    dl.codebox dt {
    text-transform: none;
    }
/* конец */





/* аватарки в форумах и темах */
.mini_ava {
              float: left;
            }
            .mini_ava img {
              width: 30px;
              height: 30px;
              margin: 0 5px;
              border-radius: 10px;
              transition: all 1s;
              -moz-transition: all 1s;
              -webkit-transition: all 1s;
              -o-transition: all 1s;
            }
            .mini_ava img:hover
            {
              width: 70px;
              height: 70px;
            }
    #color, #wcolor {overflow: visible;}
    #colorpicker {position: absolute; top: 20px; left: -225px;}
    #grid {border: 1px solid #808080;}
    #grid td {padding: 0px;}
    #grid td button {height: 12px; width: 12px; padding: 0px; border: 1px solid #808080;}
    #grid td button:hover {border: 1px solid #ffffff;}

        #logo img {
    width: 100%;
    height: auto;
    margin: 0;
    }
    #logo {
    padding: 0;
    }

ul.topiclist li.header dl dd {
font-size:11px !important;
}
/* конец */

   
   

 
/* цвет заднего фона в чате */
        body.chatbox {
            background-color:#000;
        }
/* конец */





/* Оформление кнопок в панели навигации */
      #search-box {
    display:none;
    }

    .headerbar + .navbar {
      padding: 0;
      margin: 2px auto;
      border: 1px solid #222;
      background-color: #000;
      zoom:1;
    }

    .headerbar + .navbar .corners-top, .headerbar + .navbar .corners-bottom {
      display: none;
    }

    ul.navlinks {
      border-bottom: none;
      padding: 0;
    }
   
    .headerbar + .navbar .navlinks li {
      border-right: 1px solid #222;
      -moz-box-shadow: 1px 0 0 #444;
      -webkit-box-shadow: 1px 0 0 #444;
      box-shadow: 1px 0 0 #444;
      height: 40px;
      line-height: 40px;
      padding: 0 0 0 10px;
    }

    ul.linklist li {
      float: center;
      position: relative;
    }
   
    .headerbar + .navbar .navlinks a {
    color: #BFDAD6;
text-transform: uppercase;
font: bold 12px Tahoma, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 black;
outline: none;
} 
 

    .headerbar + .navbar .linklist a:hover {
      color: #00FFFF;
    }
/* конец */




/* маскировка кнопок плюс и минус */
      .vote .vote-no-bar {
    display:none;
    }
    .vote {
    width: auto;
    }
    .vote-button {
    width: auto;
    font-size: 0px;
    }
/* конец */





/* закругление кнопок pop-up окна входа */
    input {
    -moz-border-radius:5px;
    -khtml-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    }
/* конец */
   




/* скрытие кнопки Календарь */
a.mainmenu[href*='/calendar']{display:none;}
/* конец*/





/* Высота строчек в Чате */
    .chatbox p {
    min-height: 15px !important;
    }
/* конец */





/*Фон и рамка открытой части спойлера*/
    .spoiler{
    background-image:url(http://www.snapsnap.ru/i/green83.jpg);
    color:#030348;
    -moz-border-radius:4px;
    -khtml-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:#559B69 0px solid;
    box-shadow:0 0 15px 2px #559B69;
    -webkit-box-shadow:0 0 15px 2px #559B69;
    -moz-box-shadow:0 0 15px 2px #559B69;
    padding:4px;
    }
/* конец */






/*Фон и рамка закрытой части спойлера*/
    .spoiler_closed{
    background-color:#E3FFD8;
    height:1px;
    -moz-border-radius:4px;
    -khtml-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #E3FFD8;
    }
/* конец */




/*Сворачивающийся чат со звуковым сигналом*/
    .resize_process img.resize_img {
    display: inline;
    }
/* конец */





/*Примочка для Выдвижной панели кнопки Разное, ЕА Ворлд*/
    ul.linklist li {
      position: relative;
      float:center;
    }

    li:hover .menupan {
      opacity: 1;
      visibility: visible;
      margin-top: 12px;
    }

    .menupan {
      margin-top: 5px;
      margin-left: -7px;
      _margin: 0; /*IE6 only*/
      opacity: 0;
      visibility: hidden;
      position: absolute;
      top: 29px;
      z-index: 999;
      background-color: #000;
      padding: 5px;
      -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
      -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
      box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      -webkit-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      -ms-transition: all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
    }

    .menupan a {
      display:block;
      width: 150px;
      text-align: left !important;
      margin-left: 5px;
      padding: 6px 0;
    }
/* конец */






/*Полупрозрачность кнопок в Панели навигации, при наведении мышкой*/
    a.mainmenu:hover {
    opacity:0.7;filter:alpha(opacity=70);
    }
/* конец */


/* добавляем настройки для разворачивающегося меню */

    .dop_menu {
            margin: 15px 0 0 0;
            _margin: 0; /*IE6 only*/
            opacity: 0;
            visibility: hidden;
            position: absolute;
            top: 38px;
            left: 0;
            z-index: 999;
            background: #444;
            -webkit-transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            -ms-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
            list-style: none;
    }

    li:hover .dop_menu {
            opacity: 1;
            visibility: visible;
            margin: -1px 0 0 0;
    }

    .dop_menu li {
            float: none;
            display: block !important;
            border: 0;
            padding: 0 !important;
            _line-height: 0; /*IE6 only*/
            -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666 !important;
            -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666 !important;
            box-shadow: 0 1px 0 #111, 0 2px 0 #666 !important;
    }
   
    .dop_menu li:last-child {
            -moz-box-shadow: none !important;
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
    }
   
    .dop_menu a {
            padding: 10px;
            width: 130px;
            _height: 10px; /*IE6 only*/
            display: block;
            white-space: nowrap;
            float: none;
            text-transform: none;
            outline: none;
    }
   
    .dop_menu li:hover {
            background-color: #111 !important;
    }

    #search_menu {
      left: 0 !important;
      top: 50px !important;
    }



вот коды этих блоков

кусок из ксс для внешнего вида кнопок навигации

Код:

/* Оформление кнопок в панели навигации */
      #search-box {
    display:none;
    }

    .headerbar + .navbar {
      padding: 0;
      margin: 2px auto;
      border: 1px solid #222;
      background-color: #000;
      zoom:1;
    }

    .headerbar + .navbar .corners-top, .headerbar + .navbar .corners-bottom {
      display: none;
    }

    ul.navlinks {
      border-bottom: none;
      padding: 0;
    }
   
    .headerbar + .navbar .navlinks li {
      border-right: 1px solid #222;
      -moz-box-shadow: 1px 0 0 #444;
      -webkit-box-shadow: 1px 0 0 #444;
      box-shadow: 1px 0 0 #444;
      height: 40px;
      line-height: 40px;
      padding: 0 0 0 10px;
    }

    ul.linklist li {
      float: center;
      position: relative;
    }
   
    .headerbar + .navbar .navlinks a {
    color: #BFDAD6;
text-transform: uppercase;
font: bold 12px Tahoma, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 black;
outline: none;
} 
 

    .headerbar + .navbar .linklist a:hover {
      color: #00FFFF;
    }
/* конец */

кусок из ксс для выдвижной панели Разное(и ворлд)

Код:

/*Примочка для Выдвижной панели кнопки Разное, ЕА Ворлд*/
    ul.linklist li {
      position: relative;
      float:center;
    }

    li:hover .menupan {
      opacity: 1;
      visibility: visible;
      margin-top: 12px;
    }

    .menupan {
      margin-top: 5px;
      margin-left: -7px;
      _margin: 0; /*IE6 only*/
      opacity: 0;
      visibility: hidden;
      position: absolute;
      top: 29px;
      z-index: 999;
      background-color: #000;
      padding: 5px;
      -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
      -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
      box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      -webkit-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      -ms-transition: all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
    }

    .menupan a {
      display:block;
      width: 150px;
      text-align: left !important;
      margin-left: 5px;
      padding: 6px 0;
    }
/* конец */

настройки ксс, установленные в виджет выдвижной панели Профиль

Код:

 <style type type="text/css">
    ul.linklist li {
      position: relative;
      float:center;
    }

    li:hover #prof-content {
      opacity: 1;
      visibility: visible;
      margin-top: 12px;
    }

    #prof-content {
      margin-top: 5px;
      margin-left: -7px;
      _margin: 0; /*IE6 only*/
      opacity: 0;
      visibility: hidden;
      position: absolute;
      top: 29px;
      z-index: 999;
      background-color: #000;
      padding: 5px;
      -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
      -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
      box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      -webkit-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      -ms-transition: all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
    }

    #prof-content a {
      display:block;
      width: 150px;
      text-align: left !important;
      margin-left: 5px;
    }
</style>   

    <div style="display:none"><div id="prof-content"class="menupan">
    <a href="/profile?mode=editprofile&amp;page_profil=informations">Информация</a>
    <a href="/profile?mode=editprofile&page_profil=preferences">Личные настройки</a>
    <a href="/profile?mode=editprofile&amp;page_profil=signature">Подпись</a>
    <a href="/profile?mode=editprofile&amp;page_profil=avatars">Аватара</a>   
    <a href="/search?search_id=watchsearch">Темы для слежения</a>
    <a href="/search?search_id=favouritesearch">Закладки</a>
    <a href="/search.forum?search_id=egosearch">Мои сообщения</a>
    </div>
    </div>


В общем при данных настройках, кнопки в панели навигации находятся по центру, но при наведении мышки на кнопки (Профиль, сообщения ЛС, Разное, World) выдвижные панели этих кнопок всплывают в левой части форума....
Еще заметил, после ctrl+F5 у меня страница медленно грузится, и в какой-то момент, при наведении мышки на кнопку, какая-то выдвижная панель появляется там где и должна, а потом всё..
Подскажите пожалуйста, как это можно исправить

p.s. подписал все блоки в ксс(если правильно разбил их на части конечно) сейчас все блоки понятны, кроме самого последнего.. не могу понять, к чему он относится и вообще нужен или нет.

Код:


/* добавляем настройки для разворачивающегося меню */


Удалил настройки КСС из виджета выдвижной панели Профиль.
В КСС в блоках

Код:

/* Оформление кнопок в панели навигации */
и
/*Примочка для Выдвижной панели кнопки Разное, ЕА Ворлд*/

поставил значение float: none . (хотя наверное в первом блоке можно ничего и не менять)
Теперь положение кнопок (слева, центр, справа) регулируется через ПА.

Но при значении: left(right) выдвижные панели открываются там где и нужно..(кнопки при этом конечно сдвинуты, но выглядят совсем по другому, и скрытая кнопка Календарь снова торчит в виде узенькой полоски..)

А если поставить по центру, то панели открываются возле левой стенки монитора....
Не могу понять, где в коде кусок, отвечающий за привязку панелей к кнопкам..

апну тему.. (чтоб не исчезла..)

Я обращаюсь ко всем, читающим данную тему!

не понимаю этого молчания..

Совсем никаких ответов(ни да ни нет) никаких советов. даже - ни слова о том, понятно я изложил свою проблему или совсем глупость написал..

Все-таки прошу поучаствовать.. даже, если решение Вам не известно..

(в ближайшее время, создам тестовый форум и проверю оформление кнопок и работу выдвижных панелей.. Если результат будет аналогичным, прийдется вернуться к своему первому сообщению. т.е. Помогите..)

Попробовал на тестовике сокращенный вариант: Выдвижную панель для кнопки профиль.

Что поставил:

Оформление кнопок навигации

Код:

/* Оформление кнопок в панели навигации */
      #search-box {
    display:none;
    }

    .headerbar + .navbar {
      padding: 0;
      margin: 2px auto;
      border: 1px solid #222;
      background-color: #000;
      zoom:1;
    }

    .headerbar + .navbar .corners-top, .headerbar + .navbar .corners-bottom {
      display: none;
    }

    ul.navlinks {
      border-bottom: none;
      padding: 0;
    }
   
    .headerbar + .navbar .navlinks li {
      border-right: 1px solid #222;
      -moz-box-shadow: 1px 0 0 #444;
      -webkit-box-shadow: 1px 0 0 #444;
      box-shadow: 1px 0 0 #444;
      height: 40px;
      line-height: 40px;
      padding: 0 0 0 10px;
    }

    ul.linklist li {
      float: center;
      position: relative;
    }
   
    .headerbar + .navbar .navlinks a {
    color: #BFDAD6;
text-transform: uppercase;
font: bold 12px Tahoma, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 black;
outline: none;
} 
 

    .headerbar + .navbar .linklist a:hover {
      color: #00FFFF;
    }
/* конец */

Код для выдвижной панели Профиль

Код:

/*Примочка для Выдвижной панели кнопки Разное, ЕА Ворлд*/
    ul.linklist li {
      position: relative;
      float:none;
    }

    li:hover .menupan {
      opacity: 1;
      visibility: visible;
      margin-top: 12px;
    }

    .menupan {
      margin-top: 5px;
      margin-left: -7px;
      _margin: 0; /*IE6 only*/
      opacity: 0;
      visibility: hidden;
      position: absolute;
      top: 29px;
      z-index: 999;
      background-color: #000;
      padding: 5px;
      -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
      -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
      box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      -webkit-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      -ms-transition: all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
    }

    .menupan a {
      display:block;
      width: 150px;
      text-align: left !important;
      margin-left: 5px;
      padding: 6px 0;
    }
/* конец */

в виджет, ссылки для кнопки Профиль

Код:

<div style="display:none"><div id="prof-content"class="menupan">
    <a href="/profile?mode=editprofile&amp;page_profil=informations">Информация</a>
    <a href="/profile?mode=editprofile&page_profil=preferences">Личные настройки</a>
    <a href="/profile?mode=editprofile&amp;page_profil=signature">Подпись</a>
    <a href="/profile?mode=editprofile&amp;page_profil=avatars">Аватара</a>   
    <a href="/search?search_id=watchsearch">Темы для слежения</a>
    <a href="/search?search_id=favouritesearch">Закладки</a>
    <a href="/search.forum?search_id=egosearch">Мои сообщения</a>
    </div>
    </div>

Создал Javascript для кнопки Профиль

Код:

jQuery(document).ready(function(){
    jQuery("#prof-content").appendTo("li:has(a[href$='profile?mode=editprofile'])");
    });

Результат:


Раньше подобной проблемы не видел потому, что кнопки в панели навигации были расположены слева. Но как только поставил их по центру, сразу появилась эта проблема.. (и при этом кнопки выглядят немного по другому)

Слева(или справа) кнопки выглядят так:

(и панель выдвигается в нужном месте)


Подскажите, плиз, где может быть ошибка?

тема по прежнему актуальна..

итак, что нужно: чтобы кнопки в панели навигации были расположены по центру и при этом, при наведении на нужную из кнопок(а их сейчас 4), выдвигалась панель под конкретной кнопкой..

А сейчас все 4 панели открываются в одном и том-же месте.

Положение панелей я сместил относительно кнопок, что-бы с любой кнопки можно было мышкой до открывшейся панели достать..

хелп

Уже не один раз уточняла. Извините, допишу прямо в туториал:

Давно была проблема с кнопками навигации. Установка в ПА галочки: слева, по центру, справа - никак не влияла на положение кнопок.

— это не проблема, а специфика кнопок. Без параметра float: left они некорректно работают, поэтому по центру не выравниваются.

ul.linklist li {
float: center;
position: relative;
}

Float — это выравнивание по стороне! Значения center у него нет, только left или right.

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

Все правильно — убрали выравнивание и обтекание, меню перестало корректно работать.

Повторюсь еще раз: по центру его выровнять нельзя. Даже если Вы поставите меню в доп. блок и выровняете кнопки по левому краю доп.блока, то сам блок отцентрировать не сможете — потребуется фиксированная ширина, а ее у блока не будет из-за разного кол-ва кнопок до и после авторизации.

Dana Domirani пишет:сам блок отцентрировать не сможете — потребуется фиксированная ширина, а ее у блока не будет из-за разного кол-ва кнопок до и после авторизации.

в этом моменте я успел убедится, пока положение панели подгонял примерно под все 4 кнопки..

а насчет лефт и райт.. к сожалению только сейчас узнал.. простите

и наверное я еще что-то пропустил... потому что решено не могу поставить..(нет кнопки ред. в первом сообщении)

пока тема не закрыта..

Есть у меня несколько сторонних вопросов относительно функционала и т.п..

Если мои вопросы вписываются в данную тему...

(постараюсь свои вопросы выложить как можно скорее.. 1-2 часа..)

Уважаемая Dana Domirani

вот всего два вопроса.. помогите получить на них ответы...



Что-бы выровнять положение выдвижной панели относительно 4-х кнопок навигации, мне пришлось изменить ширину "выдвигающегося участка", что-бы при наведении на каждую из 4-х кнопок, можно было дотянуться мышкой до панели..

Подскажите, пожалуйста:
1. в коде выдвижной панели - какие пункты отвечают за ширину панели. т.е. (мне пришлось все коды, все строчки перебирать и изменять их значения наугад, потом обновлять страницу и смотреть что изменилось.. так и не понял все моменты.. не все что менял - изменялось..)
положение текста.. где-то что-то вбил, текст сдвинулся вправо, но и ширина панели каким-то образом увеличилась... а может и нет.. Нужно описание по настройкам этих пунктов...

2. Самое нерадостное.. При попытке скрыть(замаскировать) какую-то кнопку.. Кнопка исчезает.. а след остается... строчки, которые разграничивают кнопки остаются видимыми....

И всё-бы ничего!!! но вдруг у меня мистическим образом исчезла кнопка Календарь. Которую я конечно скрыл... но она торчала раньше на виду в виде полосок ограждения...

а сейчас, я решил заменить кнопку Форум - кнопкой - Главная..
скрыть кнопку форум, обычными способами.. мне не удалось.. если скрываю форум, форум остается, а Главная скрывается..

Пришлось изменить ссылку - / - для форума. после этого он стал невидим.. НО след его виден!! Черточка справа после последней видимой кнопки справа...


т.е. календарь сейчас находится в левой части списка кнопок панели навигации , а форум, в самой крайней в правой части списка.. Только вот, Календарь никак не виден, а Форум почему-то - как-бы не полностью скрыт..

в общем, это выглядит вот так..


стрелочкой показана скрытая кнопка Форум..
И еще, там-же на рисуне если левее посмотреть.. самая лева кнопка - Главная.. Так вот, левее ее есть кнопка Календарь.. Но она не видна!!!) а вот, скрытая кнопка Форум видна своей пограничностью... почему...

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