Reescrever este código: divs clicáveis

Question

Eu gostaria de mudar isso:

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

para ser compatível com as normas (você não deve ter elementos de bloco em elementos inline). Fiação javascript para os divs apenas para navegação parece ser uma acessibilidade hack and degrada .. Neste caso, as minhas necessidades são para 2 conjuntos de fronteira com os meus links de dimensão fixa, de modo que o código acima não conforme funciona perfeitamente após a aplicação de estilos.

Além disso, é "a { display:block; }" uma forma legal de contornar a validação?

Answer 1

Por que não usar um em vez de um

e set display:? Bloco em ambos os elementos

Além disso, para responder à sua segunda pergunta: Eu não acredito que a adição de display: block; a sua âncora irá torná-lo passar na validação. As verificações de validação para ver se você está seguindo (X) HTML regras, não como apresentar a página para o usuário.

Answer 2

Você pode querer considerar colocar o div fora do a se é apenas para fins de exibição, a menos que seja importante que a borda externa ser clicáveis. Ou este:

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

ou este:

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

vai funcionar e você pode usar algo como isto:

<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>

para especificar os estilos. Pessoalmente, eu iria com o div contendo o a mas ou obras de abordagem.

Answer 3

Eu normalmente considerar a tag <a > ser um caso especial para esta finalidade. Você deve ser capaz de aplicar isso a apenas sobre nada- é após tipo de todo o ponto de hipertexto (<tr > vem à mente um bom exemplo). Mas se você tem que passar por um validador em algum lugar eu entendo.

Você pode usar um manipulador de javascript onclick para o div, e eliminar a âncora inteiramente?

Answer 4

Em primeiro lugar, há certamente nada de errado em dar um display âncora: block; Eu diria que é uma das coisas mais comuns que as pessoas fazem com CSS e é perfeitamente compatível com os padrões. Em segundo lugar, há uma série de maneiras para alcançar uma margem dupla em um elemento HTML. Por um lado, verificar o "esboço" de propriedade:

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

Na verdade, isso só funcionará nos navegadores mais modernos, mas deve degradar graciosamente quanto o contorno não ocupa qualquer espaço na página. Se o conteúdo do link é para ser uma imagem, você pode simplesmente dar o Com uma cobertura e uma cor de fundo, bem como uma borda normal (em outra cor) para criar a impressão de uma margem dupla. Ou dar a imagem de uma borda de seu próprio. Claro que você também pode fazer algo ao longo das linhas de sua idéia original, embora nidificação seu HTML o contrário, e simplesmente atribuir uma fronteira diferente para cada elemento. Ou você pode usar um elemento inline dentro do link (como um ou um ou algo assim) que você também configurado para display: block; (Sim, isso também é válido!). Feliz codificação!

Answer 5

Se bem entendi suas intenções, você deve colocar, como já mencionado, a div fora da âncora, e, para obter a mesma apresentação, fazer a width:100%;height:100% âncora. milage Cross Browser pode variar. Além disso, você pode despejar o div por completo e dar o display:block; âncora

O que você está exatamente tentando fazer?