Div ссылкой сделать – как сделать весь блок div ссылкой. и как это будет выглядеть в css (надо для атрибута hover)

Как сделать, чтобы слой целиком был ссылкой?

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+2.0+7.0+1.0+1.0+1.0+1.0+

Задача

Сделать блочный элемент, который целиком является ссылкой на указанную страницу.

Решение

При размещении ссылки внутри слоя заданных размеров, иногда возникает задача, чтобы ссылкой был не только текст, но и сам слой. Особенно это бывает актуально при создании различных меню. Для изменения вида ссылки к селектору A в стилях следует добавить свойство display со значением block, чтобы превратить ссылку в блочный элемент. Такой элемент по умолчанию занимает всю свободную ширину внутри родителя. Также необходимо указать height: 100%, ссылка после этого будет занимать всю доступную высоту внутри слоя (пример 1).

Пример 1. Ссылка внутри слоя

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
   <title>Слой-ссылка</title>
   <style>
    .link {
     width: 300px; /* Ширина слоя */
     height: 200px; /* Высота слоя */
     background: #fc0; /* Цвет фона */
    }
    .link a {
     display: block; /* Ссылка как блочный элемент */
     text-align: center; /* Выравнивание по центру */
     height: 100%; /* Высота на весь слой */
     color: #666; /* Цвет ссылки */
    }
  </style>
 </head> 
 <body> 
  <div>
   <a href="1.html">Ссылка</a>
  </div>
 </body>
</html>

Результат примера показан на рис. 1. Обратите внимание, что курсор мыши превращается в указатель внутри слоя целиком, а не только на тексте, как это происходит с обычными ссылками.

Рис. 1. Ссылка в слое

Ссылки вокруг блоков / HTML Academy corporate blog / Habr


Можно ли оборачивать ссылкой блочные элементы?

Раньше было нельзя — это было запрещено прямо в спецификации HTML4. В то время мы больше думали про текстовые сайты, где были обычные синие ссылки.

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

Но есть нюанс. Если вы положите ссылку в ссылку, то что получится, когда вы кликнете по такому? Какая ссылка отреагирует? Непонятно.

Поэтому спецификация прямо запрещает: интерактивные элементы класть в ссылку нельзя.

<a href="">
  Ссылка
  <a href="">
    Нельзя
  </a>
</a>

А какие есть ещё интерактивные элементы, кроме ссылки? Например, с которыми можно взаимодействовать. Кнопки, поля формы и лейблы к ним, элементы audio и video, если у них включены контролы.

<a href="">
  <button>Нельзя</button>
</a>

Всё дело в интерактивности: если контролы отключены и видео с аудио играют сами по себе — значит уже можно, они стали неинтерактивными.

<a href="">
  <video>Можно</video>
  <video controls>Нельзя</audio>
</a>

А если вы зададите атрибут tabindex любому элементу, чтобы его можно было выделить с клавиатуры, то он станет интерактивным и его уже нельзя будет завернуть в ссылку.

Можно, конечно, делать трюки с позиционированием, когда вы не кладёте блок внутрь ссылки, а позиционируете ссылку поверх блока. Так можно обойти ограничение валидатора, который этого не заметит.

Но в таком случае вы всё равно можете оказаться в ситуации, когда у вас ссылка над ссылкой или другим интерактивным элементом и непонятно, на что можно кликнуть, а на что нет.

А ещё это провоцирует делать пустые, недоступные ссылки без текста внутри и тогда скринридерам непонятно куда она ведёт. Не делайте так.

<a href=""></a>
<article>
  Не надо так
</article>

Есть и другие, ещё более сложные трюки, чтобы вложить ссылки. Об этом написал Рома Комаров, почитайте, если интересно.

Запомните главное: блоки можно оборачивать в ссылки, главное, чтобы внутри не было интерактивных элементов.


Видеоверсия


Вопросы можно задавать здесь.

Как сделать, чтобы слой целиком был ссылкой?

Автор: Администратор

Просмотров: 2313

Теги: css, html, tag a

В этой статье мы расскажем о том, как сделать целый слой ссылкой, это может быть любой div(блок, другими словами).

Тэг ссылки <a>, как известно не является блочным элементом, в связи с этим невозможно сделать ссылкой какой-то слой, например прямоугольную область. А необходимость такая появляется довольно часто.

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

Но вот, если вам необходимо сделать ссылкой целый слой, тогда этот вариант не подойдет, ведь в слое может быть множество текста, изображений.

На помощь тут приходит небольшая хитрость. Для начала создадим заготовку HTML-разметку, которая будет состоять из <div> внутри которого будет помещена ссылка <a>, внутри которой будет какой-то текст:

	<div>
		<a href="/">
			Содержание слоя-ссылки
		</a>
	</div>

Следующий наш шаг, задать какие-то размеры для внешнего <div>. Для внутреннего тэга <a> зададим свойство display, со значением block, что позволит работать с ссылкой, как со слоем. По умолчанию такие слои занимают всю ширину, но не всю высоту, поэтому так же добавим свойство height, со значением 100%. Для наглядности добавим фоновый цвет ссылке.

div {
	height:300px;
	width:400px;
}
	div a {
		display:block;
		height:100%;
		background:#CC3333;
	}

Результат можно наблюдать ниже, получилась прямоугольная область-ссылка, это видно при наведении на нее(курсор меняется на указатель), и по цвету слоя-ссылки.

Можно ли оборачивать ссылкой блок?

В HTML4 ответ на этот вопрос однозначный — внутрь ссылки можно вставлять только текстовые элементы и картинки. И для простых ситуаций с этим никаких проблем нет — если нам нужно, к примеру, сделать заголовок ссылкой, то <a> мы добавляем внутрь <h2>, но никак не наоборот.

<h2><a href="1.html">Заголовок</a></h2>

При этом надо помнить, что область ссылки ограничена размером текста. <h2> элемент блочный, он занимает всю ширину области просмотра, а ссылка строчная, её размер определяется размером содержимого. Так что щелчок не по тексту, а просто по этой строке ничего не даст. Для данного примера это может и не принципиально, а вот для какого-нибудь меню, где пункты меню визуально больше текста, важно. Поэтому мы модифицируем стиль ссылки, чтобы она занимала всё пространство внутри блока.

a {
  display: block;
}

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

В более сложных и распространённых ситуациях блок представляет собой комбинацию заголовка, картинки и подписи к ней. Вспомните любой интернет-магазин с витриной товаров и вы поймёте, насколько популярны блоки, которые одновременно являются ссылками, ведь они должны вести на описание товара. Код HTML может быть примерно таким.

<div>
  <div>
    <a href="/stock/gimnasticheskiy-myach">
      <img src="/images/stock/thumb/fitbol.jpg" alt="">
    </a>
  </div>
  <div>
    <a href="/stock/gimnasticheskiy-myach">Гимнастический мяч</a>
  </div>
</div>

Таким образом, каждую часть нашего блока (картинку и название) мы оборачиваем одной и той же ссылкой и в стилях ставим ей свойство display со значением block. Тогда весь блок целиком визуально будет представлять собой одну ссылку, хотя на деле это набор ссылок.

Всё это относилось к HTML4, и на наше счастье в HTML5 ситуация поменялась. При этом, все описанные приёмы остались с нами, но и добавилось кое-что новое. Теперь мы можем внутрь ссылки вставлять блоки целиком. Вот как преобразуется наш код с учётом новых правил HTML5 и его новых элементов.

<a href="/stock/gimnasticheskiy-myach">
  <figure>
    <img src="/images/stock/thumb/fitbol.jpg">
    <figcaption>Гимнастический мяч</figcaption>
  </figure>
</a>

Код теперь выглядит нагляднее и проще.

Ещё на эту тему вы можете посмотреть видео, в котором раскрываются другие аспекты на тему ссылок и блоков.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *