Картинка вместо пункта меню

  • Решено booggyman

    (@booggyman)


    11 лет, 4 месяца назад

    Добрый день, коллеги!

    В очередной раз вынужден обратиться с проблемой, так как вдоволь с ней уже намучился.

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

    Собственно код css для пункта меню таков:

    #access .menu-bg1 a, #access .menu-bg1 a:focus, #access .menu-bg1 a:hover {
background-repeat:no-repeat;
background-position:0.5em 0.5em;
padding:47px 0 0 135px;
width: 100%;
background-image:url('/logo-no.png');
bottom: 55px;
position: relative;
}

    Используемая тема находится здесь.

Просмотр 2 ответов — с 1 по 2 (всего 2)
  • 1596754as98

    (@adminstrelok)

    11 лет, 4 месяца назад

    Судя по скриншоту картинка, используемая вместо пункта меню просто напросто очень большая и не умещается в строку меню. Пробуйте предварительно уменьшать картинку в графическом редакторе до оптимального размера. Они вообще должны быть очень маленькие — 48х48 или 64х64 или что то около того, что зависит от конкретной темы. И желательно, в зависимости от дизайна сайта, чтобы это были рисунки формата PNG на прозрачном фоне.

    Автор booggyman

    (@booggyman)

    11 лет, 4 месяца назад

    На самом деле я решил эту проблему по другому, картинка мне нужна именно такого размера.

    #access .menu-bg1 a, #access .menu-bg1 a:focus {
	background-repeat:no-repeat;
	background-position:0.5em 0.5em;
	padding:140px 0 0 65px;
	background-image:url('/logo-no.png');
	bottom: -75px;
	position: absolute;
	overflow: hidden;
	height: 0;
	right: 30px;
}

    То есть я присвоил этому элементу значение position: absolute; и спозиционировал ее так как мне нужно.
    Возможно, не самое изящное решение, но пока другого я не придумал.

Просмотр 2 ответов — с 1 по 2 (всего 2)
  • Тема «Картинка вместо пункта меню» закрыта для новых ответов.