[CSS] Illuminare un'intera riga con dentro tag <H>

[Squall22]

Avrei bisogno di illuminare delle righe al passaggio del mause, contenenti un titolo ed una descrizione (sotto). Il tutto ovviamente linkato.


Ora come ora ho impostato per ogni riga un tag <a> e tramite css ho dato display:block, al :hover ho dato un diverso tipo di background..ecc..

Dentro ogni riga, come ho detto prima c'è un titolo ed una descrizione. Per avere una pagina più "search engine friendly" ho usato dei tag <H4> per il titolo e <H5> per la descrizione (<H6> lo uso per il testo dell'articolo).

Tutto funziona a meraviglia solo che il validator mi dice che dentro un tag <A> non ci possono stare i tag <H>


Io vorrei poter mantenere la riga illuminata e dentro avere dei tag <H>



Non c'è un'altro modo per risolvere il problema? Che tag posso usare per poter usare anche :hover? Ho sentito che con XHTML 2.0 si può utilizzare l'attributo href con qualsiasi tag.. e quindi anche :hover (suppongo).


HELP

[Marcolino's]

xhtml2 è ancra in fase vanzata di .. discussione, come daltronde il css3 che prevde l'uso di hover anche su altri elementi.
Francamente non ho mai sentito il bisogno di fare una cosa del genere, ed anche io avevo pensato a inserire l'header in un'ancora.
Non so come fanno gli altri, il mio consiglio è di andare a vedere qualche sito e leggerne il codice, anche se dubito che facciano in modo diverso.
Forse se ne fregano del validatore

[Squall22]

con l'xml qualche volta ho creato una mia dtd dei tag che utilizzavo.

chissà se funziona anche con con l'xhtml e sopratutto la do a bere al validatore

[pacovox]

L'hover puoi darlo ad un div che contiene sia l'intestazione che i paragrafi.

.pippo:hover {
background-color: #...;
color: #...;
...
}

<div class="pippo">
<h1>Intestazione</h1>


Paragrafo</p>


...</p>
</div>

[Jerry Masslo]

la potrebbe dare anche direttamente e senza link a molti elementi come h1

h1:hover {background:red}

potrebbe perché nessuna di queste soluzione funziona con ie.

quindi si può ovviare ad esempio così:



a.riga {text-decoration:none;text-align:center;display:block}
a.riga:hover {background:red}


<h1>Intestazione</h1>

[Squall22]

già... solo che non ho solo un titolo, ma anche un descrizione.

Fatto cos' funziona benissimo e non ci sono noie con il validatore, ma non si illumina tutta la cella contenete sia titolo che descrizione, ma separatamente i titoli e descrizioni.

[Marcolino's]

Metti titolo e descrizione in uno span e illumina quello.

[Squall22]

illumino lo span??? e come?

[Jerry Masslo]

Originariamente inviato da Marcolino's
Metti titolo e descrizione in uno span e illumina quello.

dici gli hx dentro uno span? non li validerebbe. Il problema è che lui vuole gli hx e vuole che sull'hover se ne illumino più di uno in un colpo solo.

Io ho provato a mettere gli hx in un position:relative e poi dentro un link con display:block e position:absolute, ma si comporta in modo diverso coi doctype e non sono riuscito a farlo andare coi tre principali browser in modo ottimale, facendo compromessi, sacrificando in mozilla la copertura totale sull'hover a qualsiasi eventuale ridimensionamento dei caratteri rimane il difetto peggiore di questa soluzione: sull'hover vengono nascoste le scritte non è il massimo quindi. né vale mettere le scritte sopra, l'hover non copre le scritte ma funziona solo sullo spazio vuoto.
Ora provo qualcos'altro.

A dire il vero ora non posso proprio.


p.s.

si è capito qualcosa?

[Squall22]

molto poco ...


la compattibilità fra i browsers non è un problema...

lato server controllo gli useragents e invio il relativo css...
quindi avere css diversi non è un problema



il problema è illuminarli e validarli



P.S
visto che hai accennato ai doctype ed al comportamento diverso... chiedo una cosa che ignoravo... io uso il doctype xhtml1.1 con <?xml ?> all'inizio. Una volta eliminato tale dichiarazione (il validatore mi ignorava l'encoding e non passava i caratteri accentati) ho visto tutto il layoult disfarsi... come se il padding fosse andato a sommarsi al width totale (tutte misura sballate)


PP.S
Ho giocato con le position per altri motivi, e avevo anche io il tuo stesso problema.. la copertura non si estendeva sul testo... ma poi ho scoperto che il link c'era lo stesso... solo non aveva la manina.. mi è bastato mettere cursor: hand e si è risolto tutto :mavieni: