elemento BLOCK dentro ad uno INLINE: e' tanto grave?

[dogeht]

finora ho usato blocks dentro ad inlines senza ascoltare i consigli del validatore, ma volevo chiedere consiglio anche a voi: e' così grave il mio comportamento? puo' portare ad errori di visualizzazione della pagina?

solitamente uso questo sistema per creare dei bei riquadri cliccabili e fare in modo che l'hover funzioni sia su FF che su IE. esempio:

<a href='miolink'>
    <div>
        <h3>salve a tutti!</h3>
        ciao questo e' un riquadro cliccabile per intero, che si evidenzia sia su FF che IE
    </div>
</a>

dite la vostra

[ResianTaxidrive]

Beh puoi sempre dichiarare :

a{
display:block;
}

e penso passi la validazione.

[Mich_]

elemento BLOCK dentro ad uno INLINE: e' tanto grave?

Direi di si`: e` come mettere una scatola di ferro dentro una di carta velina, e pretendere che alzando la velina questa non si rompa.
Poi l'effetto pratico dipende dai browser: in qualche caso puo` essere che il browser trasforma l'inline in blocco, in altri che qualccosa si rompe: ed in tal caso la figuraccia ce la fa il programmatore, non il browser.

Comunque la cosa fondamentale e` usare correttamente la semantica: nel tuo esempio ci sono vari errori:
- un <div> dentro un <a>
- un <hX> usato per formattare (cosi` sembra)

La soluzione corretta ideale (XHTML Strict) sarebbe:

HTML:
<div id="LinkBlocco" href="miolink">
  

salve a tutti
  ciao questo e' un riquadro cliccabile per intero, che si evidenzia sia su FF che IE</p>
</div>

Chiaramente questo funziona solo nei browser recenti seri (devono supportare XHTML Strict), e fallisce in quelli piu` usati.


In alternativa si puo` fare:

HTML:
<div id="BloccoLink"><a href="miolink">
 salve a tutti
  <span>ciao questo e' un riquadro cliccabile per intero, che si evidenzia sia su FF che IE</span>
</a></div>

CSS:
#BloccoLink {
  ...
}
#BloccoLink a {
  display: block;
  width: 100%;
  height: 100%;
}
...

[Mich_]

Originariamente inviato da ResianTaxidrive
Beh puoi sempre dichiarare :

a{
display:block;
}

e penso passi la validazione.

No, non passa la validazione HTML: infatti l'HTML deve essere valido a prescindere dal CSS, e un blocco dentro un link non ci puo` stare.

[dogeht]

non passa la validazione HTML: infatti l'HTML deve essere valido a prescindere dal CSS, e un blocco dentro un link non ci puo` stare.

giustamente.


riguardo l'eventuale soluzione:

HTML: <div id="BloccoLink">  salve a tutti   <span>ciao questo e' un riquadro cliccabile per intero, che si evidenzia sia su FF che IE</span> </div>  CSS: #BloccoLink {   ... } #BloccoLink a {   display: block;   width: 100%;   height: 100%; } ...

funziona? cioe', l'elemento <a> si allarga in altezza e larghezza? non credo

piu' che trovare un modo di aggiustare il mio codice, mi piacerebbe che voi mi diceste come fate a raggiungere l'obiettivo: un riquadro cliccabile con dentro testo, immagini etc.

[Mich_]

iguardo l'eventuale soluzione:

HTML: 
<div id="BloccoLink"><a href="miolink">
    salve a tutti
    <span>ciao questo e' un riquadro cliccabile per intero, che si evidenzia sia su FF che IE</span> </a></div>

CSS: 
#BloccoLink {   ... } 
#BloccoLink a {   display: block;   width: 100%;   height: 100%; } ...

funziona? cioe', l'elemento <a> si allarga in altezza e larghezza? non credo

Certo che funziona se i CSS sono abilitati: il link e` stato trasformato in blocco, ed occupa tutto lo spazio a disposizione.
Eventualmente si puo` anche dargli delle dimensioni proprie cambiando i valori di width e height.

All'interno non puoi usare dei

, ma i vari [b] o <span> (se necessari) possono anche venir trasformati in blocco, e quindi usare ciascuno una sua riga ed avere dimensioni.
Come realizzare il tutto dipende dalla semantica: a ciascun elemento HTML corrisponde un suo significato semantico che va rispettato.