Форум русской поддержки Joomla!® CMS
11.12.2016, 17:55:51 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1] 2  Все   Вниз
  Добавить закладку  |  Печать  
Автор

Как сделать CSS картинку рядом с ссылкой?

 (Прочитано 633 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Сergei
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 209


« : 11.01.2016, 10:55:15 »

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

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #1 : 11.01.2016, 10:57:27 »

Маловато информации. Возможно так:

Код
.image {background: url(../images/image.png) 0 center no-repeat; padding-left:50px; display:inline-block}
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #2 : 11.01.2016, 11:12:32 »

думаю проще и целесообразнее:
-в CSS шаблона задайте новый класс
-в модуле его укажите.
всё.
там можно и при наведении и на что у вас фантазии и ручек хватит.
Записан
Сergei
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 209


« Ответ #3 : 11.01.2016, 18:36:46 »

Маловато информации. Возможно так:

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

Репутация: +0/-0
Offline Offline

Сообщений: 209


« Ответ #4 : 11.01.2016, 18:41:06 »

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

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #5 : 11.01.2016, 18:49:30 »

Подробнее распишите, что хотите сделать.
Записан
JaneFaint
Осваиваюсь на форуме
***

Репутация: +2/-0
Offline Offline

Сообщений: 106



« Ответ #6 : 11.01.2016, 19:07:28 »

только картинка в виде ссылке.
если класс применяется к ссылке, то логично что картинка входит в состав ссылки
Записан
Сergei
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 209


« Ответ #7 : 11.01.2016, 19:09:25 »

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

Репутация: +0/-0
Offline Offline

Сообщений: 209


« Ответ #8 : 11.01.2016, 19:15:00 »

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

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #9 : 11.01.2016, 19:21:08 »

Всё понятно. Это нужно шаблон меню подправить. Нужно, чтобы класс назначался элементу списка, а не ссылке.
Записан
Сergei
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 209


« Ответ #10 : 11.01.2016, 19:32:29 »

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

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #11 : 11.01.2016, 19:36:46 »

Не каснётся. Делается альтернативный шаблон модуля и выбирается в опциях потом.
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #12 : 11.01.2016, 19:39:12 »

думаю проще и целесообразнее:
-в CSS шаблона задайте новый класс
-в модуле его укажите.
всё.
Записан
Сergei
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 209


« Ответ #13 : 12.01.2016, 22:35:26 »

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

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #14 : 12.01.2016, 22:43:13 »

что-то я ваш ответ вообще не понял.
куда вправо, какие ссылки.
что у вас там происходит вообще?
напишите точные условия что у вас должно происходить и почему.
дайте код, сделаю бесплатно и закроем тему.
« Последнее редактирование: 12.01.2016, 22:47:11 от vipiusss » Записан
Сergei
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 209


« Ответ #15 : 12.01.2016, 22:56:32 »

Демо того, что мне нужно, но с картинками:


* Ссылки с маркерами.jpg (23.24 Кб, 602x61 - просмотрено 79 раз.)
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #16 : 12.01.2016, 23:01:58 »

опять не понял.вам подчёркивание надо или куда картинки?на скрине нет же картинок.
в лбом случае: div задать и класс к нему, не понимаю, что у вас не получается.
напишите чотко, что надо, я вам и div и CSS напишу
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #17 : 12.01.2016, 23:11:15 »

У вас же просто бордеры подчёркнуты. Какие картинки вы куда хотите вставить?
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #18 : 12.01.2016, 23:17:06 »

У вас же просто бордеры подчёркнуты. Какие картинки вы куда хотите вставить?
да ТС смотрю сам не понимает, что ему надо .....Или не может выразиться в своём желании.
Записан
Сergei
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 209


« Ответ #19 : 13.01.2016, 08:36:26 »

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


Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #20 : 13.01.2016, 10:14:04 »

a.ваш класс:hover {
    background: url(путь); /* Путь к картинке  */
   }
это если при наведении, если по дефолту картнка должна, то просто класс для дива.
честно, я так и не понял, что вам именно надо.
Записан
fbr
Живу я здесь
******

Репутация: +136/-6
Offline Offline

Сообщений: 1251


« Ответ #21 : 13.01.2016, 11:40:39 »

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

Код
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, 13:21:05 от fbr » Записан
Сergei
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 209


« Ответ #22 : 14.01.2016, 12:03:02 »

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

Репутация: +0/-0
Offline Offline

Сообщений: 209


« Ответ #23 : 14.01.2016, 12:13:14 »

Нужно: Ссылка > Картинка > Ссылка > Картинка > Ссылка
Записан
Сergei
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 209


« Ответ #24 : 14.01.2016, 12:44:18 »

У вас структура меню ul -> li -> a ?

Код файла модуля меню:
Показать текстовый блок
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #25 : 14.01.2016, 13:58:15 »

У вас же написано: $class = 'item-' . $item->id;
Вот и назначайте на эти классы картинки, т.е. фоном для li
Записан
Сergei
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 209


« Ответ #26 : 03.02.2016, 18:39:10 »

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

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

Вот еще демо того, что нужно:


* Маркеры.jpg (26.71 Кб, 508x63 - просмотрено 61 раз.)
« Последнее редактирование: 03.02.2016, 19:06:55 от Сergei » Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #27 : 03.02.2016, 19:11:35 »

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

Репутация: +0/-0
Offline Offline

Сообщений: 209


« Ответ #28 : 03.02.2016, 19:38:19 »

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

Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #29 : 03.02.2016, 21:35:00 »

нет тут смайлика: убей себя об стену.
ТС, я не коем образом не про Вас, но если вас Шустрый не понимает, я точно читать не буду)))
Записан
Страниц: [1] 2  Все   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet