Как сделать блок div ссылкой

Как сделать блок div ссылкой

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 2.0+ 7.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

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

Решение

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Блок div как ссылка, как сделать div ссылкой такого рода вопросы как оказалось очень часто ищут, но не могут найти. Этот маленький урок предназначен для тех кто искал искал, но не нашел. Решение как всегда оказалось очень простым, для этого достаточно добавить событие onclick прописать location.href и добавить ссылку.

8 комментариев на «“Блок div как ссылка”»

Не работает Ваша конструкция, Вы ее проверяли перед публикацией?

Я не знаю как у Вас работает? Пробовал два варианта:
1)

Мой заголовок

И ничего не работает Мой заголовок не становится ссылкой…

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

Украинский борщ со свеклой

у меня как не работало так и не работает….По-поводу Вашей ссылки на рабочий пример…я вообще не пойму что я должен извлечь из этого? Вы мне объясните помимо конструкции

Читайте также:  Где находится корзина на компьютере

Мой заголовок

я должен еще применять какой то код или должно работать и так?

Ваша код работает, что вам не понятно?
Украинский борщ со свеклой

Чтобы убедиться, что все работает создайте файл с расширением Html и добавьте следующий код

ссылку на сайт можно?

У вас в коде ошибка. Проверьте все ковычки!

Как по уму сделать див ссылкой?
В моем случае я покрываю весь див прозрачным слоем . Это вообще корректно? А если в этом блоке "про.

  • Вопрос задан более трёх лет назад
  • 1870 просмотров

Может быть принято за кликджекинг.
Сделайте так:

минусы:
1. Не индексируется ПС, ну или как минимум плохо индексируется.
2. Не сохраняет в истории страниц текущую страницу. Чтобы работала кнопка "назад" в браузере, нужно усложнить js-код.

Внутренюю ссылку размещаем так:

Андрей Федоров, "Если мне не нравится, что купленный батон хлеба криво испечен — надо встать у конвейера на хлебзаводе? У DVD хреновые мастеринг и печать — устроиться на завод специалистом по репликации? Если хирург дерьмово провел операцию — взять скальпель и поковыряться в себе самостоятельно?" (с) Номад.

А вообще коммент год назад дан. Забудьте о всяких onmousedown и onclick, выносите все скрипты в отдельный js-файл в листенеры.

В примере нужно просто обернуть дивку в тег

Ссылка на основную публикацию
Как поставить старую версию скайпа
Программа Skype, как и любой другой активно развивающийся софт, постоянно обновляется. Однако не всегда новые версии выглядят и работают лучше...
Как повернуть диаграмму на 90 градусов
Научимся вращать (поворачивать) график функции относительно начала координат. Для примера используем график функции y=x*sin(10*x). Координаты (x'; y') в результате поворота...
Как повернуть купольную камеру видеонаблюдения
Страница 12 5 Регулировка положения видеокамеры Положение купольной видеокамеры можно регулировать по двум осям. Следя за изображением на мониторе, отрегулируйте...
Как поставить фотографию на контакт в андроид
На любом смартфоне реализована возможность установки изображения на телефонный контакт. Оно будет отображаться при поступлении входящих звонков от этого контакта...
Adblock detector