Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   А можно ли так верстать? (https://javascript.ru/forum/xhtml-html-css/81899-mozhno-li-tak-verstat.html)

Сергей Ракипов 11.02.2021 11:34

А можно ли так верстать?
 
<a href="https://yandex.ru/">
    <div>Тут див с какими то размерами фото и текстом. И возможно еще какой то еще div а может даже два</div>
</a>


То есть блок обернуть в ссылку.
Я просто слышал что лучше так не делать.

voraa 11.02.2021 11:47

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

Сергей Ракипов 11.02.2021 12:05

Цитата:

Сообщение от voraa (Сообщение 533735)
Тут проблема в оформлении.
Надо оформить так, что бы пользователь понимал, что все это одна ссылка и кликать можно по чему угодно, если надо перейти, и что это не просто какие то поясняющие тексты, а именно ссылки и что просто так по ним кликать не надо.

Я больше спрашивал с точки зрения верстки, что то из серии а если такие рекомендации так не делать.
То что пользователь поймет это согласен.

Aetae 11.02.2021 12:13

<a> - inline-block.
block можно класть в inline-block.
Остальное вопрос конкретных гайдов и подходов.

Сергей Ракипов 11.02.2021 12:23

Aetae,
То есть ссылки нужно сделать класс, где эту ссылку обозначить как inline-block

Если да а где это описано?

voraa 11.02.2021 12:56

Цитата:

Сообщение от Сергей Ракипов
То есть ссылки нужно сделать класс, где эту ссылку обозначить как inline-block

Если нужен inline-block, то да. А так любой - ограничений нет

Aetae 11.02.2021 13:56

Цитата:

Сообщение от Сергей Ракипов (Сообщение 533738)
Aetae,
То есть ссылки нужно сделать класс, где эту ссылку обозначить как inline-block

Нет. <a> - inline-block по умолчанию. В этом и суть. Нельзя класть блоки в inline по умолчанию(даже если переопределить классом).

voraa 11.02.2021 15:12

Цитата:

Сообщение от Aetae
<a> - inline-block по умолчанию. В этом и суть. Нельзя класть блоки в inline по умолчанию(даже если переопределить классом).

<a> - inline по умолчанию.
Класть то можно. Получается не так, как хотелось бы
А вот если <a> поставить inline-block, то все как надо
<body>
<a id=adef href="https://yandex.ru/">
    <div style="position:relative;width:300px;height:200px;border:1px solid red;background:#ffccff">
    Тут див с какими то размерами фото и текстом. И возможно еще какой то еще div а может даже два
    </div>
    текст внутри a
</a>
<span>текст вне a</span>
<p></p>

<a id=ainbl href="https://yandex.ru/"style="display:inline-block;background:#ccffff">
    <div style="position:relative;width:300px;height:200px;border:1px solid red;">
    Тут див с какими то размерами фото и текстом. И возможно еще какой то еще div а может даже два
    </div>
    текст внутри a
</a>
<span>текст вне a</span>
</body>

Aetae 11.02.2021 20:12

А и правда, охренеть. Пора мне на пенсию, видать.


Часовой пояс GMT +3, время: 14:45.