Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
 
Рейтинг: Рейтинг темы: голосов - 18, средняя оценка - 4.83
aim777
19 / 19 / 12
Регистрация: 13.07.2014
Сообщений: 102
#1

Как сделать блок ссылкой? - HTML, CSS

13.07.2014, 20:37. Просмотров 2803. Ответов 15
Метки нет (Все метки)

Всем привет! Проблема простая, но почему-то не могу разобраться. Нужно сделать ссылкой блок. Когда оборачиваю его в теги <a> </a>, ссылкой становится не только сам блок, но и его содержимое. Например, заголовки внутри блока становятся ссылками. А мне нужно чтобы ссылкой был только блок. Как быть?

HTML5
1
2
3
4
5
6
<a href="">
    <div>
        <h1>Заголовок</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</a>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.07.2014, 20:37
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Как сделать блок ссылкой? (HTML, CSS):

Как сделать DIV блок ссылкой? - HTML, CSS
Как сделать DIV блок ссылкой?

Как сделать div ссылкой? - HTML, CSS
Есть код: &lt;html&gt; &lt;head&gt; &lt;style type=&quot;text/css&quot;&gt; body{margin:0px;} .cl0 {width: 1920px; height: 1080px; overflow: visible;} #bl1...

Как баннер в iframe сделать ссылкой? - HTML, CSS
Дело вот в чем. Занялся я переводом swf баннеров в формат html5, и как всегда проблемка вылезла в самом не ожидаемом месте. Не получается...

Как сделать картинку ссылкой в bootstrap - HTML, CSS
Как сделать картинку ссылкой в bootstrap?

Как пункт меню сделать ссылкой? - HTML, CSS
Страница сайта Не получается сделать корневые пункты меню ссылкой. На выпадающие пункты меню все нормально. &lt;/style&gt; &lt;/head&gt; &lt;body&gt;...

Карты. Как часть картинки сделать ссылкой - HTML, CSS
у меня есть картинка и мне надо на ней сделать 4 ссылки. я написал код но как-то не правильно задал usemap. у меня работает только первая...

15
dimon888951
15 / 15 / 4
Регистрация: 04.10.2012
Сообщений: 170
13.07.2014, 20:44 #2
По ясней опишите проблему, в блоке же есть содержимое, так чего вы хотите тогда? как это выглядит покажите
0
killlfun
102 / 102 / 36
Регистрация: 25.02.2014
Сообщений: 321
13.07.2014, 20:48 #3
aim777

HTML5
1
2
3
4
<div class="linkblock" onclick="location.href='/';">
        <h1>Заголовок</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
CSS
1
.linkblock {cursor:pointer}
0
aim777
19 / 19 / 12
Регистрация: 13.07.2014
Сообщений: 102
13.07.2014, 20:58  [ТС] #4
2killlfun
Заголовки и текст внутри блока все равно останутся ссылками

2dimon888951
Я хочу, чтобы содержимое не было ссылкой, а ссылкой была бы только область блока.

Вот примеры:

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

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

В одном изображении я обернул блок тегами <a> и содержимое стало ссылками. В другом не оборачивал. Мне надо, чтобы при клике на этот прямоугольник юзер переходил бы на страницу товара. Но мне не надо, чтобы заголовок, например, становился ссылкой.
0
killlfun
102 / 102 / 36
Регистрация: 25.02.2014
Сообщений: 321
13.07.2014, 20:59 #5
aim777, я исправил, пересмотрите.
1
aim777
19 / 19 / 12
Регистрация: 13.07.2014
Сообщений: 102
13.07.2014, 21:09  [ТС] #6
killlfun, большое спасибо) Что-то я забыл про onclick)
0
tasadarMiha
1 / 1 / 0
Регистрация: 12.07.2014
Сообщений: 53
14.07.2014, 13:41 #7
Омг, что вы творите??)) извините, но это тег а должен оборачиваться в див, а не наоборот. а проблема ваша решается просто. http://jsfiddle.net/fTVqL/
0
Qwertiy
821 / 629 / 75
Регистрация: 20.08.2013
Сообщений: 2,524
14.07.2014, 15:33 #8
Цитата Сообщение от tasadarMiha Посмотреть сообщение
Омг, что вы творите??)) извините, но это тег а должен оборачиваться в див, а не наоборот.
В html5 можно и наоборот

Добавлено через 2 минуты
Попробуй провалидировать на http://validator.w3.org/check:
HTML5
1
2
3
<!doctype html>
<title>Test</title>
<a><div>Smth</div></a>
0
tasadarMiha
1 / 1 / 0
Регистрация: 12.07.2014
Сообщений: 53
14.07.2014, 16:10 #9
то, что он проходит проверку на валидность не значит, что так делать правильно. мне вообще трудно представить код, который бы не проходил проверку на валидность в html 5. Основная проблема тут в следующем: тег а не является блочным элементом, тогда как див это блочный элемент. Оборачивая а в див мы не нарушаем логической структуры. Конечно, вы можете назначить тегу а блочное отображение, но тогда не ясно, зачем вам вообще див. Вообщем, вы просто создаёте путаницу. А на счет валидаторов, это забавные штуки, так практически ни один современный css не пройдет проверку, html пройдет даже с кучей неточностей.

Добавлено через 6 минут
Вот, кстати, Теги внутри тега a тут уже поднимался подобный вопрос, зачем вам лишние возможные неточности, если можно сделать правильно?
0
Qwertiy
821 / 629 / 75
Регистрация: 20.08.2013
Сообщений: 2,524
14.07.2014, 16:58 #10
Цитата Сообщение от tasadarMiha Посмотреть сообщение
то, что он проходит проверку на валидность не значит, что так делать правильно
Правильно в логическом смысле и правильно в формальном смысле - это не одно и то же.

Цитата Сообщение от tasadarMiha Посмотреть сообщение
мне вообще трудно представить код, который бы не проходил проверку на валидность в html 5
Достаточно в том примере заменить a на span и он станет невалидным

Цитата Сообщение от tasadarMiha Посмотреть сообщение
тег а не является блочным элементом
Вот это утверждение для html5 неверно. Тек a может являться блочным, в отличие от того же span'а.

Цитата Сообщение от tasadarMiha Посмотреть сообщение
Конечно, вы можете назначить тегу а блочное отображение, но тогда не ясно, зачем вам вообще див.
В конкретно моём примере - просто чтобы показать, что эта конструкция валидна.
В общем случае, там может быть несколько div'ов, например, для оформления карточки товара, которая вся целиком является ссылкой.

Цитата Сообщение от tasadarMiha Посмотреть сообщение
html пройдет даже с кучей неточностей
Не пройдёт. Есть куча "неточностей", а именно отклонений от xml, явно прописанных в стандарте.
Кстати, именно поэтомя я имею права не писать html, head и body, но обязан написать doctype и title.

Цитата Сообщение от tasadarMiha Посмотреть сообщение
Теги внутри тега a тут уже поднимался подобный вопрос
Информация 2010 года не слишком актуальна относительно текущего состояния html5 (который по ссылке даже не упоминается).

Добавлено через 6 минут
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link
0
tasadarMiha
1 / 1 / 0
Регистрация: 12.07.2014
Сообщений: 53
14.07.2014, 17:13 #11
Ну, тут спорить смысла явно нет, мы просто в слишком разных областях, я не имею права писать не логичный код, даже если физически могу. После меня с этим кодом будут работать не только валидадоры, но и люди. Я надеюсь, вам не придется разбираться в чужом коде, написанному по принципу: я могу так и писать, значит буду, и клал я на то что мой код вызовет кучу вопросов у других. тег а не является блочным - Тек a может являться блочным, может - не значит что он им является. Я слышал, нынче медицина позволяет мужчинам становиться женщинами, но это ведь не значит, что мужчина это женщина. Ну и согласитесь - это явно введет вас в заблуждение
0
aim777
19 / 19 / 12
Регистрация: 13.07.2014
Сообщений: 102
14.07.2014, 17:37  [ТС] #12
tasadarMiha
Омг, что вы творите??)) извините, но это тег а должен оборачиваться в див, а не наоборот.
Я ожидал, что кто-нибудь это напишет)) Я сам озадачился этим вопросом, прежде, чем создавать эту тему, и довольно много перечитал споров на эту тему на разных форумах)

В данном случае у меня только два требования к коду:
1. Он должен быть валидным (В рамках html5 такое решение валидно.)
2. Он должен корректно отображаться браузером. (С этим тоже все ок)

Поэтому такое решение меня устраивало.

Я рассматривал вариант и с размещением <a> внутри <div>, но решить проблему таким образом у меня не получилось. Потому что, даже логически, внутри блока <div> у меня нет элементов, которые являлись бы ссылками. Мне необходимо, чтобы ссылкой был именно сам блочный элемент <div>, и вот господин killlfun предложил достойное решение, которое еще и избавляет от необходимости оборачивать блок в теги <a>, за что ему респект)))
0
esculap_ra
306 / 174 / 24
Регистрация: 22.08.2010
Сообщений: 786
Записей в блоге: 1
14.07.2014, 17:55 #13
Вопрос изначально ставился "как сделать ссылкой блок", а не как организовать редирект при клике на элементы блока. Событие onclick, по сути, можно навесить на любой элемент страницы. я так создаю псевдоссылки для рефок. Вот один из примеров
HTML5
1
<strong id="hideid_3" class="hideref">ETXT</strong>
По-сути, это вообще не ссылка (имитация создается классом hideref).
Событие onclick отслеживается по всему телу, и если определяется класс hideref, то происходит сопоставление ид с реф-ссылкой и происходит переход по ней.
0
aim777
19 / 19 / 12
Регистрация: 13.07.2014
Сообщений: 102
14.07.2014, 18:16  [ТС] #14
esculap_ra
Я так понимаю, это происходит посредством js? Не покажете?
0
esculap_ra
306 / 174 / 24
Регистрация: 22.08.2010
Сообщений: 786
Записей в блоге: 1
14.07.2014, 22:14 #15
Ну в принципе могу показать. В архиве скрипты обработчика и собственно данных. Правда там каждый ид псевдоссылки отслеживается, но можно доработать и нацепить отслеживание просто на body. Тогда в функции необходимо ввести сравнение класса.
Сейчас такой вариант остался у меня только на 1 сайте - тут можно увидеть как работает http://moneywood.org/text-sale/9-etxt.html
Вернее, я не использую больше массив ссылок, а просто шифрую их и присваиваю ид
1
Вложения
Тип файла: zip js.zip (1.1 Кб, 8 просмотров)
14.07.2014, 22:14
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.07.2014, 22:14
Привет! Вот еще темы с ответами:

Как сделать всю площадь кнопки меню ссылкой? - HTML, CSS
Как сделать всю площадь кнопки меню ссылчной, если она не полностью заключена в тег &quot;а&quot;? Пытался сделать элемент а блочным и дать ему...

Как сделать под ссылкой пунктирную линию зеленого цвета? - HTML, CSS
Привет всем, как мне можно сделать под текстом ссылки пунктирную линию зеленого цвета, если это возможно и расстояние между ссылкой и...

Как на надпись ссылкой при наведении курсором сделать чтобы появлялось подчеркивание? - HTML, CSS
Как на надпись ссылкой при наведении курсором сделать чтобы появлялось подчеркивание и одновременно менялся цвет текста? Не очень понимаю...

Ребята, помогите, как сделать DIV (меняющая картинка при наведении) ссылкой!? - HTML, CSS
Ребята, помогите, как сделать DIV (меняющая картинка при наведении) ссылкой!? вот код: &lt;style type=&quot;text/css&quot;&gt; div.kartinka { ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Рейтинг@Mail.ru