Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: Savepic Видео фоторедактор Транслит

Разворачивающееся меню

Предыдущая тема Следующая тема Перейти вниз

Разворачивающееся меню

Сообщение автор ShMaster в Сб 18 Май - 21:42

Добрый вечер, буду благодарен всем кто сможет помочь.
Проблема такова - при наведении курсора на пункт меню оно разворачивается, а несколько нижних пунктов "съедаются" форумом расположенным ниже. С этим можно что-то сделать ???
Скрин:


Код ХТМЛ:
Код:
<ul class="menu_p">
  <li>
      <p>Заголовок меню</p>
      <ul>
        <li><a href="#">Пункт первый </a></li>
        <li><a href="#">Пункт два</a></li>
        <li><a href="#">Пункт идущий третьим</a></li>
        <li><a href="#">Пункт четвертый и последний</a></li>
      </ul>
  </li>
  <li>
      <p>Заголовок меню 2</p>
      <ul>
        <li><a href="#">2 Пункт первый </a></li>
        <li><a href="#">2 Пункт два</a></li>
        <li><a href="#">2 Пункт идущий третьим</a></li>
        <li><a href="#">2 Пункт четвертый и последний</a></li>
      </ul>
  </li>
</ul>

Код ЦСС:
Код:
.menu_p, .menu_p ul {
        margin: 20px 0 0 0;
        padding: 0;
        list-style: none outside none;
        z-index: 999 !important;
}
.menu_p {
        width: auto;
        margin: 2px;
}
.menu_p:before, .menu_p:after {
        content: "";
        display: table;
}
.menu_p:after {
        clear: both;
}
.menu_p {
        zoom:1;
}
.menu_p li {
        float: left;
        position: relative;
        margin-right: 10px;

}
.menu_p p {
        width: auto;
        height: auto;
        float: left;
        padding: 5px;  /*отступ для текста внутри заголовка обеих менюшек*/
        outline: none;
        border: 1px solid #273430;
        border-radius: 8px;
        -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;
        margin-top: 5px; /*отступ от верхнего края названия форума для заголовков обеих менюшек*/
        color: #e5f2d1 !important; /*цвет заголовков*/
        background: url('http://igriprestolov.rolka.su/files/0010/c5/8f/70917.png'); /*фон под заголовками*/
        text-align: center;
        z-index: 999 !important;
}
.menu_p ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 30px;  /*отступ всплывающих контейнеров*/
        left: 0;
        z-index: 999 !important;
        background: url('http://igriprestolov.rolka.su/files/0010/c5/8f/70917.png'); /*полупрозрачный фон под обе менюшки*/
        border: 1px solid #273430; /*границы для менюшек*/
        padding: 5px;  /*отступ для текста внутри обеих менюшек*/
        border-radius: 8px;
        -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;
}
.menu_p li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
        z-index: 999 !important;
       
}
.menu_p ul ul {
        top: 0;
        left: 150px;
        margin: 0 0 0 20px;
        _margin: 0; /*IE6 only*/
        z-index: 999 !important;
       
}
.menu_p ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*IE6 only*/
        z-index: 999 !important;
}
.menu_p ul a {
        padding: 3px;
        margin: 5px;
        _height: 10px; /*IE6 only*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
        outline: none;
        color: #e5f2d1 !important; /*цвет ссылок в менюшках*/
        z-index: 999 !important;
}
.menu_p ul a:hover {
        background: url('http://igriprestolov.rolka.su/files/0010/c5/8f/67479.png');  /*цвет подсветки ссылок*/
        margin: 5px;
        border-radius: 5px;
        z-index: 999 !important;
}

.menu_p::before, .menu_p::after {
content: "";
display: table;
}

li {
display: list-item;
 }

Адрес форума - http://igriprestolov.gip-gip.ru


Последний раз редактировалось: ShMaster (Вс 19 Май - 15:10), всего редактировалось 1 раз(а)

ShMaster
 

Мужчина

Сообщения : 74
Возраст : 27
Регистрация : 2010-11-13
Благодарности : 8

Без предупреждений

http://naruto-baseur-rpg.forum2x2.ru/

Вернуться к началу Перейти вниз

Re: Разворачивающееся меню

Сообщение автор Dana Domirani в Сб 18 Май - 21:45

Вы делали по этой теме? http://help.forum2x2.ru/t22672-topic#172190



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22102
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 8886

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Re: Разворачивающееся меню

Сообщение автор ShMaster в Сб 18 Май - 21:52

Будем считать, что да ) Так это лечится ?)

ShMaster
 

Мужчина

Сообщения : 74
Возраст : 27
Регистрация : 2010-11-13
Благодарности : 8

Без предупреждений

http://naruto-baseur-rpg.forum2x2.ru/

Вернуться к началу Перейти вниз

Re: Разворачивающееся меню

Сообщение автор Dana Domirani в Вс 19 Май - 0:16

По-умолчанию этой проблемы нет, можно проверить на тестовике

Сейчас посмотрю, почему у Вас меню не хочет выходить за пределы ячейки...
P.s. нет, и на втором тестовике этот код не сбоит (пруфлинк)

Можно ссылку на Ваш форум? Надо смотреть вживую.



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22102
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 8886

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Re: Разворачивающееся меню

Сообщение автор ShMaster в Вс 19 Май - 0:45

@ShMaster пишет:Адрес форума - http://igriprestolov.gip-gip.ru

Кстати, у меня этот форум на движке PunBB.
Вот, может быть какой-то из скриптов или что-то в ЦСС ?

ShMaster
 

Мужчина

Сообщения : 74
Возраст : 27
Регистрация : 2010-11-13
Благодарности : 8

Без предупреждений

http://naruto-baseur-rpg.forum2x2.ru/

Вернуться к началу Перейти вниз

Re: Разворачивающееся меню

Сообщение автор Dana Domirani в Вс 19 Май - 0:56

Извиняйте, не вижу Тайной комнаты pardon Вклейте, пожалуйста, меню еще в какой-нибудь подфорум.



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22102
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 8886

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Re: Разворачивающееся меню

Сообщение автор ShMaster в Вс 19 Май - 8:16

Вот незадача, извиняюсь. Поставил в гостевую )

ShMaster
 

Мужчина

Сообщения : 74
Возраст : 27
Регистрация : 2010-11-13
Благодарности : 8

Без предупреждений

http://naruto-baseur-rpg.forum2x2.ru/

Вернуться к началу Перейти вниз

Re: Разворачивающееся меню

Сообщение автор Домовой в Вс 19 Май - 11:25

У вас фон всплывающего окна сделан полупрозрачной картинкой
.menu_p ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 30px; /*отступ всплывающих контейнеров*/
left: 0;
z-index: 999 !important;
background: url('http://igriprestolov.rolka.su/files/0010/c5/8f/70917.png'); /*полупрозрачный фон под обе менюшки*/
border: 1px solid #273430; /*границы для менюшек*/
padding: 5px; /*отступ для текста внутри обеих менюшек*/
border-radius: 8px;
-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;
}
Замените выделенную строчку на обычный цвет.
К примеру
Код:
background-color:#050A0C;

Домовой
 

Мужчина

Сообщения : 6805
Возраст : 93
Регистрация : 2010-01-30
Благодарности : 3216

Без предупреждений

http://udomovogo.rusff.ru

Вернуться к началу Перейти вниз

Re: Разворачивающееся меню

Сообщение автор ShMaster в Вс 19 Май - 13:01

Никакой разницы нет, увы. Проблема не решена.
Дело совсем не в полупрозрачных фонах, а где-то в структуре "див", в приоритетах отображения, но я сам найти не смог ошибку (

ShMaster
 

Мужчина

Сообщения : 74
Возраст : 27
Регистрация : 2010-11-13
Благодарности : 8

Без предупреждений

http://naruto-baseur-rpg.forum2x2.ru/

Вернуться к началу Перейти вниз

Re: Разворачивающееся меню

Сообщение автор Домовой в Вс 19 Май - 13:17


Домовой
 

Мужчина

Сообщения : 6805
Возраст : 93
Регистрация : 2010-01-30
Благодарности : 3216

Без предупреждений

http://udomovogo.rusff.ru

Вернуться к началу Перейти вниз

Re: Разворачивающееся меню

Сообщение автор ShMaster в Вс 19 Май - 13:40

Там 4 пункта должно быть, и края скругленные везде )
Через мазилу видно три пункта, сжирается только четвертый, но меня как-то это не особо обнадёживает )

ShMaster
 

Мужчина

Сообщения : 74
Возраст : 27
Регистрация : 2010-11-13
Благодарности : 8

Без предупреждений

http://naruto-baseur-rpg.forum2x2.ru/

Вернуться к началу Перейти вниз

Re: Разворачивающееся меню

Сообщение автор Dana Domirani в Вс 19 Май - 14:19

Дело в свойстве overflow (отображение содержания за пределами контейнера) у ячейки, в которой располагается описание подфорума:
Код:
.pun table .tcl {
overflow: hidden;
text-align: left;
width: 50%;
}
Попробуйте заменить overflow: hidden; на overflow: visible;



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22102
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 8886

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Re: Разворачивающееся меню

Сообщение автор ShMaster в Вс 19 Май - 15:10

Спасибо огромное !!!
Я долго с этим мучался сам Х_х Наконец-то разрешилось )))

ShMaster
 

Мужчина

Сообщения : 74
Возраст : 27
Регистрация : 2010-11-13
Благодарности : 8

Без предупреждений

http://naruto-baseur-rpg.forum2x2.ru/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения