Оформления меню навигации главных кнопок форума

Поделиться21Сб, 13 Ноя 2010 15:33:36

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

Хром Скрин*
Ие скрин*

Поделиться22Сб, 13 Ноя 2010 15:50:08

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

Deff написал(а):

1. Если продолжать отладку - нужна ваша помощь.. т. е мну может добавить код отладки и нужны скриншоты из все используемых вариантов браузеров с версией и желательно указать версию операционки

Не реально, так как мы же не будем подстраиваться под систему каждого юзера. (у меня "зверь" стоит XP)

В остальном спасибо Deff за внимание к моему вопросу, останусь при своем скрипте, хотя и муторно это так как при загрузке форума с начало вижу ссылки а потом картинки, скорость инета отличная, что видят другие остается только догадываться

[взломанный сайт]

0

Поделиться23Сб, 13 Ноя 2010 15:50:59

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Invisible Man написал(а):

останусь при своем скрипте

Оставьте лучше ЯваСкрипт действительно и не мучайтесь.

0

Поделиться24Сб, 13 Ноя 2010 15:59:22

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11882
Последний визит:
Вчера 20:39:23

Invisible Man написал(а):

Не реально, так как мы же не будем подстраиваться под систему каждого юзера. (у меня "зверь" стоит XP)

Хм, мну жа предложил второй вариант..без тестов Просто нужны обе картинки по 64 пиксела и вся недолга

Вот попробовал реализовать кодом rps без изменения размеров картинки > http://hostjs-mybb2011.narod.ru/Invisible_Man_3.htm

(*Если в каком браузере не высвечиваецо первая иконка на "Главную", проблему можно победить вставкой пустого кода в дополнительный пункт меню, идущий первым элементом в списке, с картинкой прозрачкой

Отпишитесь, если найдете погрешности

Отредактировано Deff (Вс, 14 Ноя 2010 08:49:57)

0

Поделиться25Вс, 14 Ноя 2010 09:57:04

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

Deff
Работает с rps Пт, 12 Ноя 2010 19:09:41

Пример (проверил во всех браузерах Ссылка

Deff написал(а):

(*Если в каком браузере не высвечиваецо первая иконка на "Главную", проблему можно победить вставкой пустого кода в дополнительный пункт меню, идущий первым элементом в списке, с картинкой прозрачкой

Добавил без картинки так 0=<a href='' target=_blank title=''><img src=''></a>

Deff написал(а):

Просто нужны обе картинки по 64 пиксела и вся недолга

Зачем так? :dontknow:

0

Поделиться26Вс, 14 Ноя 2010 11:14:27

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11882
Последний визит:
Вчера 20:39:23

Invisible Man написал(а):

Работает

ну тады слегка измененный вариант rps

Код:

       /* Свои иконки в навигации сss(ом) */
/* ============================================== */
 #pun-navlinks .container{
 vertical-align:center!important;
 align:center!important;
 height:35px!important;
 padding:45px 0 6px 0!important;
}

#pun-navlinks li a span {
font-size:0px!important;
visibility:hidden!important;
}
#pun-navlinks li a {
border-style: none !important;
padding: 32px !important;
margin: 0  -10px!important;
text-decoration: none;
}
#navindex a {
	background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4322-1.png) no-repeat  center center !important;
}
#navindex a:hover {
	background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4322-3.png) no-repeat  center center !important;
}
#navuserlist a {
	background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4330-1.png) no-repeat  center center !important;
}
#navuserlist a:hover {
	background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4330-3.png) no-repeat  center center !important;
}
#navrules a {
	background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4327-1.png) no-repeat  center center !important;
}
#navrules a:hover {
	background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4327-3.png) no-repeat  center center !important;
}
#navsearch a {
	background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4326-1.png) no-repeat  center center !important;
}
#navsearch a:hover {
	background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4326-4.png) no-repeat  center center !important;
}
#navprofile a{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4323-1.png) no-repeat  center center !important;
}
 #navprofile a:hover{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4323-3.png) no-repeat  center center !important;
}
#navpm a{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4328-1.png) no-repeat  center center !important;
}
#navpm a:hover{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4328-3.png) no-repeat  center center !important;
}
#navadmin a{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4325-1.png) no-repeat  center center !important;
}
 #navadmin a:hover{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4325-3.png) no-repeat  center center !important;
}
#navregister a{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4332-1.png) no-repeat  center center !important;
}
 #navregister a:hover{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4332-3.png) no-repeat  center center !important;
}
 #navlogin a{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4329-1.png) no-repeat  center center !important;
}
 #navlogin a:hover{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4366-1.png) no-repeat  center center !important;
}
 #navlogout a{

    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4329-3.png) no-repeat  center center !important;
}
 #navlogout a:hover{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4366-2.png) no-repeat  center center !important;
}

И добавьте теги span в новыx пунктах Доп меню
Пример

1=<a href="Ссылка 1">Пункт 1</a>
2=<a href="Ссылка 2">Пункт 2</a>
3=<a href="Ссылка 3">Пункт 3</a>

Отредактировано Deff (Вс, 14 Ноя 2010 11:38:26)

0

Поделиться27Вс, 14 Ноя 2010 11:54:24

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

Deff написал(а):

ну тады слегка измененный вариант rps

Скрин*

Deff написал(а):

И добавьте теги span в новыx пунктах Доп меню

С этим не понял но добавил 1 пункт такого вида (0=<a href="Ссылка 1">Пункт 1</a>)

Добавлено:

Deff написал(а):

6=<a href="http://onserial.mybb.ru/viewforum.php?id=91"><img src="http://onserial-letay-16.ru/uploads/000d/05/e5/4361-1.png" onmouseover="this.src='http://onserial-letay-16.ru/uploads/000d/05/e5/4361-2.png'" onmouseout="this.src='http://onserial-letay-16.ru/uploads/000d/05/e5/4361-1.png'"/></a>

А что так уже не возможно что ли будет добавить доп поля?

Отредактировано Invisible Man (Вс, 14 Ноя 2010 12:01:42)

0

Поделиться28Вс, 14 Ноя 2010 12:17:26

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11882
Последний визит:
Вчера 20:39:23

Invisible Man В доп поля просто прописываете словом( окруженным тегом span), без картинок - а в код добавляете два пункта с наведением и без -
По типу

#navextra1 a{
background: url(Картинка без наведения) no-repeat center center !important;
}
#navextra1 a:hover{
background: url(Картинка при наведения) no-repeat center center !important;
}

Где цифра - номер пункта в меню ну и картинка под неё

0

Поделиться29Вс, 14 Ноя 2010 12:26:54

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

Deff
Не работает
В доп меню

3=<a href="http://onserial-letay-16.ru/viewforum.php?id=20">Важные разделы</a>

В окошка стиля

#navextra3 a{
background: url(http://onserial-letay-16.ru/uploads/000 … 4359-1.png) no-repeat center center !important;
}
#navextra3 a:hover{
background: url(http://onserial-letay-16.ru/uploads/000 … 4359-2.png) no-repeat center center !important;
}

0

Поделиться30Вс, 14 Ноя 2010 12:30:55

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11882
Последний визит:
Вчера 20:39:23

Invisible Man написал(а):

ну тады слегка измененный вариант rpsСкрин*

Тут где то у Вас нужно менять в Первом окне стиля - изменились размеры (вчера - я же копировал полностью ваш код на народ - было не так

----------------------------------------

мну лень изучать - предлагаю просто в текущем коде подрегулировать оцтуп

#pun-navlinks li a {
border-style: none !important;
padding: 32px !important;
margin: 0 -10px!important;
text-decoration: none;
}

-10 заменить на -30

Отредактировано Deff (Вс, 14 Ноя 2010 12:32:29)

0

Поделиться31Вс, 14 Ноя 2010 12:36:44

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

Deff написал(а):

ну лень изучать - предлагаю просто в текущем коде подрегулировать оцтуп

Сделал, в админке все слипается на главной нормально. А где регулировать отступ (TOP) от верха? скрин*

0

Поделиться32Вс, 14 Ноя 2010 12:37:18

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11882
Последний визит:
Вчера 20:39:23

3=<a href="http://onserial-letay-16.ru/viewforum.php?id=20">Важные разделы</a>

~~не вижу этого пункта меню у Вас - может не сохранили в настройках~~

увидел

Теперь не вижу добавки во втором окне стиля

#navextra3 a{
background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4359-1.png) no-repeat center center !important;
}
#navextra3 a:hover{
background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4359-2.png) no-repeat center center !important;
}

Отредактировано Deff (Вс, 14 Ноя 2010 12:44:26)

0

Поделиться33Вс, 14 Ноя 2010 12:41:59

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11882
Последний визит:
Вчера 20:39:23

Invisible Man написал(а):

Сделал, в админке все слипается на главной нормально. А где регулировать отступ (TOP) от верха? скрин*

#pun-navlinks .container{
vertical-align:center!important;
align:center!important;
height:35px!important;
padding:45px 0 6px 0!important;
}

пробуйте вот эти цифры крутить

0

Поделиться34Вс, 14 Ноя 2010 12:45:46

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

Deff написал(а):

Теперь не вижу добавки во втором окне стиля

0

Поделиться35Вс, 14 Ноя 2010 12:49:43

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

Deff написал(а):

пробуйте вот эти цифры крутить

Настроил нормуль...

0

Поделиться36Вс, 14 Ноя 2010 12:51:15

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11882
Последний визит:
Вчера 20:39:23

Invisible Man у Вас в Настройках важные разделы - стоят пунктом 1

а в стиле 3

Поменяйте цифру - либо там - либо там - должны быть одинаковые

Отредактировано Deff (Вс, 14 Ноя 2010 12:57:55)

0

Поделиться37Вс, 14 Ноя 2010 12:53:10

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

Deff написал(а):

у Вас в Настройках важные разделы - стоят пунктом 1

Да вы что?! не в коем случае

0

Поделиться38Вс, 14 Ноя 2010 12:58:40

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11882
Последний визит:
Вчера 20:39:23

Invisible Man В коде страницы - в помощи сss -идут цифрой 1

поменяйте на 1 в Стиле (*Думаю что номер пункта это чисто указание для сервиса -в каком порядке её устанавливать - но цифру идентификатору он даёт чисто по порядку вставки

Кстати вы вчера - ширину форума не меняли - просто мну жа прописывал первоначальные сдвиги с Вашего форума

Возможно подкорректировать индивидуально раздвижки для пунктов меню - новведенные почему то чуть уже
В самый конец второго Окна (после установки картинок под новые пункты

#navextra1 a {
margin: 0 -20px 0 -10px!important;
}
#navextra2 a {
margin: 0 -10px 0 -15px!important;
}

-20 - регулируем (cделал раздельную по право и лево (левая регулировка -правее

Похоже придецо по каждому новведенному свои Оцтупы выставлять ( у них от старых иконок - одни оцтупы - а между собой - другие

Отредактировано Deff (Вс, 14 Ноя 2010 13:21:57)

0

Поделиться39Вс, 14 Ноя 2010 13:16:01

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

Deff
Как добавить вроде разобрались, но вот к примеру добавил 3 доп меню, смотрите что получилось ссыль они слиплись

Добавлено: сделал так

#navextra3 a, #navextra2 a, #navextra1 a {
margin: 0 -30px 0 -150px!important;
}

вообше стоит на месте

Отредактировано Invisible Man (Вс, 14 Ноя 2010 13:21:21)

0

Поделиться40Вс, 14 Ноя 2010 13:19:56

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11882
Последний визит:
Вчера 20:39:23

Invisible Man написал(а):

DeffКак добавить вроде разобрались, но вот к примеру добавил 3 доп меню, смотрите что получилось ссыль они слиплись

См выше

Делайте раздельно для каждой - не мелочитесь и в самый низ окна

потом увеличение -20 это слипание нужно уменьшать цифры до нуля (или переходить в положительные значения оцтупа) они наползают друг на друга на 20 пиксел

Код:

 /* Свои иконки в навигации сss(ом) */
/* ============================================== */
#pun-navlinks .container{
 vertical-align:center!important;
 align:center!important;
 height:65px!important;
 padding:10px 0 6px 0!important;
}

#pun-navlinks li a span {
font-size:0px!important;
visibility:hidden!important;
}
#pun-navlinks li a {
border-style: none !important;
padding: 32px !important;
margin: 0  -25px!important;
text-decoration: none;
}
#navindex a {
	background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4322-1.png) no-repeat  center center !important;
#navindex a {
	background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4322-1.png) no-repeat  center center !important;
}
#navindex a:hover {
	background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4322-3.png) no-repeat  center center !important;
}
#navuserlist a {
	background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4330-1.png) no-repeat  center center !important;
}
#navuserlist a:hover {
	background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4330-3.png) no-repeat  center center !important;
}
#navrules a {
	background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4327-1.png) no-repeat  center center !important;
}
#navrules a:hover {
	background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4327-3.png) no-repeat  center center !important;
}
#navsearch a {
	background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4326-1.png) no-repeat  center center !important;
}
#navsearch a:hover {
	background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4326-4.png) no-repeat  center center !important;
}
#navprofile a{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4323-1.png) no-repeat  center center !important;
}
 #navprofile a:hover{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4323-3.png) no-repeat  center center !important;
}
#navpm a{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4328-1.png) no-repeat  center center !important;
}
#navpm a:hover{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4328-3.png) no-repeat  center center !important;
}
#navadmin a{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4325-1.png) no-repeat  center center !important;
}
 #navadmin a:hover{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4325-3.png) no-repeat  center center !important;
}
#navregister a{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4332-1.png) no-repeat  center center !important;
}
 #navregister a:hover{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4332-3.png) no-repeat  center center !important;
}
 #navlogin a{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4329-1.png) no-repeat  center center !important;
}
 #navlogin a:hover{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4366-1.png) no-repeat  center center !important;
}
 #navlogout a{

    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4329-3.png) no-repeat  center center !important;
}
 #navlogout a:hover{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4366-2.png) no-repeat  center center !important;
}

#navextra3  a{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4359-1.png) no-repeat  center center !important;
}
#navextra3 a:hover{
    background: url(http://onserial-letay-16.ru/uploads/000d/05/e5/4359-2.png) no-repeat  center center !important;
}

#navextra1 a span{
margin-left: 10px!important;
margin-right: 10px!important;
}
#navextra2 a span{
margin-left: 10px!important;
margin-right: 10px!important;
}
#navextra3 a span{
margin-left: 10px!important;
margin-right: 10px!important;
}

Отредактировано Deff (Вс, 14 Ноя 2010 14:00:09)

+1

Единый форум поддержки

Меню навигации

Пользовательские ссылки

Информация о пользователе

Оформления меню навигации главных кнопок форума

Сообщений 21 страница 40 из 121

Поделиться21Сб, 13 Ноя 2010 15:33:36

Поделиться22Сб, 13 Ноя 2010 15:50:08

Поделиться23Сб, 13 Ноя 2010 15:50:59

Поделиться24Сб, 13 Ноя 2010 15:59:22

Поделиться25Вс, 14 Ноя 2010 09:57:04

Поделиться26Вс, 14 Ноя 2010 11:14:27

Поделиться27Вс, 14 Ноя 2010 11:54:24

Поделиться28Вс, 14 Ноя 2010 12:17:26

Поделиться29Вс, 14 Ноя 2010 12:26:54

Поделиться30Вс, 14 Ноя 2010 12:30:55

Поделиться31Вс, 14 Ноя 2010 12:36:44

Поделиться32Вс, 14 Ноя 2010 12:37:18

Поделиться33Вс, 14 Ноя 2010 12:41:59

Поделиться34Вс, 14 Ноя 2010 12:45:46

Поделиться35Вс, 14 Ноя 2010 12:49:43

Поделиться36Вс, 14 Ноя 2010 12:51:15

Поделиться37Вс, 14 Ноя 2010 12:53:10

Поделиться38Вс, 14 Ноя 2010 12:58:40

Поделиться39Вс, 14 Ноя 2010 13:16:01

Поделиться40Вс, 14 Ноя 2010 13:19:56