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

Сergei

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

Shustry

  • Moderator
  • 6434
  • 745 / 3
Маловато информации. Возможно так:

Код: css
.image {background: url(../images/image.png) 0 center no-repeat; padding-left:50px; display:inline-block}
*

vipiusss

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

Сergei

  • Захожу иногда
  • 189
  • 0 / 0
Маловато информации. Возможно так:

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

Сergei

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

Shustry

  • Moderator
  • 6434
  • 745 / 3
Подробнее распишите, что хотите сделать.
*

JaneFaint

  • Захожу иногда
  • 121
  • 3 / 0
только картинка в виде ссылке.
если класс применяется к ссылке, то логично что картинка входит в состав ссылки
*

Сergei

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

Сergei

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

Shustry

  • Moderator
  • 6434
  • 745 / 3
Всё понятно. Это нужно шаблон меню подправить. Нужно, чтобы класс назначался элементу списка, а не ссылке.
*

Сergei

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

Shustry

  • Moderator
  • 6434
  • 745 / 3
Не каснётся. Делается альтернативный шаблон модуля и выбирается в опциях потом.
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
думаю проще и целесообразнее:
-в CSS шаблона задайте новый класс
-в модуле его укажите.
всё.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Сergei

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

vipiusss

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

Сergei

  • Захожу иногда
  • 189
  • 0 / 0
Демо того, что мне нужно, но с картинками:
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
опять не понял.вам подчёркивание надо или куда картинки?на скрине нет же картинок.
в лбом случае: div задать и класс к нему, не понимаю, что у вас не получается.
напишите чотко, что надо, я вам и div и CSS напишу
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
У вас же просто бордеры подчёркнуты. Какие картинки вы куда хотите вставить?
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
У вас же просто бордеры подчёркнуты. Какие картинки вы куда хотите вставить?
да ТС смотрю сам не понимает, что ему надо .....Или не может выразиться в своём желании.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Сergei

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


*

vipiusss

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

fbr

  • Завсегдатай
  • 1625
  • 189 / 7
У вас структура меню 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

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

Сergei

  • Захожу иногда
  • 189
  • 0 / 0
Нужно: Ссылка > Картинка > Ссылка > Картинка > Ссылка
*

Сergei

  • Захожу иногда
  • 189
  • 0 / 0
У вас структура меню ul -> li -> a ?

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

Shustry

  • Moderator
  • 6434
  • 745 / 3
У вас же написано: $class = 'item-' . $item->id;
Вот и назначайте на эти классы картинки, т.е. фоном для li
*

Сergei

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

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

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

Shustry

  • Moderator
  • 6434
  • 745 / 3
Я всё равно не пойму, в чём проблема.
Чтобы применить правило для всех, кроме первого элемента:
selector:not(:first-child)
Чтобы для конкретно взятого меню, используйте родительский селектор.
*

Сergei

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

*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
нет тут смайлика: убей себя об стену.
ТС, я не коем образом не про Вас, но если вас Шустрый не понимает, я точно читать не буду)))
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Helix3 сделать несколько рядов не столбцов!

Автор Bowa

Ответов: 6
Просмотров: 1939
Последний ответ 04.03.2023, 20:33:40
от Petrovich
Как сделать вывод ссылок в обратном порядке (com_weblinks)?

Автор Slava77

Ответов: 0
Просмотров: 414
Последний ответ 24.11.2022, 16:42:09
от Slava77
Хлебные крошки: вместо title сделать заголовок

Автор Zelyonkin

Ответов: 2
Просмотров: 449
Последний ответ 09.09.2022, 08:46:10
от Zelyonkin
Как добавить иконку с ссылкой в меню мобильной версии?

Автор svkiller2007

Ответов: 4
Просмотров: 2596
Последний ответ 25.01.2022, 21:39:20
от svkiller2007
Шаблон Protostar, как поставить на фон картинку

Автор Дмитрий2586

Ответов: 32
Просмотров: 7517
Последний ответ 16.08.2021, 03:16:39
от Ада