ForumD.ru - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Финансовая помощьРеклама на сайте
Стать модераторомОтзывы

Предложения

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Скрипты и стили для форумов МуBB.ru » Меню навигации: пункты картинками + расположение пунктов (CSS)


Меню навигации: пункты картинками + расположение пунктов (CSS)

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

1

Замена ссылок меню навигации на картинки

<style type="text/css">

    /*1. Настройка общего вида линков */

    #pun-navlinks a {
    display: inline-block;
    height: 20px;
    width: 70px;
    margin-left: 10px;
    }

    /*2. Настройка изображений */

    #navindex a {background: url(адрес_изображения) no-repeat top center;}
    #navuserlist a {background: url(адрес_изображения) no-repeat top center;}
    #navsearch a {background: url(адрес_изображения) no-repeat top center;}
    #navprofile a {background: url(адрес_изображения) no-repeat top center;}
    #navpm a {background: url(адрес_изображения) no-repeat top center;}
    #navadmin a {background: url(адрес_изображения) no-repeat top center;}
    #navlogout a {background: url(адрес_изображения) no-repeat top center;}
    #navlogin a {background: url(адрес_изображения) no-repeat top center;}
    #navregister  a {background: url(адрес_изображения) no-repeat top center;}

    /*3. Настройка изображений при ховере (наведении) */

    #navindex a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navuserlist a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navsearch a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navprofile a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navpm a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navadmin a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navlogout a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navlogin a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navregister a:hover {background: url(адрес_изображения) no-repeat top center;}

    /* Скрываем текстовые надписи */

    #pun-navlinks a span {display: none;}
    </style>


Инструкции

1. Настройка общего вида #pun-navlinks a
height: 20px; - укажите высоту ваших изображений
width: 70px; - укажите ширину ваших изображений. Если ширина изображений разная, необходимо удалить эту строку, и указать ширину для каждого элемента отдельно.
Пример:
#navindex a {background: url(адрес_изображения) no-repeat top center; width: 70px; }
#navuserlist a {background: url(адрес_изображения) no-repeat top center; width: 75px;}
и т.д.
! Для ховеров ширину указывать не нужно. Свойство наследуется.
margin-left: 10px; - расстояние между линками.

2. Настройка изображений

#navindex a
- Главная
#navuserlist a - Пользователи
#navsearch a - Поиск
#navprofile a - Профиль
#navpm a - ЛС
#navadmin a - Администрирование
#navlogout a - Выход
#navlogin a - Вход
#navregister  a - Регистрация
#navextra1 a - для добавленных ссылок, где цифра, это порядковый номер положения в меню.

background: url(адрес_изображения) - адрес вашего изображения, которое будет отображаться когда ссылка находится в состоянии покоя.

3. Настройка изображений ховера
Все как и выше. Только изображения для ссылок при наведении.


"Разбросать" пункты меню навигации по разным сторонам

Код:
#navindex a {
  background: url(ссылка на картинку "ФОРУМ") no-repeat top center; 
  display: inline-block; 
  position: absolute; 
  z-index: 1000; 
height: ХХХpx;
width: ХХХpx;
top: ХХХpx; 
left: ХХХpx;
}
#navuserlist a {
  background: url(ссылка на картинку "УЧАСТНИКИ") no-repeat top center; 
  display: inline-block; 
  position: absolute; 
  z-index: 1000; 
height: ХХХpx;
width: ХХХpx;
top: ХХХpx; 
left: ХХХpx;
}

#navsearch a {
  background: url(ссылка на картинку "ПОИСК") no-repeat top center; 
  display: inline-block; 
  position: absolute; 
  z-index: 1000; 
height: ХХХpx;
width: ХХХpx;
top: ХХХpx; 
left: ХХХpx;
}

#navprofile a {
  background: url(ссылка на картинку "ПРОФИЛЬ") no-repeat top center; 
  display: inline-block; 
  position: absolute; 
  z-index: 1000; 
height: ХХХpx;
width: ХХХpx;
top: ХХХpx; 
left: ХХХpx;
}

#navpm a {
  background: url(ссылка на картинку "СООБЩЕНИЕ") no-repeat top center; 
  display: inline-block; 
  position: absolute; 
  z-index: 1000; 
height: ХХХpx;
width: ХХХpx;
top: ХХХpx; 
left: ХХХpx;
}

#navadmin  a {
  background: url(ссылка на картинку "АМС МЕНЮ") no-repeat top center; 
  display: inline-block; 
  position: absolute; 
  z-index: 1000; 
height: ХХХpx;
width: ХХХpx;
top: ХХХpx; 
left: ХХХpx;;
}

#navlogout   a {
  background: url(ссылка на картинку "ВЫХОД") no-repeat top center; 
  display: inline-block; 
  position: absolute; 
  z-index: 1000; 
height: ХХХpx;
width: ХХХpx;
top: ХХХpx; 
left: ХХХpx;
}

#navlogin  a {
  background: url(ссылка на картинку "ВХОД") no-repeat top center; 
  display: inline-block; 
  position: absolute; 
  z-index: 1000; 
height: ХХХpx;
width: ХХХpx;
top: ХХХpx; 
left: ХХХpx;
}

#navregister a {
  background: url(ссылка на картинку "РЕГИСТРАЦИЯ") no-repeat top center; 
  display: inline-block; 
  position: absolute; 
  z-index: 1000; 
height: ХХХpx;
width: ХХХpx;
top: ХХХpx; 
left: ХХХpx;
}
#navrules a {
  background: url(ссылка на картинку "ПРАВИЛА") no-repeat top center; 
  display: inline-block; 
  position: absolute; 
  z-index: 1000; 
height: ХХХpx;
width: ХХХpx;
top: ХХХpx; 
left: ХХХpx;
}
#navpiar a {
  background: url(ссылка на картинку "Пир-Вход") no-repeat top center; 
  display: inline-block; 
  position: absolute; 
  z-index: 1000; 
height: ХХХpx;
width: ХХХpx;
top: ХХХpx; 
left: ХХХpx;
}

height: ХХХpx; - ширина картинки
width: ХХХpx; - высота картинки
Расположение
top: ХХХpx; - выше/ниже
left: ХХХpx; - в лева/в права

+2

2

Не работает.
#pun-navlinks a span {display: none;}
Скрывает всю навигацию

0

3

Shaykan
Нун выбрать селектор из списка
#navindex a - Главная
#navuserlist a - Пользователи
#navsearch a - Поиск
#navprofile a - Профиль
#navpm a - ЛС
#navadmin a - Администрирование
#navlogout a - Выход
#navlogin a - Вход
#navregister  a - Регистрация
#navextra1 a - для добавл


а не
#pun-navlinks a span {display: none;}
а не

Отредактировано Deff (05.02.2012 23:37:25)

0

4

скажите пожалуйста, как для ссылки "награды" изображение поставить?

0

5

Форум

Чтобы убрать лишние ссылки, сделала так:

Код:
#pun-navlinks li a {
  font-size: 1.1em;
  }
    #navuserlist  a span {display: none;}
    #navsearch a span {display: none;}
    #navprofile a span {display: none;}
    #navawards a span {display: none;}
    #navpm a span {display: none;}

Но на месте убранных ссылок остается пространство, как его убрать?

0

6

Мёриэль
добавьте

#navuserlist, #navsearch, #navprofile, #navawards, #navpm {margin: -5px;}

пиксели под себя подберите

+1

7

Здравствуйте.
Извините, если не совсем по теме, но не подскажете, а как изменить начертание основного меню?

* D3.4 */
#pun-navlinks li a {
    font-size: 1.5em;
   
  }

то, что я выделила красным , я изменила, чтобы крупнее становилось, но где прописать начертание не знаю... + я хочу внедрить вот эти нестандартные шрифты http://s1.uploads.ru/t/ow4ep.png, одним из которых, чтобы было написано основное меню (курсивом)
вот форум

0

8

Олюся

.example {
   font-family: "Zanerian Two";
}

или

.example {
   font: bold 1.5em "Zanerian Two";
}
//Если Вы прописываете не только гарнитуру.

Надеюсь, Вы помните, что чтобы использовать нестандартные шрифты, придется повозиться в @font-face или на крайняк гугловским сервисом, иначе будут проблемы?

P.S. Для подобных вопросов есть тема Вопрос/ответ по дизайну css #5, а если не знаете, где спросить - создавайте свою тему в разделе для новичков.

+1

9

Олюся http://forum.mybb.ru/viewtopic.php?id=29775

+1

10

sadhaka, Deff спасибо. я попробую

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Скрипты и стили для форумов МуBB.ru » Меню навигации: пункты картинками + расположение пунктов (CSS)