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

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


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

Мы в социальных сетях



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

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


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

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

Помошь с кодом

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

Решено Помошь с кодом

Сообщение автор rezo3add в Чт 18 Июл - 18:13

Добрый день, занимаюсь сеййчас интересным проэктом, Вобщем вот мой тестовик http://gamesportal.forum2x2.ru/

Как вы видите обычное меню навигации с анимированными кнопками, но вот боковое не получается.

Вот фрагмент над которым я работаю overall_header:
Код:
<div class="for">
                                        <a href="/forum"><center>Форум</center></a>                                  
                                         </div>
                                      <div class="por">
                                     <a href="/portal"><center>Главаня</center></a>
                                      </div>
                                      <div class="You">
                                        <a href="http://gamesportal.forum2x2.ru/f12-forum"><center>You Tube</center></a>
                                           </div>
                                        
    </table>
<div id="blok_menu">
    <table id="menu" cellspacing="0" cellpadding="0" border="0" align="right">
                  <tr>
                      <td align="right"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                  </tr>
                </table>
                          </div>
Вот CSS  к нему:
Код:
.for{
border: 1px solid white;
 position: absolute;
width: 100px;
   height: 30px;
   background: #474954 url(http://i70.servimg.com/u/f70/17/37/83/89/snap0010.jpg) repeat;
  margin-top: -35px;
  margin-right: 0;
  text-decoration: none !important;
font-style: italic;
font-weight: bold;
font-size: 13px;
   font-family:Georgia;


}

.por{

  border: 1px solid white;
 position: absolute;
 width: 100px;
  height: 30px;
   background: #474954 url(http://i70.servimg.com/u/f70/17/37/83/89/snap0010.jpg) repeat;
   margin-top: -8px;
  margin-right: 0;
   text-decoration: none !important;
font-style: italic;
font-weight: bold;
font-size: 13px;
  font-family:Georgia;
 

}


.You{
  border: 1px solid white;
 position: absolute;
 width: 100px;
  height: 30px;
   background: #474954 url(http://i70.servimg.com/u/f70/17/37/83/89/snap0010.jpg) repeat;
   margin-top: -66px;
  margin-right: 0;
  text-decoration:  center ;
font-style: italic;
font-weight: bold;
font-size: 13px;
   font-family:Georgia;
}

.mainmenu {
display:inline-block;
height:37px;
overflow:hidden;
vertical-align: top;
/* для корректного отображения в старых браузерах */
display:-moz-inline-stack;
zoom:1;
*display:inline;
_overflow:hidden;
}
a.mainmenu img {
margin-top:-37px;
}
a.mainmenu img:hover{
margin-top: 0px;
}

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


Последний раз редактировалось: rezo3add (Пт 19 Июл - 10:30), всего редактировалось 1 раз(а)

rezo3add
 
 

Сообщения : 179
Карма : 1 предупреждение
Благодарности : 8
Регистрация : 2012-06-14

http://dmc-pw.forum2x2.ru/

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

Решено Re: Помошь с кодом

Сообщение автор Dana Domirani в Чт 18 Июл - 18:42

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

- в обычном состоянии видна только верхняя (или только нижняя) часть кнопки. При наведении курсора вступают в силу настройки СSS, которые смещают фон вверх (или вниз) на высоту, равную высоте кнопки (30px) — и происходит смена изображения!


А теперь посмотрите на фон своих кнопок:

Что в нем не соответствует вышеописанной схеме?


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


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


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



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

Пол : Женщина
Сообщения : 21916
Возраст : 31
Место обитания : СПб
Карма : Без предупреждений
Благодарности : 8765
Регистрация : 2008-04-18

http://poltergeist-legacy.com/

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

Решено Re: Помошь с кодом

Сообщение автор rezo3add в Пт 19 Июл - 10:30

solved 
13 

rezo3add
 
 

Сообщения : 179
Карма : 1 предупреждение
Благодарности : 8
Регистрация : 2012-06-14

http://dmc-pw.forum2x2.ru/

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

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


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