Как сделать блок ссылкой
Можно ли оборачивать ссылкой блок?
В HTML4 ответ на этот вопрос однозначный — внутрь ссылки можно вставлять только текстовые элементы и картинки. И для простых ситуаций с этим никаких проблем нет — если нам нужно, к примеру, сделать заголовок ссылкой, то мы добавляем внутрь
, но никак не наоборот.
При этом надо помнить, что область ссылки ограничена размером текста.
элемент блочный, он занимает всю ширину области просмотра, а ссылка строчная, её размер определяется размером содержимого. Так что щелчок не по тексту, а просто по этой строке ничего не даст. Для данного примера это может и не принципиально, а вот для какого-нибудь меню, где пункты меню визуально больше текста, важно. Поэтому мы модифицируем стиль ссылки, чтобы она занимала всё пространство внутри блока.
Вот теперь размер ссылки равен размеру блока и щелчок по любому месту блока воспринимается как переход по ссылке.
В более сложных и распространённых ситуациях блок представляет собой комбинацию заголовка, картинки и подписи к ней. Вспомните любой интернет-магазин с витриной товаров и вы поймёте, насколько популярны блоки, которые одновременно являются ссылками, ведь они должны вести на описание товара. Код HTML может быть примерно таким.
Всё это относилось к HTML4, и на наше счастье в HTML5 ситуация поменялась. При этом, все описанные приёмы остались с нами, но и добавилось кое-что новое. Теперь мы можем внутрь ссылки вставлять блоки целиком. Вот как преобразуется наш код с учётом новых правил HTML5 и его новых элементов.
Код теперь выглядит нагляднее и проще.
Ещё на эту тему вы можете посмотреть видео, в котором раскрываются другие аспекты на тему ссылок и блоков.
Ссылки в CSS
На этой странице вы найдете примеры по изменению HTML-ссылок при помощи CSS, который позволяет их делать ссылками-блоками, ссылками-иконками, без подчеркивания, с закругленными углами, изменять между ними расстояние и многое другое. В дальнейшем на основе этих примеров можно создавать различные варианты навигационных меню для сайта.
Прежде чем вы начнете изучение примеров, хочу сделать небольшое пояснение. Во всех примерах, для большей наглядности, будет использован псевдокласс CSS :hover, который применяется для изменения стилей ссылок при наведении на них курсора мыши. Надо сказать, что подобная практика является обычным явлением и в той или иной степени применяется практически на всех сайтах интернета.
Ссылки без подчеркивания и с подчеркиванием
В этом примере мы уберем подчеркивание у ссылок, а потом будем добавлять или убирать при наведении курсора мыши.
Пример HTML и CSS: как убрать и добавить подчеркивание у ссылок
Описание примера
Изменение стиля подчеркивания ссылок и расстояния от подчеркивания до текста
Изначально подчеркивание у ссылок — это сплошная тонкая линия, почти вплотную прижатая к тексту. И в большинстве случаев такого варианта вполне достаточно. Однако иногда дизайн требует, чтобы ссылки подчеркивались не сплошной, а, например, пунктирной линией, или чтобы расстояние от подчеркивания до ссылок было больше стандартного, или само подчеркивание было более жирным. А иногда нужно сделать вообще какое-нибудь экзотическое подчеркивание, например волнистой или разноцветной линией. Все эти варианты и будут рассмотрены в данном примере.
Пример HTML и CSS: пунктирное подчеркивание ссылок
Описание примера
Ссылки-блоки
Очень часто для создания меню требуется сделать не просто текстовые ссылки, а ссылки-блоки, у которых активной областью будет как сам текст, так и определенная зона вокруг него.
Пример HTML и CSS: делаем ссылки-блоки
Описание примера
Ссылки с рамками под курсором мыши
В этом примере мы сделаем ссылки с рамками, которые будут у них появляться в момент наведения курсора мыши. В общем-то, в этом нет ничего сложного, но есть один маленький нюанс.
Пример HTML и CSS: делаем ссылки с рамками при наведении курсора мыши
Описание примера
Вместо того чтобы делать цвет рамок под фон страницы, ему можно было бы присвоить значение transparent и сделать прозрачным, но, как я уже говорил, IE6 неправильно его обрабатывает.
Трехмерные ссылки
В этом примере мы сделаем трехмерные ссылки, которые будут походить на кнопки. Точнее ссылки будут не трехмерные, а псевдотрехмерные, конечно.
Пример HTML и CSS: создание трехмерных ссылок
Описание примера
Ссылки с иконками
В этом примере мы сделаем ссылки с иконками, которые будут содержать не только изображения этих иконок, но и текст под ними. Однако в дальнейшем вы легко сможете их изменить и оставить, например, только иконки.
Перед началом работ подготовим несколько изображений иконок, причем в двух комплектах — для обычных ссылок и ссылок под курсором мыши. Второй комплект должен внешне отличаться от первого, у нас оно выражается в цветовой палитре.
Пример HTML и CSS: делаем ссылки с иконками
Описание примера
IE6 придется немного «пролечить»:
Если вам нужны ссылки вообще без текста, а только с иконками, то можно поступить так. Убрать у ссылок все внутренние отступы и минимальную ширину. Задать им явную ширину и высоту равную размеру иконок.
Закругленные углы ссылок
В данном примере мы закруглим углы у ссылок с помощь одного из способов закругления углов, описанном в соседнем подразделе. Вариант с применением CSS 3 рассматривать не будем, так как там все очень просто, а лучше сделаем закругления с использованием изображений.
Для этого сначала вырежем несколько заготовок картинок в двух комплектах — для обычных ссылок и ссылок под курсором. У нас оно будут отличаться наличием/отсутствием тени у изображений.
Пример HTML и CSS: ссылки с закругленными углами
Описание примера
Останавливаться на самой технологии закругления не будем, если необходимо, то прочитаете о ней в соответствующем разделе сайта.
Для IE6 и IE7 подключаем дополнительные стили с помощью условных комментариев, но сам CSS-код немного изменяем и делаем его отличным от того, который используется в способах закругления углов:
Закругленные углы ссылок (вариант два)
Рассмотрим еще один пример закругления углов ссылок, но уже с использованием четырех отдельных изображений-уголков.
Пример HTML и CSS: ссылки с закругленными углами (второй вариант)
Описание примера
Здесь тоже не будем говорить о самом закруглении, обозначим только отличительные моменты.
Как сделать весь блок div ссылкой?
Как сделать DIV блок ссылкой?
Как сделать DIV блок ссылкой?
Ребята, помогите, как сделать DIV (меняющая картинка при наведении) ссылкой!?
Ребята, помогите, как сделать DIV (меняющая картинка при наведении) ссылкой!? вот код: 4
Ловить событие клика + в CSS сделать нужный цвет текста, курсор и т.п.
Решение
| Комментарий модератора | ||
| ||
Решение
div блок не желает становиться ссылкой
Всем доброго времени суток. Прошу особо не пинать и тряпками не гнать за немного странный вопрос.
Как сделать адаптивный дизайн div со скроллингом на весь экран?
Подскажите пожалуста как можно сделать вывод текста в div со скроллингом на весь экран с.
Ссылкой которая раскрывает
Сделать определенный
[WP] Сделать блок ссылкой
Добрый день, проблема с кодом шаблона WordPress. Прописана такая часть кода:
Как сделать блок ссылкой?
Как сделать DIV блок ссылкой?
Как сделать DIV блок ссылкой?
Как сделать весь блок div ссылкой?
Добрый день! Посоветуйте, пожалуйста, как сделать блок div ссылкой?
Как баннер в iframe сделать ссылкой?
Дело вот в чем. Занялся я переводом swf баннеров в формат html5, и как всегда проблемка вылезла в.
2killlfun
Заголовки и текст внутри блока все равно останутся ссылками 
2dimon888951
Я хочу, чтобы содержимое не было ссылкой, а ссылкой была бы только область блока.
В html5 можно и наоборот 
Добавлено через 2 минуты
Попробуй провалидировать на http://validator.w3.org/check:
то, что он проходит проверку на валидность не значит, что так делать правильно. мне вообще трудно представить код, который бы не проходил проверку на валидность в html 5. Основная проблема тут в следующем: тег а не является блочным элементом, тогда как див это блочный элемент. Оборачивая а в див мы не нарушаем логической структуры. Конечно, вы можете назначить тегу а блочное отображение, но тогда не ясно, зачем вам вообще див. Вообщем, вы просто создаёте путаницу. А на счет валидаторов, это забавные штуки, так практически ни один современный css не пройдет проверку, html пройдет даже с кучей неточностей.
Добавлено через 6 минут
Вот, кстати, Теги внутри тега a тут уже поднимался подобный вопрос, зачем вам лишние возможные неточности, если можно сделать правильно?
Достаточно в том примере заменить a на span и он станет невалидным
Вот это утверждение для html5 неверно. Тек a может являться блочным, в отличие от того же span ‘а.
Не пройдёт. Есть куча «неточностей», а именно отклонений от xml, явно прописанных в стандарте.
Кстати, именно поэтомя я имею права не писать html, head и body, но обязан написать doctype и title.
Информация 2010 года не слишком актуальна относительно текущего состояния html5 (который по ссылке даже не упоминается).
2.7. CSS-ссылки
CSS-ссылки содержат свойства, которые отвечают за внешний вид гипертекстовых ссылок HTML-документа. Ссылки представляют собой основной способ навигации по сайту, поэтому применение CSS-стилей для оформления улучшит их визуальное восприятие.
Оформление гипертекстовых ссылок
1. Псевдоклассы состояний гипертекстовых ссылок
Большинство браузеров выделяют четыре основных состояния гиперссылок, каждому из которых соответствует свой псевдокласс селектора:
Используя псевдоклассы для форматирования каждого состояния ссылок, можно дать пользователям подсказки, по каким ссылкам он уже переходил, а по каким — ещё нет, например:
Форматировать ссылки нужно в указанной последовательности, в противном случае состояние стилей перестанет работать (в силу механизма каскадности).
2. Выборка отдельных ссылок
Для стилизации отдельных ссылок нужно задать им стилевой класс, после чего можно будет менять внешний вид выбранных ссылок:
3. Подчеркивание ссылок
Добавление подчеркивания только при наведении на ссылку:
Внешний вид нижней границы ссылки:
4. Изображения для ссылок
Если нужно, чтобы значок автоматически добавился ко всем ссылкам, содержащим документы одного формата, можно воспользоваться следующей конструкцией:
5. Использование фонового изображения
Можно преобразовать внешний вид ссылки, добавив в качестве нижней границы фоновое изображение: