Ссылка текст+картинка

inso · 15.02.15

Помогите пожалуйста правильно составить код для такой ссылки:

Код:

<a href>
текст1
текст2 картинка
</a>

Как бы слева блок с текст1 и текст2, а справа блок с картинкой, картинка должна быть высотой примерно равна текст1 + текст2

Пробовал разные вариации с таблицей и просто дивами, но никак не получается сделать как надо. Плюс ко всему IE вообще такую ссылку не хочет воспринимать, когда внутри таблица, либо несколько дивов.

Добавлено через 13 минут

Вот набросал в фш примерно как нужно

mike4 · 15.02.15

Наложите на все прозрачный блок-ссылку.

inso · 16.02.15

mike, можно подробнее? В сети несколько способов разных описано, ни один нормально не работает.

mike4 · 16.02.15

Вариантов действительно несколько. Прежде всего ссылку нужно сделать блоком (display: block). Далее можно использовать как абсолютное позиционирование, так и относительно. При относительном помещаете весь контент внутрь блока-ссылки. При абсолютном помещаете пустой блок-ссылку в начало блока с контентом, устанавливаете ширину, высоту, прозрачный фон и поднимаете z-index. Как-то так.

inso · 17.02.15

mike, А каким образом выравнивать содержимое так, как мне нужно? В дивах и спанах все расползается, а если внутри ссылки появляются теги table, tr или td, то IE перестает видеть ссылку. Тоже самое и с float: left

mike4 · 17.02.15

Картинку сделайте плавающей (справа). Текст снизу должен обтекать картинку или нет? Если нет, поместите текст в плавающий блок. Чтобы ничего не расползалось, блок-контейнер должен иметь достаточную ширину. В принципе вполне нормально, когда при недостаточной ширине текст и картинка выстраиваются в вертикальном порядке. Только правильную последовательность задайте, т.е. что на чем должно располагаться.

Добавлено через 6 минут
Еще при использовании плавающих блоков в конце контейнера нужно разместить пустой блок со свойством "clear: both", чтобы плавающий контент не выходил за пределы контейнера.

inso · 18.02.15

mike, спасибо, но никак не получалось заставить эксплорер видеть блок ссылку - она там расползалась, а если использовал выравнивание, то экплорер уже не отображал блок как ссылку. Помог совет от Sven'а на саппорте - добавить в headinclude <meta http-equiv="X-UA-Compatible" content="IE=edge">.

Wmboard · 19.02.15

inso написал(а):
Плюс ко всему IE вообще такую ссылку не хочет воспринимать

На осла основная часть разработчиков давно забила.
Кстати, куда вы вставляете ссылку, в форум или сайт? Ссылка должна быть только в картинке, или ссылка захватывает и то и то?

inso · 20.02.15

Veter написал(а):
На осла основная часть разработчиков давно забила.

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

Veter написал(а):
Кстати, куда вы вставляете ссылку, в форум или сайт?

На булке на вручную созданную страницу php

Veter написал(а):
Ссылка должна быть только в картинке, или ссылка захватывает и то и то?

ссылка это весь блок текст1, текст2 и картинка.

Wmboard · 20.02.15

inso написал(а):
Тем не менее часть пользователей продолжает им пользоваться, стараюсь это учитывать.

Беру Борд месячную статистику.
Explorer 11 2.6%
Explorer 8 0.4%
Explorer 10 0.4%
Explorer 9 0.3%
Explorer 6 0.1%
Explorer 7 0.1%

Уфффф.... меньше 4%

inso написал(а):
ссылка это весь блок текст1, текст2 и картинка

Ясно. Рад, что решили проблему.

Ссылка текст+картинка

inso

mike4

inso

mike4

inso

mike4

inso

Wmboard

inso

Wmboard

Поделиться страницей

Статистика форума

О нашем форуме!

Новые пользователи

Что нового?