Перепишите этот код: кликабельные div - PullRequest
Новая
       5

Перепишите этот код: кликабельные div

2 голосов
/ 10 ноября 2008

Я бы хотел изменить это: 

<a href='foo'> 
    <div> Moo </div>
</a>

для соответствия стандартам (у вас не должно быть блочных элементов во встроенных элементах). Подключение javascript к div-элементам только для навигации выглядит как хак и ухудшает доступность. В этом случае мои требования касаются двух наборов границ для моих ссылок фиксированного размера, поэтому приведенный выше несовместимый код прекрасно работает после применения стилей.

Кроме того, является ли "a { display:block; }" легальным способом обойти проверку?

Ответы [ 5 ]

14 голосов
/ 10 ноября 2008

Почему бы не использовать вместо и установить display: block на обоих элементах?

Кроме того, чтобы ответить на ваш последний вопрос: я не верю, что добавление display: block; к вашему якору сделает его успешным. Валидатор проверяет, соблюдаете ли вы (X) правила HTML, а не то, как представить страницу пользователю.

3 голосов
/ 10 ноября 2008

Возможно, вы захотите поместить div вне a, если это только для целей отображения, если только важно, чтобы внешняя граница была кликабельной. Либо это: 

<div class="dbl_border_links"><a href="blah">Blah text</a></div>

или это: 

<a class="dbl_border_links" href="blah"><span>Blah text</span></a>

будет работать, и вы можете использовать что-то вроде этого: 

<style>
  .dbl_border_links, .dbl_border_links>* {
    display: block;
    border: 1px solid;
    padding: 1px;
  }
  .dbl_border_links {
    border-color: red;
  }
  .dbl_border_links > * {
    border-color: blue;
  }
</style>

для указания стилей. Лично я бы пошел с div, содержащим a, но любой подход работает.

1 голос
/ 11 ноября 2008

Во-первых, конечно, нет ничего плохого в том, чтобы дать отображение якоря: block; Я бы сказал, что это одна из наиболее распространенных вещей, которые люди делают с CSS и которые полностью соответствуют стандартам. Во-вторых, существует несколько способов достижения двойной границы элемента HTML. Во-первых, проверьте свойство "outline":

http://webdesign.about.com/od/advancedcss/a/outline_style.htm

По общему признанию, это будет работать только в более современных браузерах, но должно изящно ухудшаться, поскольку контур не занимает места на странице. Если содержимое ссылки должно быть изображением, вы можете просто дать небольшой отступ и цвет фона, а также обычную рамку (другого цвета), чтобы создать впечатление двойной рамки. Или придать изображению собственную границу. Конечно, вы также можете сделать что-то в соответствии с вашей первоначальной идеей, хотя вложите HTML-код наоборот и просто назначите разные границы для каждого элемента. Или вы можете использовать встроенный элемент внутри ссылки (например, или или что-то в этом роде), который вы также установите для отображения: block; (да, это также верно!). Удачного кодирования!

1 голос
/ 10 ноября 2008

Обычно я считаю тег <a > особым случаем для этой цели. Вы должны быть в состоянии применить это к чему угодно - это после того, как весь смысл гипертекста (<tr > приходит на ум хорошим примером). Но если вам нужно где-то передать валидатор, я понимаю.

Не могли бы вы использовать обработчик javascript onclick для div и полностью исключить привязку?

0 голосов
/ 11 ноября 2008

Если я правильно понимаю ваши намерения, вы должны поместить, как уже упоминалось, div вне якоря, и, чтобы получить то же представление, сделать якорь width:100%;height:100%. Межбраузерный пробег может варьироваться. Кроме того, вы можете полностью сбросить div и поставить якорь display:block;

Что именно вы пытаетесь сделать?

...