Reescribe este código: divs seleccionables

Question

Me gustaría cambiar esto:

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

para cumplir con los estándares (no se supone que tenga elementos de bloque en elementos en línea). El cableado de JavaScript a los divs solo para la navegación parece un truco y degrada la accesibilidad. En este caso, mis requisitos son para 2 conjuntos de bordes en mis enlaces de dimensión fija, por lo que el código no compatible anterior funciona perfectamente después de aplicar estilos.

Además, es " a { display:block; } " ¿Una forma legal de eludir la validación?

Answer 1

¿Por qué no utilizar un < span > en lugar de un < div > y establecer display: block en ambos elementos?

Además, para responder a su última pregunta: no creo que agregar display: block; a su ancla lo haga pasar la validación. El validador verifica si está siguiendo las reglas (X) HTML, no cómo presentar la página al usuario.

Answer 2

Puede considerar colocar el div fuera del a si es solo para fines de visualización, a menos que sea importante que se pueda hacer clic en el borde exterior. O esto:

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

o esto:

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

funcionará y puede usar algo como esto:

<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 los estilos. Personalmente, iría con el <=> que contiene el <=> pero cualquiera de los enfoques funciona.

Answer 3

Normalmente considero que la etiqueta <a > es un caso especial para este propósito. Debería poder aplicar eso a casi cualquier cosa; es después de todo el punto del hipertexto (<tr > me viene a la mente un buen ejemplo). Pero si tiene que pasar un validador en algún lugar, lo entiendo.

¿Podría usar un controlador javascript onclick para el div y eliminar el ancla por completo?

Answer 4

En primer lugar, ciertamente no hay nada de malo en dar una pantalla de anclaje: bloque; Yo diría que es una de las cosas más comunes que las personas hacen con CSS y cumple perfectamente con los estándares. En segundo lugar, hay varias formas de lograr un doble borde en un elemento HTML. Por un lado, mira el & Quot; esquema & Quot; propiedad:

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

Es cierto que esto solo funcionará en los navegadores más modernos, pero debería degradarse con gracia ya que el esquema no ocupa espacio en la página. Si el contenido del enlace debe ser una imagen, simplemente puede dar & Lt; a & Gt; un poco de relleno y un color de fondo, así como un borde normal (en otro color) para crear la impresión de un borde doble. O dele a la imagen un borde propio. Por supuesto, también puede hacer algo en la línea de su idea original, anidando su HTML al revés y simplemente asignando un borde diferente a cada elemento. O puede usar un elemento en línea dentro del enlace (como & Lt; span & Gt; o & Lt; em & Gt; o algo) que también configuró para mostrar: block; (sí, esto también es válido!). ¡Feliz codificación!

Answer 5

Si entiendo correctamente sus intenciones, debe colocar, como ya se mencionó, el div fuera del ancla y, para obtener la misma presentación, hacer el ancla width:100%;height:100%. El navegador cruzado puede variar. Además, puede volcar el div por completo y dar el ancla display:block;

¿Qué estás tratando de hacer exactamente?