Главное меню с картинками.

Поделиться1Вс, 12 Июн 2011 11:04:39

Автор: Djeday
Заслуженный
Зарегистрирован: Сб, 28 Май 2011
Сообщений: 169
Уважение: +15
Позитив: +39
Пол: Мужской
Предупреждения: 1)
Последний визит:
Пт, 29 Ноя 2013 14:15:07

Есть скрипт, заменяющий слова
Форум
Участники
Правила
Поиск
Профиль
Сообщения
Выход
и т.д. на картинки.

Код:

<script type="text/javascript">
li=document.getElementById("pun-navlinks").getElementsByTagName("li")
f=-1
while(li[++f]){
s=li[f].innerHTML
if((p=s.indexOf("Форум")) != -1) li[f].innerHTML=s.substring(0,p)+"<img src=' http://i23.fastpic.ru/big/2011/0611/83/0ad28b0121c9aac8ad4f7c1125d9cf83.png' atl='Форум'>"+s.substring(p+5) <p>'Галактика'</p>
else if((p=s.indexOf("Участники")) != -1) li[f].innerHTML=s.substring(0,p)+"<img src=' http://i23.fastpic.ru/big/2011/0611/a6/752d5041ab44200e036996d0015bfda6.png' alt='Участники'>"+s.substring(p+9)
else if((p=s.indexOf("Правила")) != -1) li[f].innerHTML=s.substring(0,p)+"<img src=' http://i23.fastpic.ru/big/2011/0611/47/ecbedc2bde45b6b64bf40a15ce8a4e47.png' alt='Правила'>"+s.substring(p+7)
else if((p=s.indexOf("Поиск")) != -1) li[f].innerHTML=s.substring(0,p)+"<img src=' http://i23.fastpic.ru/big/2011/0611/e4/9f9d601e434c9ac690e01b1f48d07ce4.png' alt='Поиск'>"+s.substring(p+5)
else if((p=s.indexOf("Профиль")) != -1) li[f].innerHTML=s.substring(0,p)+"<img src=' http://i23.fastpic.ru/big/2011/0611/5c/7c04173ec54dda420d8bb283add73c5c.png' alt='Профиль'>"+s.substring(p+7)
else if((p=s.indexOf("Сообщения")) != -1) li[f].innerHTML=s.substring(0,p)+"<img src=' http://i23.fastpic.ru/big/2011/0611/47/ecbedc2bde45b6b64bf40a15ce8a4e47.png' atl='Сообщения'>"+s.substring(p+9)
else if((p=s.indexOf("Администрирование")) != -1) li[f].innerHTML=s.substring(0,p)+"<img src=' http://i23.fastpic.ru/big/2011/0611/ff/9cd53a0c7ccdb63f19802bd5809b7eff.png' alt='Администрирование'>"+s.substring(p+17)
else if((p=s.indexOf("Регистрация")) != -1) li[f].innerHTML=s.substring(0,p)+"<img src=' http://i23.fastpic.ru/big/2011/0611/14/ada6b65f1d1a7bb38d4d8d2e4213ee14.png' atl='Регистрация'>"+s.substring(p+11)
else if((p=s.indexOf("Выход")) != -1) li[f].innerHTML=s.substring(0,p)+"<img src=' http://i23.fastpic.ru/big/2011/0611/14/ada6b65f1d1a7bb38d4d8d2e4213ee14.png' alt='Выйти'>"+s.substring(p+5)
else if((p=s.indexOf("Войти")) != -1) li[f].innerHTML=s.substring(0,p)+"<img src=' http://i23.fastpic.ru/big/2011/0611/14/ada6b65f1d1a7bb38d4d8d2e4213ee14.png' alt='Войти'>"+s.substring(p+5)
}
</script>

Но после замены остаются только картинки, надписей нет.
Можно в нем что-то поменять, чтобы были картинки, а под ними надписи???
Вот примерно так:

Заранее спасибо.
С уважением, Djeday.

0

Поделиться2Пн, 13 Июн 2011 21:17:39

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

Djeday
Может быть так попробуете?

Код:

<style type="text/css">
#pun-navlinks  * {
  text-align: center !important;
  padding-top: 80px !important;
}

#pun-navlinks li {
  display: inline;
  margin: 0.8%;
  padding-top: 70px;
  padding-right: 10px;
  padding-left: 10px;
}


#navindex {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/83/0ad28b0121c9aac8ad4f7c1125d9cf83.png) no-repeat center;
}
#navuserlist {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/a6/752d5041ab44200e036996d0015bfda6.png) no-repeat center;
}
#navrules {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/47/ecbedc2bde45b6b64bf40a15ce8a4e47.png) no-repeat 11px 12px;
}
#navsearch {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/e4/9f9d601e434c9ac690e01b1f48d07ce4.png) no-repeat 2px 12px;
}
#navprofile {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/5c/7c04173ec54dda420d8bb283add73c5c.png) no-repeat 11px 12px;
}
#navlogin, #navlogout {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/14/ada6b65f1d1a7bb38d4d8d2e4213ee14.png) no-repeat center;
}
#navregister {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/14/ada6b65f1d1a7bb38d4d8d2e4213ee14.png) no-repeat center;
}

#navextra0, #navextra1, #navextra2, #navextra3, #navextra4, #navextra5, #navextra6, #navextra7, #navextra8, #navextra9, #navextra10 {
background: transparent url(/img/Mybb_NewBlack/extra.gif) no-repeat center;
}

#navpm {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/47/ecbedc2bde45b6b64bf40a15ce8a4e47.png) no-repeat center;
}

#navadmin {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/ff/9cd53a0c7ccdb63f19802bd5809b7eff.png) no-repeat center;
}
</style>

+1

Поделиться3Вт, 14 Июн 2011 10:54:38

Автор: Djeday
Заслуженный
Зарегистрирован: Сб, 28 Май 2011
Сообщений: 169
Уважение: +15
Позитив: +39
Пол: Мужской
Предупреждения: 1)
Последний визит:
Пт, 29 Ноя 2013 14:15:07

Код:

<style type="text/css">
#pun-navlinks  * {
  text-align: center !important;
  padding-top: 65px !important;
}

#pun-navlinks li {
  display: inline;
  margin: 0.8%;
  padding-top: 70px;
  padding-right: 5px;
  padding-left: 5px;
}


#navindex {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/83/0ad28b0121c9aac8ad4f7c1125d9cf83.png) no-repeat center;
}
#navuserlist {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/a6/752d5041ab44200e036996d0015bfda6.png) no-repeat center;
}
#navrules {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/47/ecbedc2bde45b6b64bf40a15ce8a4e47.png) no-repeat center;
}
#navsearch {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/e4/9f9d601e434c9ac690e01b1f48d07ce4.png) no-repeat center;
}
#navprofile {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/5c/7c04173ec54dda420d8bb283add73c5c.png) no-repeat center;
}
#navlogin, #navlogout {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/14/ada6b65f1d1a7bb38d4d8d2e4213ee14.png) no-repeat center;
}
#navregister {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/14/ada6b65f1d1a7bb38d4d8d2e4213ee14.png) no-repeat center;
}

#navextra0, #navextra1, #navextra2, #navextra3, #navextra4, #navextra5, #navextra6, #navextra7, #navextra8, #navextra9, #navextra10 {
background: transparent url(/img/Mybb_NewBlack/extra.gif) no-repeat center;
}

#navpm {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/47/ecbedc2bde45b6b64bf40a15ce8a4e47.png) no-repeat center;
}

#navadmin {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/ff/9cd53a0c7ccdb63f19802bd5809b7eff.png) no-repeat center;
}
</style>

Вот так нормально.

А можно как расширить у кнопки поиска чуток и у чата?

0

Поделиться4Вт, 14 Июн 2011 15:08:33

Автор: АЛЬБ
Cтарожил
Зарегистрирован: Ср, 31 Окт 2007
Сообщений: 3178
Уважение: +445
Позитив: +206
Пол: Мужской
Последний визит:
Вс, 4 Дек 2011 20:01:22

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

А можно как расширить у кнопки поиска чуток и у чата?

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

#pun-navlinks li {
display: inline;
margin: 0.8%;
padding-top: 70px;
padding-right: 5px;
padding-left: 5px;

здесь исправьте 5 на 10..

0

Поделиться5Вт, 14 Июн 2011 15:10:34

Автор: АЛЬБ
Cтарожил
Зарегистрирован: Ср, 31 Окт 2007
Сообщений: 3178
Уважение: +445
Позитив: +206
Пол: Мужской
Последний визит:
Вс, 4 Дек 2011 20:01:22

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

display: inline;
margin: 0.8%;
padding-top: 70px;
padding-right: 10px;
padding-left: 10px;
}

Djeday вот вам же дали как нужно!!?? :huh: что вы изобретаете?? :sceptic:

0

Поделиться6Вт, 14 Июн 2011 16:32:35

Автор: Djeday
Заслуженный
Зарегистрирован: Сб, 28 Май 2011
Сообщений: 169
Уважение: +15
Позитив: +39
Пол: Мужской
Предупреждения: 1)
Последний визит:
Пт, 29 Ноя 2013 14:15:07

АЛЬБ написал(а):

Djeday вот вам же дали как нужно!!?? что вы изобретаете??

Тогда вот, что получается:

0

Поделиться7Вт, 14 Июн 2011 19:25:09

Автор: АЛЬБ
Cтарожил
Зарегистрирован: Ср, 31 Окт 2007
Сообщений: 3178
Уважение: +445
Позитив: +206
Пол: Мужской
Последний визит:
Вс, 4 Дек 2011 20:01:22

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

Тогда вот, что получается:

убери одну кнопу.. 8-) например правила! никто туде не заходит..

0

Поделиться8Ср, 15 Июн 2011 17:31:48

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

Djeday
Попробуйте вот так:

Код:

<style type="text/css">
#pun-navlinks  * {
  text-align: center !important;
  padding-top: 65px !important;
}

#pun-navlinks li {
  display: inline;
  margin: 0.8%;
  padding-top: 70px;
  padding-right: 10px;
  padding-left: 10px;
}

#navextra1 {
  padding-right: 20px;
  padding-left: 20px;
}

#navindex {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/83/0ad28b0121c9aac8ad4f7c1125d9cf83.png) no-repeat center;
}
#navuserlist {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/a6/752d5041ab44200e036996d0015bfda6.png) no-repeat center;
}
#navrules {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/47/ecbedc2bde45b6b64bf40a15ce8a4e47.png) no-repeat center;
}
#navsearch {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/e4/9f9d601e434c9ac690e01b1f48d07ce4.png) no-repeat center;
}
#navprofile {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/5c/7c04173ec54dda420d8bb283add73c5c.png) no-repeat center;
}
#navlogin, #navlogout {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/14/ada6b65f1d1a7bb38d4d8d2e4213ee14.png) no-repeat center;
}
#navregister {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/14/ada6b65f1d1a7bb38d4d8d2e4213ee14.png) no-repeat center;
}

#navextra0, #navextra1, #navextra2, #navextra3, #navextra4, #navextra5, #navextra6, #navextra7, #navextra8, #navextra9, #navextra10 {
background: transparent url(/img/Mybb_NewBlack/extra.gif) no-repeat center;
}

#navpm {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/47/ecbedc2bde45b6b64bf40a15ce8a4e47.png) no-repeat center;
}

#navadmin {
background: transparent url(http://i23.fastpic.ru/big/2011/0611/ff/9cd53a0c7ccdb63f19802bd5809b7eff.png) no-repeat center;
}
</style>

И ещё, если у Вас кнопки не помещаются в один ряд, можно попробовать сократить расстояние между ними:

#pun-navlinks li {
display: inline;
margin: 0.8%;
padding-top: 70px;
padding-right: 10px;
padding-left: 10px;
}

Регулируйте выделенное число (это всё в том же коде). Кстати, код должен стоять в ХТМЛ-верх, а не в ХТМЛ-низ.

+1

Поделиться9Чт, 16 Июн 2011 12:13:38

Автор: Djeday
Заслуженный
Зарегистрирован: Сб, 28 Май 2011
Сообщений: 169
Уважение: +15
Позитив: +39
Пол: Мужской
Предупреждения: 1)
Последний визит:
Пт, 29 Ноя 2013 14:15:07

Спасибо, все работает + вам

0

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

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

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

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

Главное меню с картинками.

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

Поделиться1Вс, 12 Июн 2011 11:04:39

Поделиться2Пн, 13 Июн 2011 21:17:39

Поделиться3Вт, 14 Июн 2011 10:54:38

Поделиться4Вт, 14 Июн 2011 15:08:33

Поделиться5Вт, 14 Июн 2011 15:10:34

Поделиться6Вт, 14 Июн 2011 16:32:35

Поделиться7Вт, 14 Июн 2011 19:25:09

Поделиться8Ср, 15 Июн 2011 17:31:48

Поделиться9Чт, 16 Июн 2011 12:13:38