Как сделать кнопку на баннере с уже имеющимся href правильно?

Question

[Виктор Таран]

<div class="add">
	<div class="bluss">
		<a href="https://naydikvartiru.ru/tgb_output/goto.php?bin=665&amp;h=084012cca93d1e0c2ef6e0d162389a44&amp;po=99" target="_blank">
			<span>
				<div style="float:left;">    
					<img src="https://naydikvartiru.ru/tgb_output/images/673782Метрополия.jpg" style="margin-right: 10px;height: 108px;width: 150px;">   
				</div>
						<div class="tgb-header">ЖК бизнес-класса «Метрополия»</div><div class="tgb-text">Жилой комплекс рядом с центром в районе м. Волгоградский пр-т. Панорамные окна, отделка MR Base. Квартиры от 8 млн руб!</div>
						<div class="tgb-price">[phone]</div>
					</span>
				</a>
			</div>
		</div>

Тут на сайте
Нужно сделать клик на телефон ;(
Насколько я понимаю это
Вынести с href + z-index + pisition
А как следствие позишена то и на адаптив медийки писать?
или можно сделать красиво?

Comments

[Alams Stoyne]

Тег
<a href="..."></a>
не может быть внутри другого тега
<a href="..."></a>

Т.е так работать не будет:

<a href="url1">
<a href="tel"></a>
</a>

Вариант менять подход к тому что будите кликать либо через JS как то так:

<div data-href="http://ya.ru">
<a href="tel:+7"></a>
</div>

$(document).on("click","[data-href]",function(e){ 
        e.preventDefault();    
        location.href = $(this).data('href');
});

[SuperToster]

Сделать можно, прежде чем заморачиваться такой вопрос - а нафига?

С точки зрения UX максимально дурацкая задача. Предполагаю кликабельный номер нужен для мобилок? Типа <a href="tel:[phone]"></a>? Это же постоянные мисс-клики раздражающие пользователя будут (т. е. вместо того, чтобы получить набор номера, пользователи будут переходить по баннеру).

Или вопрос так не стоит и работодателю надо - "сделать и всё"?

[Ankhena]

1. div внутрь span не вставляется
2. ссылка внутрь ссылки тоже

Делать как вы написали, ссылку на телефон вынести из первой - абсолютом.
Флоаты заменить на флексы.
span вообще убрать

[Ankhena]

SuperToster,

Предполагаю кликабельный номер нужен для мобилок?

Для компов тоже.
Можно и с компа позвонить.
Да и хром предлагает позвонить с мобилки при клике на телефон на десктопе, если они в одном аккаунте.

[Виктор Таран]

вопрос закрыт сделали здравый смысл возабладал

Answer 1

[Андрей Федоров]

Можно сделать, но только через js.

<a onclick="location='[ваш линк]';">
  <a href="tel:[ваш телефон]" onclick="event.stopPropagation();">[телефон]</a>
</a>

Comments

[Михаил]

ссылку в ссылку?

[Андрей Федоров]

Михаил, да, с точки зрения браузера внешний тег 'a', тот что без href, не считается ссылкой, его можно даже на 'div' поменять.

[Михаил]

Андрей Федоров, хром думает иначе

[Андрей Федоров]

Михаил, тогда я предлагаю сделать внешним div, для обычного пользователя это будет незаметно. Для доступности можно функционал area задействовать.
Как у вас выглядит вот такой пример - https://codepen.io/aliencash/pen/ZEWNOpr ?