0 Пользователей и 1 Гость просматривают эту тему.
  • 33 Ответов
  • 1144 Просмотров
*

Сergei

  • Осваиваюсь на форуме
  • 190
  • 0
Подскажите, пожалуйста, как в CSS сделать картинку рядом со ссылкой?
Делал так:
Цитировать
.image {background: url(../images/image.png) right no-repeat;}
Далее image прописывал в поле «Суффикс класса меню» модуля «Меню», но при таком решении картинка получается ввиде ссылке и картинка не двигается вправо от ссылке.
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Маловато информации. Возможно так:

Код: css
.image {background: url(../images/image.png) 0 center no-repeat; padding-left:50px; display:inline-block}
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

vipiusss

  • Профи
  • 5601
  • 322
  • Круглая ава-зло!
думаю проще и целесообразнее:
-в CSS шаблона задайте новый класс
-в модуле его укажите.
всё.
там можно и при наведении и на что у вас фантазии и ручек хватит.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Сergei

  • Осваиваюсь на форуме
  • 190
  • 0
Маловато информации. Возможно так:

Код: css
.image {background: url(../images/image.png) 0 center no-repeat; padding-left:50px; display:inline-block}
Данное решение не помогло, к сожалению, но по-любому благодарю, что откликнулись.
*

Сergei

  • Осваиваюсь на форуме
  • 190
  • 0
думаю проще и целесообразнее:
-в CSS шаблона задайте новый класс
-в модуле его укажите.
всё.
там можно и при наведении и на что у вас фантазии и ручек хватит.
я так и cделал, что в в файле .css шаблона сделал новый класс и потом указал в настройках модуля в поле  в поле «Суффикс класса меню» этот класс и выводится, только картинка в виде ссылке.
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Подробнее распишите, что хотите сделать.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

JaneFaint

  • Осваиваюсь на форуме
  • 121
  • 3
только картинка в виде ссылке.
если класс применяется к ссылке, то логично что картинка входит в состав ссылки
*

Сergei

  • Осваиваюсь на форуме
  • 190
  • 0
Подробнее распишите, что хотите сделать.
Хотел сделать картинку рядом с ссылкой в модуле "Меню". Картинку сделал, но она показывается, как ссылка, а мне нужно, как картинка, но не ссылка.
*

Сergei

  • Осваиваюсь на форуме
  • 190
  • 0
если класс применяется к ссылке, то логично что картинка входит в состав ссылки
Это я понимаю, но может есть какой еще класс-вариант, который смог бы выводить картинку рядом с ссылкой.
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Всё понятно. Это нужно шаблон меню подправить. Нужно, чтобы класс назначался элементу списка, а не ссылке.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

Сergei

  • Осваиваюсь на форуме
  • 190
  • 0
Всё понятно. Это нужно шаблон меню подправить. Нужно, чтобы класс назначался элементу списка, а не ссылке.
ясно, но я модуль "Меню" показываю два раза и в одном из них картинка не нужна и если сделаю правку, то это коснется всех модулей.
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Не каснётся. Делается альтернативный шаблон модуля и выбирается в опциях потом.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

vipiusss

  • Профи
  • 5601
  • 322
  • Круглая ава-зло!
думаю проще и целесообразнее:
-в CSS шаблона задайте новый класс
-в модуле его укажите.
всё.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Сergei

  • Осваиваюсь на форуме
  • 190
  • 0
Модуль выводит несколько ссылок и у каждой ссылке мне нужно вывести картинку, если делать это в модуле, то получается, что только одна картинка выводится, а мне нужно штук пять.
Так-то подходит вариант с выводом картинки в пунктах меню, но они, как ссылки получаются и не возможно их-картинки сдвинуть вправо от ссылке.
*

vipiusss

  • Профи
  • 5601
  • 322
  • Круглая ава-зло!
что-то я ваш ответ вообще не понял.
куда вправо, какие ссылки.
что у вас там происходит вообще?
напишите точные условия что у вас должно происходить и почему.
дайте код, сделаю бесплатно и закроем тему.
« Последнее редактирование: 12.01.2016, 21:47:11 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Сergei

  • Осваиваюсь на форуме
  • 190
  • 0
Демо того, что мне нужно, но с картинками:
*

vipiusss

  • Профи
  • 5601
  • 322
  • Круглая ава-зло!
опять не понял.вам подчёркивание надо или куда картинки?на скрине нет же картинок.
в лбом случае: div задать и класс к нему, не понимаю, что у вас не получается.
напишите чотко, что надо, я вам и div и CSS напишу
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
У вас же просто бордеры подчёркнуты. Какие картинки вы куда хотите вставить?
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

vipiusss

  • Профи
  • 5601
  • 322
  • Круглая ава-зло!
У вас же просто бордеры подчёркнуты. Какие картинки вы куда хотите вставить?
да ТС смотрю сам не понимает, что ему надо .....Или не может выразиться в своём желании.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Сergei

  • Осваиваюсь на форуме
  • 190
  • 0
опять не понял.вам подчёркивание надо или куда картинки?на скрине нет же картинок.
в лбом случае: div задать и класс к нему, не понимаю, что у вас не получается.
напишите чотко, что надо, я вам и div и CSS напишу
Это я показал демо, ну или пример того, что мне нужно рядом со ссылкой, а именно мне нужно разместить изображение, которое повторяется через ссылку.
Подчеркивание зеленым цветом - это пометки, чтобы Вам было бы понятнее, что вместо бордеров или маркеров нужны картинки, а вот, как их туда внедрить не в курсе.
Картинка в виде скриншота не моя.


*

vipiusss

  • Профи
  • 5601
  • 322
  • Круглая ава-зло!
a.ваш класс:hover {
    background: url(путь); /* Путь к картинке  */
   }
это если при наведении, если по дефолту картнка должна, то просто класс для дива.
честно, я так и не понял, что вам именно надо.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

fbr

  • Живу я здесь
  • 1283
  • 142
У вас структура меню ul -> li -> a ?
Тогда цепляйте картинку к li

Код: css
ul>li {
position: relative;
}
ul>li + li:before {
position: absolute;
right: 0;//подбираете
top: 0; //подбираете
background-image: url(...);
background-position: left top; // подбираете
background-repeat: no-repeat;
width: 20px; //ширина картинки, подбираете;
height: 20px; // подбираете;
}
ul>li + li a {
padding-left: 30px;//компенсирующий отступ для картинки, подбираете
}

Классы элементам добавьте сами.
Писал на вскидку, не проверял, если где ошибся - подкорректируйте.
« Последнее редактирование: 14.01.2016, 12:21:05 от fbr »
*

Сergei

  • Осваиваюсь на форуме
  • 190
  • 0
a.ваш класс:hover {
    background: url(путь); /* Путь к картинке  */
   }
это если при наведении, если по дефолту картнка должна, то просто класс для дива.
честно, я так и не понял, что вам именно надо.
я наоборот хочу избавиться от ссылке, а если я сделаю класс для дива, то не будет повторов изображений.
*

Сergei

  • Осваиваюсь на форуме
  • 190
  • 0
Нужно: Ссылка > Картинка > Ссылка > Картинка > Ссылка
*

Сergei

  • Осваиваюсь на форуме
  • 190
  • 0
У вас структура меню ul -> li -> a ?

Код файла модуля меню:
Спойлер
[свернуть]
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
У вас же написано: $class = 'item-' . $item->id;
Вот и назначайте на эти классы картинки, т.е. фоном для li
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

Сergei

  • Осваиваюсь на форуме
  • 190
  • 0
У меня этот модуль выводится два раза в разных местах и с разными ссылками. В одном из модулей картинок не нужно, а если прописать стиль в
Код
echo '<li' . $class . ' class=image>';
то картинки отображаются сразу в двух модулях, а мне нужно, только в одном, чтобы картинки отображались.

Также такая реализация, копирует слишком много картинок. Например, нужно четыре картинки, а выводятся пять.

Вот еще демо того, что нужно:
« Последнее редактирование: 03.02.2016, 18:06:55 от Сergei »
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Я всё равно не пойму, в чём проблема.
Чтобы применить правило для всех, кроме первого элемента:
selector:not(:first-child)
Чтобы для конкретно взятого меню, используйте родительский селектор.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

Сergei

  • Осваиваюсь на форуме
  • 190
  • 0
Я всё равно не пойму, в чём проблема.
Чтобы применить правило для всех, кроме первого элемента:
selector:not(:first-child)
Чтобы для конкретно взятого меню, используйте родительский селектор.
Вы так пишите, как будто Вы мне про selector:not(:first-child) сообщали сотый раз.

*

vipiusss

  • Профи
  • 5601
  • 322
  • Круглая ава-зло!
нет тут смайлика: убей себя об стену.
ТС, я не коем образом не про Вас, но если вас Шустрый не понимает, я точно читать не буду)))
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как сделать из кнопки «Читать дальше» простую ссылку?

Автор Mnojitell

Ответов: 7
Просмотров: 657
Последний ответ 18.09.2017, 11:45:04
от shrek_01
Как сделать всплывающее описание для вступительных картинок в Joomla 3

Автор 964758

Ответов: 0
Просмотров: 66
Последний ответ 27.08.2017, 22:46:41
от 964758
Как в шаблоне protostar сделать чтоб меню на всех разрешениях пряталось под кнопку?

Автор stendapuss

Ответов: 0
Просмотров: 133
Последний ответ 21.07.2017, 06:21:02
от stendapuss
Как в блоге сделать разные шаблоны вывода для 1 и остальных страниц?

Автор Karyuudo

Ответов: 0
Просмотров: 87
Последний ответ 01.07.2017, 02:05:28
от Karyuudo
Как так сделать?

Автор stendapuss

Ответов: 3
Просмотров: 170
Последний ответ 26.06.2017, 22:36:38
от stendapuss