Ломается блок внутри a, что делать?

Question

[Григорий]

Добрый всем день! Простая верстка:

<a>
    <div></div>
</a>

То есть теперь нажатие на блок - переход по ссылке. Но если внутри блока div поставить еще одну простую ссылку, то происходит непонятное: первый тег a на этом месте закрывается и для дальнейших элементов не применяются css стили.

Вот F12: после ul ссылка сама закрылась.


У кого-то было такое? Как побороть?

UPD: знаю, что можно сделать без тега a, переход с помощью js. Но это крайний случай.

Answer 1

[Юрий Лобанов]

Раньше и блок в ссылку нельзя было пихать, теперь можно. Но ссылку в ссылку вкладывать нельзя. Что хотите сделать? Наверняка есть другое решение.

Comments

[Григорий]

Хочу осуществить переход по ссылке при нажатии на весь блок без жс.

[Юрий Лобанов]

@grigor7 так а зачем Вам для этого вложенная ссылка? Просто вложите блок в ссылку.

[Юрий Лобанов]

@grigor7 или переопределите ссылку, используя старый добрый способ display:block и обойдетесь вообще без вложений.

[Григорий]

@iiil контент в блоках разный, там иногда и ссылки есть.

[Григорий]

@iiil еще можно вас как опытного разработчика спросить немного на другую тему: грамотно ли использовать onclick? Заранее благодарен!

[Юрий Лобанов]

@grigor7 Спасибо за доверие, но я не настолько грамотный. Что Вы имеете в виду под грамотно? Использовать js вместо обычной ссылки?

[Александр Зачиналов]

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

[Александр Зачиналов]

в этом нет ничего страшного, очень редкий проект сейчас не использует js

[Евгений Петров]

@SanDiesel навигация по JS? Не советуйте кривых решений.

[Александр Зачиналов]

а что есть другой выход? Пусть тогда верстает разумней, впихивать одну ссылку в другую с таким же путем...зачем?

[Евгений Петров]

@SanDiesel безусловно есть.
Как реализовать правильно подобный интерфейс?

[Александр Зачиналов]

там в двух примерах нет ссылок в ссылке - вот так и нужно делать

[Юрий Лобанов]

@Petroveg насколько понял я, систему тут примерно следующая. есть блок, например статья, или пост как ВКонтакте. Нужна и одновременно возможность работы со статьей — переход по ссылкам внутри статьи, выделение текста и прочее, и возможность открыть статью в отдельном окне. По мне так тут без js никак не справиться. Я могу и ошибаться, но я бы сделал клик по блоку и соответственно переход по data-href.

[Евгений Петров]

@SanDiesel и не может быть. Там несколько ссылок поверх основной ссылки. Так и нужно решать такие задачи.

[Евгений Петров]

@iiil или просто ссылка, поверх которой находится текст с другими ссылками.

[Юрий Лобанов]

@Petroveg если не забуду — вечером попробую разные варианты )

[Григорий]

@iiil Вы правильно поняли систему :)
@SanDiesel я тоже использую js в проекте, но интересовался, насколько корректно будет его использовать в данном случае, ведь основной функционал должен быть доступен и без js.

Всем спасибо за ответы!

Answer 2

[Максим Соловьёв]

получается, что линк в линке

<a href="/pam">
<a href="/pampam"></a>
</a>

Это неправильно. Парсер считает, что вы закрыли тэг и получилось:
<a href="/pam"><a href="/pampam"></a>

Comments

[Григорий]

Вот именно. Возможно решить? JS для ссылки не хочу.

[Максим Соловьёв]

Невозможно.

[Максим Соловьёв]

И так делать неправильно. Ищите другие решения.

[Григорий]

Жалко. То есть сейчас нигде блоки в ссылку не оборачивают?

[Максим Соловьёв]

дело не в том, что вы обернули блок в ссылку, а в том, что вы обернули ссылку в ссылку.

[Григорий]

Спасибо, понял.