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

  • 33 Ответов
  • 1060 Просмотров

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

*

Оффлайн Сergei

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

*

Оффлайн Shustry

  • *****
  • 6707
  • [+]736 / [-]3
  • Пол: Мужской
  • Рисую дизайны
    • Просмотр профиля
    • Примеры работ
Маловато информации. Возможно так:

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

*

Оффлайн vipiusss

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

*

Оффлайн Сergei

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

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

*

Оффлайн Сergei

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

*

Оффлайн Shustry

  • *****
  • 6707
  • [+]736 / [-]3
  • Пол: Мужской
  • Рисую дизайны
    • Просмотр профиля
    • Примеры работ
Подробнее распишите, что хотите сделать.
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Оффлайн JaneFaint

только картинка в виде ссылке.
если класс применяется к ссылке, то логично что картинка входит в состав ссылки

*

Оффлайн Сergei

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

*

Оффлайн Сergei

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

*

Оффлайн Shustry

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

*

Оффлайн Сergei

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

*

Оффлайн Shustry

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

*

Оффлайн vipiusss

  • ********
  • 5844
  • [+]324 / [-]10
  • Пол: Мужской
  • Skype: renor_
    • Просмотр профиля
думаю проще и целесообразнее:
-в CSS шаблона задайте новый класс
-в модуле его укажите.
всё.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Оффлайн Сergei

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

*

Оффлайн vipiusss

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

*

Оффлайн Сergei

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

*

Оффлайн vipiusss

  • ********
  • 5844
  • [+]324 / [-]10
  • Пол: Мужской
  • Skype: renor_
    • Просмотр профиля
опять не понял.вам подчёркивание надо или куда картинки?на скрине нет же картинок.
в лбом случае: div задать и класс к нему, не понимаю, что у вас не получается.
напишите чотко, что надо, я вам и div и CSS напишу
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Оффлайн Shustry

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

*

Оффлайн vipiusss

  • ********
  • 5844
  • [+]324 / [-]10
  • Пол: Мужской
  • Skype: renor_
    • Просмотр профиля
У вас же просто бордеры подчёркнуты. Какие картинки вы куда хотите вставить?
да ТС смотрю сам не понимает, что ему надо .....Или не может выразиться в своём желании.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Оффлайн Сergei

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



*

Оффлайн vipiusss

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

*

Оффлайн fbr

У вас структура меню 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, 14:21:05 от fbr »

*

Оффлайн Сergei

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

*

Оффлайн Сergei

Нужно: Ссылка > Картинка > Ссылка > Картинка > Ссылка

*

Оффлайн Сergei

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

Код файла модуля меню:
[spoiler]<?php
defined
('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
?>

<?php // The menu class is deprecated. Use nav instead. ?>
<ul class="nav menu<?php echo $class_sfx;?>"<?php
$tag '';

if ($params->get('tag_id')!= null)
{
$tag $params->get('tag_id'). '';
echo ' id="' $tag '"';
}
?>
>
<?php
foreach ($list as $i => &$item)
{
$class 'item-' $item->id;

if (($item->id == $active_id) OR ($item->type == 'alias' AND $item->params->get('aliasoptions') == $active_id))
{
$class .= ' current';
}

if (in_array($item->id$path))
{
$class .= ' active';
}
elseif ($item->type == 'alias')
{
$aliasToId $item->params->get('aliasoptions');

if (count($path) > && $aliasToId == $path[count($path) - 1])
{
$class .= ' active';
}
elseif (in_array($aliasToId$path))
{
$class .= ' alias-parent-active';
}
}

if ($item->type == 'separator')
{
$class .= ' divider';
}

if ($item->deeper)
{
$class .= ' deeper';
}

if ($item->parent)
{
$class .= ' parent';
}

if (!empty($class))
{
$class ' class="' trim($class). '"';
}

echo '<li' $class '>';

// Render the menu item.
switch ($item->type) :
case 'separator':
case 'url':
case 'component':
case 'heading':
require JModuleHelper::getLayoutPath('mod_menu''default_' $item->type);
break;

default:
require JModuleHelper::getLayoutPath('mod_menu''default_url');
break;
endswitch;

// The next item is deeper.
if ($item->deeper)
{
echo '<ul class="nav-child unstyled small">';
}
elseif ($item->shallower)
{
// The next item is shallower.
echo '</li>';
echo str_repeat('</ul></li>'$item->level_diff);
}
else
{
// The next item is on the same level.
echo '</li>';
}
}
?>
</ul>
[/spoiler]

*

Оффлайн Shustry

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

*

Оффлайн Сergei

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

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

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

*

Оффлайн Shustry

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

*

Оффлайн Сergei

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


*

Оффлайн vipiusss

  • ********
  • 5844
  • [+]324 / [-]10
  • Пол: Мужской
  • Skype: renor_
    • Просмотр профиля
нет тут смайлика: убей себя об стену.
ТС, я не коем образом не про Вас, но если вас Шустрый не понимает, я точно читать не буду)))
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями