Приветствую тебя, уважаемый читатель блога 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. Верстайте на здоровье и не забывайте, что лучше всего точно разделять стили от разметки.