h4 - link

[oly1982]

Come potete capite dal mio avatar sono maggiormente ferrato in altri linguaggi...

Utilizzo l'elemento h4 in quanto fissando il backgroud mi realizza lo sfondo colorato che si estende per tutto lo spazio disponibile orizontalmente (tutto il rigo).
Tale h4 è un link a cui vorrei modificare tale sfondo al passaggio del mouse.

Ci sono riuscito con un metodo non ortodosso che non rispetta le regole del w3c (non si può linkare un h4).

Il css è questo:

 
a {COLOR: #5A69A6; text-decoration: none;}
a:visited {COLOR: #5A69A6; text-decoration: none;}
a:hover {COLOR: #5A69A6; text-decoration: underline;}

h4{
	background: #5A69A6;
	padding:2px;
	color:#fff;
	line-height: 24px;
}
a h4:hover{
	background: #636363;
	text-decoration:none;
	color:#fff;
}

Il markup (incriminato dal w3c) è questo:

<h4>LINK</h4>

Come potrei fare per ottenere lo stesso risultato con

<h4>LINK</h4>

[Mich_]

Anzitutto un <h4> e` un tag che indica titolo (di quarto livello). Ogni uso diverso e` contrario alla semantica e porta difficolta` a capire per alcune categorie di utenti e declassamento nei motori di ricerca.

Comunque un CSS del tipo:

h4 {
	background: #5A69A6;
	padding:2px;
	color:#fff;
	line-height: 24px;
}
h4:hover{
	background: #636363;
	text-decoration:none;
	color:#fff;
}

e` perfettamente valido se si riferisce ad un tag:
<h4> titoletto </h4>
Solo che non funziona in IE6 (in IE7 solo in alcune condizioni, che io sappia).

Se invece il titolo deve diventare un link, la cosa migliore e` usare:

HTML:
<h4>titoletto con link</h4>

CSS:
h4 {
	width: ...;			/* altrimenti il width dell'<a> perde significato */
	padding:2px;		/* non so se deve stare qui o sotto */
	line-height: 24px;
}
h4 a {
	display: block;
	width: 100%;
	height: 100%;
	background: #5A69A6;
	padding:2px;
	color:#fff;
}
h4 a:hover{
	background: #636363;
	text-decoration:none;
	color:#fff;
}