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

Поделиться1Пт, 12 Ноя 2010 15:21:32

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

Deff Сделайте пожалуйста, выкладываю все что просили.

М - Обычное состояние
Б - При наведении

На главную

#navindex span{
visibility:hidden;

}
#navindex a{
padding: 32px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4322-1.png);
background-repeat:no-repeat;
background-position:top-center;
}
#navindex a:hover{
border:0 none #fff;
padding: 64px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4322-3.png);
background-repeat:no-repeat;
background-position:top-center;
}

Пользователи

#navindex span{
visibility:hidden;

}
#navuserlist a{
padding: 32px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4330-1.png);
background-repeat:no-repeat;
background-position:top-center;
}
#navuserlist a:hover{
border:0 none #fff;
padding: 64px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4330-3.png);
background-repeat:no-repeat;
background-position:top-center;
}

Правило

#navindex span{
visibility:hidden;

}
#navrules a{
padding: 32px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4327-1.png);
background-repeat:no-repeat;
background-position:top-center;
}
#navrules a:hover{
border:0 none #fff;
padding: 64px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4327-3.png);
background-repeat:no-repeat;
background-position:top-center;
}

Поиск

#navindex span{
visibility:hidden;

}
#navsearch a{
padding: 32px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4326-1.png);
background-repeat:no-repeat;
background-position:top-center;
}
#navsearch a:hover{
border:0 none #fff;
padding: 64px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4326-4.png);
background-repeat:no-repeat;
background-position:top-center;
}

Профиль

#navindex span{
visibility:hidden;

}
#navprofile a{
padding: 32px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4323-1.png);
background-repeat:no-repeat;
background-position:top-center;
}
#navprofile a:hover{
border:0 none #fff;
padding: 64px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4323-3.png);
background-repeat:no-repeat;
background-position:top-center;
}

Сообщение

#navindex span{
visibility:hidden;

}
#navpm a{
padding: 32px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4328-1.png);
background-repeat:no-repeat;
background-position:top-center;
}
#navpm a:hover{
border:0 none #fff;
padding: 64px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4328-3.png);
background-repeat:no-repeat;
background-position:top-center;
}

Админка

#navindex span{
visibility:hidden;

}
#navadmin a{
padding: 32px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4325-1.png);
background-repeat:no-repeat;
background-position:top-center;
}
#navadmin a:hover{
border:0 none #fff;
padding: 64px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4325-3.png);
background-repeat:no-repeat;
background-position:top-center;
}

Регистрация

#navindex span{
visibility:hidden;

}
#navregister a{
padding: 32px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4332-1.png);
background-repeat:no-repeat;
background-position:top-center;
}
#navregister a:hover{
border:0 none #fff;
padding: 64px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4332-3.png);
background-repeat:no-repeat;
background-position:top-center;
}

Вход

#navindex span{
visibility:hidden;

}
#navlogin a{
padding: 32px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4329-1.png);
background-repeat:no-repeat;
background-position:top-center;
}
#navlogin a:hover{
border:0 none #fff;
padding: 64px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4366-1.png);
background-repeat:no-repeat;
background-position:top-center;
}

Выход

#navindex span{
visibility:hidden;

}
#navlogout a{
padding: 32px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4329-3.png);
background-repeat:no-repeat;
background-position:top-center;
}
#navlogout a:hover{
border:0 none #fff;
padding: 64px!important;font-size:0px!important;
background-image: url(http://onserial-letay-16.ru/uploads/000 … 4366-2.png);
background-repeat:no-repeat;
background-position:top-center;
}

0

Поделиться2Пт, 12 Ноя 2010 15:48:36

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

Deff И маленькая заметка (протестил код выше) и получилось.

Вид Хром - Сафари

Вид ИЕ и Мозила Нормально

Опера при наведении на панель навигации, выкидывает в самый низ страницы.

0

Поделиться3Пт, 12 Ноя 2010 17:38:47

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11572
Последний визит:
Сегодня 00:00:20

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

Deff И маленькая заметка (протестил код выше) и получилось.

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

И ваще , просил Исходники(те шо были изначально) без надписей.. а эт уже не исходники

Отредактировано Deff (Пт, 12 Ноя 2010 17:41:08)

0

Поделиться4Пт, 12 Ноя 2010 19:09:41

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

Invisible Man
Может так подойдёт? http://partner.mybb.ru/

Код:

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

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

0

Поделиться5Пт, 12 Ноя 2010 19:29:43

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

Deff
Отправил в личку.

rps
Вот что получилось скрин* в 2

0

Поделиться6Пт, 12 Ноя 2010 20:17:48

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

Invisible Man
А адрес форума можно увидеть, откуда скриншот снят?

0

Поделиться7Пт, 12 Ноя 2010 20:21:31

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

rps
http://serialtop.topbb.ru/

0

Поделиться8Пт, 12 Ноя 2010 21:40:27

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

Invisible Man
Ну а сейчас посмотрите: http://partner.mybb.ru/.

0

Поделиться9Пт, 12 Ноя 2010 21:57:48

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

rps
В хроме не вижу кнопку (на главную)
В опере и мозиле нормально
В ИЕ скрин*

0

Поделиться10Сб, 13 Ноя 2010 03:39:08

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

Invisible Man
Я пока не знаю, почему в Google Chrome не работает первый пункт меню, а вот насчёт Internet Explorer хотелось бы уточнить версию, которую Вы используете. Ибо я же писал код именно под Internet Explorer, и у меня всё работает как положено.

0

Поделиться11Сб, 13 Ноя 2010 04:17:27

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11572
Последний визит:
Сегодня 00:00:20

:flirt: Ну типо так:

http://hostjs-mybb2011.narod.ru/Invisible_Man.htm

Код:

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

#navindex a {
	background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4322-1.png) !important;
}
#navindex a span:hover {
	background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4322-3.png) !important;
}
#navuserlist a {
	background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4330-1.png) !important;
}
#navuserlist a span:hover {
	background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4330-3.png) !important;
}
#navrules a {
	background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4327-1.png) !important;
}
#navrules a span:hover {
	background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4327-3.png) !important;
}
#navsearch a {
	background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4326-1.png) !important;
}
#navsearch a span:hover {
	background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4326-4.png) !important;
}
#navprofile a{
    background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4323-1.png) !important;
}
 #navprofile a span:hover {
    background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4323-3.png) !important;
}
#navpm a{
    background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4328-1.png) !important;
}
#navpm a span:hover {
    background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4328-3.png) !important;
}
#navadmin a{
    background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4325-1.png) !important;
}
 #navadmin a span:hover {
    background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4325-3.png) !important;
}
#navregister a{
    background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4332-1.png) !important;
}
 #navregister a span:hover {
    background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4332-3.png) !important;
}
 #navlogin a{
    background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4329-1.png) !important;
}
 #navlogin a span:hover {
    background-image:  url(http://onserial-letay-16.ru/uploads/000d/05/e5/4366-1.png) !important;
}
 #navlogout a{

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

#pun-navlinks li a span {
font-size:0px!important;
color:transparent!important;
padding: 30px  24px  28px 26px!important;
position:absolute!important;
margin:-27px 25px 27px -25px
}

#pun-navlinks li a{
background-position:top center !important;
background-repeat:no-repeat !important;
border-style: none !important;
padding: 15px 25px !important;
text-decoration: none;
}
#pun-navlinks li a:hover {
background-image:none!important
}
#pun-navlinks li a span:hover {
background-position:top center !important;
background-repeat:no-repeat !important;
font-size:0px!important;
color:transparent!important;
position:absolute!important;
padding: 30px 30px 45px!important;
margin-top:-40px!important;
text-decoration: none!important;
}

Отредактировано Deff (Сб, 13 Ноя 2010 11:00:42)

+1

Поделиться12Сб, 13 Ноя 2010 14:06:13

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

Deff
Ставлю + за ваши труды. Но все же:
Мозила и опера - Нормально
Хром и сафори - Не видит кнопок совсем
Ие - При наведение картинка просто исчезает.

0

Поделиться13Сб, 13 Ноя 2010 14:07:50

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11572
Последний визит:
Сегодня 00:00:20

Invisible Man Проверял у ся в Хроме и Ие 8 - нормально - ИЕ -какой ? - с Хромом у Вас чот не то - у трёх пользователей перепроверялсо

И Админка была обманной - т.е вроде Админ - но без доступа и Иконка администрирования соотвецтвенно не отображаецо

(*Потом вобщем-то не за плюсики, проблема интересная

Отредактировано Deff (Сб, 13 Ноя 2010 14:17:45)

0

Поделиться14Сб, 13 Ноя 2010 14:32:01

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

Deff
ИЕ
Хром
:dontknow:

0

Поделиться15Сб, 13 Ноя 2010 14:51:32

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11572
Последний визит:
Сегодня 00:00:20

Invisible Man Попробуй код установить на чистом тестовом форуме - можа де останавливаецо из-за конфликта со скриптаме - ксати ти вытаскивал скрипт установки картинок в Навигацию ?

И картинка в ИЕ и Хроме тажа - и по ссылке http://hostjs-mybb2011.narod.ru/Invisible_Man.htm ?

(*я для теста в Хроме эту ссылку юзерам давал

Отредактировано Deff (Сб, 13 Ноя 2010 14:54:55)

0

Поделиться16Сб, 13 Ноя 2010 15:03:11

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

Deff
Да конечно убрал :confused:

Вот на чистом форуме, смотрю через ие http://serialtop.topbb.ru/ тоже самое при наведение исчезают

Добавлено: Да по http://h … le_Man.htm без изменений

Отредактировано Invisible Man (Сб, 13 Ноя 2010 15:04:36)

0

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

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11572
Последний визит:
Сегодня 00:00:20

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

Вот на чистом форуме, смотрю через ие http://serialtop.topbb.ru/ тоже самое при наведение исчезают

И опять же - ИЕ -версия какая - смотрицо -Справка - О программе (делал для 8
насчет исчезают - поводите вокруг картинок - если появляюца, то- это возможно браузер смещения вычисляюца по разному - нужно тестить с конкретным браузером

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

Хром и сафори - Не видит кнопок совсем

А вот не видит совсем эт забавно, т. е мой опыт - у троих пользователей - в Хроме идентично Мазилле всё было

Отредактировано Deff (Сб, 13 Ноя 2010 15:12:56)

0

Поделиться18Сб, 13 Ноя 2010 15:19:10

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

Deff
Хром скрин*
Ие действительно если навести чуть ниже картинки то видно, но это как надо прицелиться :rofl:

0

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

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11572
Последний визит:
Сегодня 00:00:20

Invisible Man И всё таке -версия ИЕ ?

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

Хром скрин*

Опять жи мну не тестил То чо у Вас сейчас - нун предложить ту ссыль глянуть

Отредактировано Deff (Сб, 13 Ноя 2010 15:25:24)

0

Поделиться20Сб, 13 Ноя 2010 15:31:37

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11572
Последний визит:
Сегодня 00:00:20

Cобственно идеи две -

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

2. Все сложности типо только из-за разных размеров картинки до наведения курсора и после,- сейчас расстояние между элементами меню - позволяет устанавливать эти картинки - как начальную так и большую идентичными размерами - посмотрите - между соседними картинками 67 пиксел, а большая картинка 64 пиксела

Почему не добавить к маленькой исходной картинке прозрачки и сделать размеры идентичными большой ?- тогда и код будет простой и кроссбраузерный

Отредактировано Deff (Сб, 13 Ноя 2010 15:48:54)

0

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

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

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

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

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

Сообщений 1 страница 20 из 121

Поделиться1Пт, 12 Ноя 2010 15:21:32

Поделиться2Пт, 12 Ноя 2010 15:48:36

Поделиться3Пт, 12 Ноя 2010 17:38:47

Поделиться4Пт, 12 Ноя 2010 19:09:41

Поделиться5Пт, 12 Ноя 2010 19:29:43

Поделиться6Пт, 12 Ноя 2010 20:17:48

Поделиться7Пт, 12 Ноя 2010 20:21:31

Поделиться8Пт, 12 Ноя 2010 21:40:27

Поделиться9Пт, 12 Ноя 2010 21:57:48

Поделиться10Сб, 13 Ноя 2010 03:39:08

Поделиться11Сб, 13 Ноя 2010 04:17:27

Поделиться12Сб, 13 Ноя 2010 14:06:13

Поделиться13Сб, 13 Ноя 2010 14:07:50

Поделиться14Сб, 13 Ноя 2010 14:32:01

Поделиться15Сб, 13 Ноя 2010 14:51:32

Поделиться16Сб, 13 Ноя 2010 15:03:11

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

Поделиться18Сб, 13 Ноя 2010 15:19:10

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

Поделиться20Сб, 13 Ноя 2010 15:31:37