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

Приветствую тебя, уважаемый читатель блога Softodom. В это не большом посте речь пойдет о вёрстке html, а точнее о том как сделать блочный элемент div ссылкой. Для новичков в верстке эта информация может оказаться полезной, поэтому решил опубликовать её на своё блоге.

Итак, в чём, так сказать, вся соль? Всё просто, дело в том, что по правилам HTML нельзя просто так взять и сделать целый блок обычной ссылкой как например картинку img. В таких случаях первое, что приходит на ум это взять весь блок div в тег <a> и всё. Но такой подход не приносит нужных результатов и блок по прежнему не становится ссылкой как мы хотели. В чём же дело?

По правилам html нельзя сделать div ссылкой просто обернув div тегом a вот так: <a href="#"><div></div></a>
НО МОЖНО СДЕЛАТЬ ССЫЛКУ БЛОКОМ!
Как всем известно, в HTML блоки растягиваются во всю ширину родителя если иное не прописано в стилях. Так вот, стало быть надо просто положить ссылку внутрь тега див и сделать эту ссылку блочной при помощи свойства display вот так:
<a href="#"></a>

/* эту строку пишем в каскадных таблицах стилей CSS, 
что бы сделать ссылку блочным элементом */
 div a {display:block;}

Таким образом ссылка будет занимать весь блок div и блок станет полностью ссылкой!
На этом думаю всё. Вот так просто можно решить ссылочную проблему блочных элементов в HTML. Верстайте на здоровье и не забывайте, что лучше всего точно разделять стили от разметки.

Поделиться!
Tags: , , , , , ,

49.67MB | MySQL:52 | 0,277sec