Riscrivi questo codice: div selezionabili

Question

Vorrei cambiare questo:

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

essere conforme agli standard (non dovresti avere elementi a blocchi in elementi incorporati). Cablare javascript ai div solo per la navigazione sembra un hack e degrada l'accessibilità. In questo caso, i miei requisiti sono per 2 set di bordi sui miei collegamenti a dimensione fissa, quindi il codice non conforme sopra funziona perfettamente dopo aver applicato gli stili.

Inoltre, è " a { display:block; } " un modo legale per aggirare la convalida?

Answer 1

Perché non usare un < span > anziché un < div > e imposta display: block su entrambi gli elementi?

Inoltre, per rispondere a quest'ultima domanda: non credo che l'aggiunta di display: block; all'ancora gli consentirà di superare la convalida. Il validatore verifica se stai seguendo (X) regole HTML, non come presentare la pagina all'utente.

Answer 2

Puoi considerare di mettere div fuori da a se è solo a scopo di visualizzazione, a meno che non sia importante che il bordo esterno sia cliccabile. O questo:

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

o questo:

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

funzionerà e puoi usare qualcosa del genere:

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

per specificare gli stili. Personalmente andrei con il <=> contenente il <=> ma entrambi gli approcci funzionano.

Answer 3

Normalmente considero il tag <a > un caso speciale per questo scopo. Dovresti essere in grado di applicarlo a qualsiasi cosa - è dopo tutto il punto dell'ipertesto (<tr > mi viene in mente un buon esempio). Ma se devi passare un validatore da qualche parte, ho capito.

Potresti usare un gestore javascript onclick per il div ed eliminare completamente l'ancora?

Answer 4

In primo luogo, non c'è sicuramente nulla di male nel dare un display di ancoraggio: block; Direi che è una delle cose più comuni che le persone fanno con i CSS ed è perfettamente conforme agli standard. In secondo luogo, esistono diversi modi per ottenere un doppio bordo su un elemento HTML. Per prima cosa, controlla & Quot; outline & Quot; proprietà:

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

Certo, funzionerà solo con i browser più moderni, ma dovrebbe degradarsi con grazia poiché il contorno non occupa spazio nella pagina. Se il contenuto del collegamento deve essere un'immagine, puoi semplicemente dare & Lt; a & Gt; una piccola imbottitura e un colore di sfondo e un bordo normale (in un altro colore) per creare l'impressione di un doppio bordo. O dai all'immagine un bordo a parte. Ovviamente puoi anche fare qualcosa in linea con la tua idea originale, anche se annidando il tuo HTML al contrario, e semplicemente assegnando un bordo diverso a ciascun elemento. Oppure puoi usare un elemento inline all'interno del link (come un & Lt; span & Gt; oppure un & Lt; em & Gt; o qualcosa) che imposti anche per visualizzare: block; (sì, anche questo è valido!). Buona programmazione!

Answer 5

Se capisco correttamente le tue intenzioni, dovresti posizionare, come già accennato, il div all'esterno dell'ancora e, per ottenere la stessa presentazione, creare l'ancora width:100%;height:100%. Il chilometraggio tra browser diversi può variare. Inoltre, potresti scaricare del tutto il div e dare l'ancoraggio display:block;

Cosa stai esattamente cercando di fare?