Старый 15.02.2015, 21:19 #1 (Ссылка)
Местный
Дополнительная информация
По умолчанию

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


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

Код:

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

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

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


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

Последний раз редактировалось inso; 15.02.2015 в 21:12.
inso вне форума   Ответить с цитированиемОтветить с цитированием


Старый 15.02.2015, 23:17 #2 (Ссылка)
Местный
Дополнительная информация
По умолчанию

Наложите на все прозрачный блок-ссылку.
mike вне форума   Ответить с цитированиемОтветить с цитированием
Пользователь сказал cпасибо:
inso (16.02.2015)

Старый 16.02.2015, 13:24 #3 (Ссылка)
Местный
Дополнительная информация
По умолчанию

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

Старый 16.02.2015, 15:54 #4 (Ссылка)
Местный
Дополнительная информация
По умолчанию

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

Старый 17.02.2015, 10:09 #5 (Ссылка)
Местный
Дополнительная информация
По умолчанию

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

Старый 17.02.2015, 16:34 #6 (Ссылка)
Местный
Дополнительная информация
По умолчанию

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

Добавлено через 6 минут
Еще при использовании плавающих блоков в конце контейнера нужно разместить пустой блок со свойством "clear: both", чтобы плавающий контент не выходил за пределы контейнера.
mike вне форума   Ответить с цитированиемОтветить с цитированием
Пользователь сказал cпасибо:
inso (18.02.2015)

Старый 18.02.2015, 00:38 #7 (Ссылка)
Местный
Дополнительная информация
По умолчанию

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

Старый 19.02.2015, 23:28 #8 (Ссылка)
Администратор
Дополнительная информация
По умолчанию

Цитата:
Сообщение от inso Посмотреть сообщение
Плюс ко всему IE вообще такую ссылку не хочет воспринимать
На осла основная часть разработчиков давно забила.
Кстати, куда вы вставляете ссылку, в форум или сайт? Ссылка должна быть только в картинке, или ссылка захватывает и то и то?
Veter вне форума   Ответить с цитированиемОтветить с цитированием

Старый 20.02.2015, 11:06 #9 (Ссылка)
Местный
Дополнительная информация
По умолчанию

Цитата:
Сообщение от Veter Посмотреть сообщение
На осла основная часть разработчиков давно забила.
Тем не менее часть пользователей продолжает им пользоваться, стараюсь это учитывать.

Цитата:
Сообщение от Veter Посмотреть сообщение
Кстати, куда вы вставляете ссылку, в форум или сайт?
На булке на вручную созданную страницу php


Цитата:
Сообщение от Veter Посмотреть сообщение
Ссылка должна быть только в картинке, или ссылка захватывает и то и то?
ссылка это весь блок текст1, текст2 и картинка.
inso вне форума   Ответить с цитированиемОтветить с цитированием

Старый 20.02.2015, 23:21 #10 (Ссылка)
Администратор
Дополнительная информация
По умолчанию

Цитата:
Сообщение от 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 и картинка
Ясно. Рад, что решили проблему.
Veter вне форума   Ответить с цитированиемОтветить с цитированием

Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Trackbacks are Вкл.
Pingbacks are Вкл.
Refbacks are Вкл.


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ребята, что это за картинка? viboxjuwin Вопросы по дизайну 1 27.03.2014 18:46
Почему ссылка не делается анкором? ignasio Вопросы от новичков 11 09.12.2013 19:32
Не отображается картинка на странице tih Начинающий кодер 3 30.05.2013 23:16
Ссылка бесплатно artuan Обмен, покупка, продажа ссылок 3 16.08.2011 20:59
Полезная ссылка ДЛЯ ВСЕХ ДИЗАЙНЕРОВ и.т.п. dustindollin Web дизайн 8 07.05.2010 04:16


Текущее время: 18:57. Часовой пояс GMT +3.

Powered by vBulletin®
Copyright ©2000 - 2021, WMboard.
Перевод: zCarot
 

Форум вебмастеров

Здесь делают сайты, учатся на них зарабатывать. Ты новичок, и ничего не понимаешь в создании сайтов и в интернет заработке? Не знаешь ответа на вопрос по сайтостроению? Мучают вопросы сео оптимизации?

Не беда, присоединяйся к сообществу вебмастеров, и зарабатывай вместе с нами!