Problème de validation W3C

Bonjour à tous.
D'abord une petite présentation. Edouard, bricoleur de site Web à temps perdu.

Jusqu'à présent, sur mes sites, j'avais réussi à valider mon code et mon style sur le validator W3C.

Aujourd'hui, je bute sur un problème mais je ne vois pas comment le contourner.

Déjà le lien du site : http://www.viatec-altus.com/equipe.php

Sur cette page, je présente les membres d'une société. Tout est en CSS.

Pour vous expliquer, je vous joint le code inciminé (je n'ai pas mis toute la page (trop longue ).

       <div id="content"> 
            <ul id="gallery">
                	<li>
					<a href="#"><img src="images/equipe/vequipe01.jpg" border="0" width="70" height="70" alt="">
					<span>
					<img class="agauche" src="images/equipe/equipe01.jpg" border="0" width="200" height="200" alt="">
					<img class="vignette" src="images/pages/viatecpg.jpg" alt="">	
					<div class="nom">
					<div style="text-align:left" class="normalgras">Didier MAROT</div><br>	
					<div style="text-align:left" class="normal">Gérant</div></div>
					<div class="cv">
					<div style="text-align:justify" class="normal">Diplômé d'un Brevet de Technicien Supérieur obtenu au Lycée Technique d'Argonay en 1985.<br>
					Expérience de plus de 20 ans dans les études et la réalisation de projets de voirie, de réseaux d'eau potable, d'eaux pluviales et d'eaux usées
					pour des Maitres d'Ouvrages publics ou privés.</div></div>
					</span></a>
					</li>

					<li>
					<a href="#"><img src="images/equipe/vequipe02.jpg" border="0" width="70" height="70" alt="">
					<span>
					<img class="agauche" src="images/equipe/equipe02.jpg" border="0" width="200" height="200" alt="">
					<img class="vignette" src="images/pages/viatecpg.jpg" alt="">
					<div class="nom">
					<div style="text-align:left" class="normalgras">Sylvie ROMAND</div><br>	
					<div style="text-align:left" class="normal">Assistante de Direction</div></div>
					<div class="cv">
					<div style="text-align:justify" class="normal">Expérience de plus de 15 années en tant qu'assistante administrative.</div></div>
					</span></a>
					</li>

					
            </ul>
        </div>

et le style qui s'y rattache

.logoequipe   {position:absolute; width:170px;  height:89px;  top:0px;   left:400px;  border:solid 1px #FFFFFF; z-index: 30;}	
.vignette     {position:absolute; width:170px;  height:89px;  top:0px;   left:400px;  border:solid 1px #FFFFFF; z-index: 30;}	 
.nom          {position:absolute; width:200px;  height:50px;  top:0px;   left:215px;  z-index: 50;}
.cv	          {position:absolute; width:400px;  height:140px; top:110px; left:215px;  z-index: 50;}

#carreg       {position:absolute; width:18px;  height:18px;  top:30px;   left:10px;   border:none; z-index: 30;}
#carrea       {position:absolute; width:18px;  height:18px;  top:53px;   left:10px;   border:none; z-index: 30;}
#carrec       {position:absolute; width:18px;  height:18px;  top:76px;   left:10px;   border:none; z-index: 30;}
#carregebas   {position:absolute; width:18px;  height:18px;  top:547px;  left:731px;  border:none; z-index: 30;}
#carreaebas   {position:absolute; width:18px;  height:18px;  top:547px;  left:754px;  border:none; z-index: 30;}
#carrecebas   {position:absolute; width:18px;  height:18px;  top:547px;  left:777px;  border:none; z-index: 30;}	  

L'erreur que j'obtient est :
document type does not allow element "DIV" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag.

Je suppose que c'est l'insertion d'un <div> dans une balise <a> ?

D'avance merci et désolé si la forme du message n'est pas la bonne, je débute sur le forum.

Bon week end

Insertion d'un DIV (ou autre élément de type bloc) dans un A: pas possible.
Insertion d'un DIV (ou autre élément de type bloc) dans un SPAN: pas possible.
Insertion d'un DIV (ou autre élément de type bloc) dans un SPAN dans un A: pas possible non plus.

Voili voilou.

Bonjour,
effectivement, c'est ce qu'il me semblait mais y a t-il moyen de contourner ?
C'est un diaporama dont le style est celui-ci :

/* style et positions diaporama equipe */
#content     {position:absolute; bottom :20px; left : 70px; border:0px; z-index: 30;}
#gallery     {list-style: none;	 padding: 0px; text-align: left;}
#gallery li  {padding: 0px; display: inline; margin: 0px;}
#gallery a:hover {border:none;}
#gallery a img   {border:none;}
#gallery a span  {display:none;}
#gallery a:hover span {display: block; position: absolute; top: -300px; left: 50px;}

Le résultat me plait bien donc j'aimerais rester sur le même genre de fonctionnement.

Enfin, déjà, merci pour ta réponse.

edouard64 a écrit :
mais y a t-il moyen de contourner ?

Deux possibilités:

1. Utiliser des éléments de type en-ligne dans le lien (par exemple des SPAN), quitte à les passer en display: inline-block.

2. Ne pas bidouiller ce genre d'effets en CSS (avec la pseudo-classe :hover) mais faire quelque chose de plus propre en JavaScript, en prévoyant un rendu correct avec JavaScript désactivé, etc.

La deuxième solution est meilleure techniquement et permet de faire des choses plus propres, plus accessibles, et éventuellement plus ergonomiques... pour peu que l'on sache utiliser JavaScript correctement.

Ok, je vais voir avec la première piste que tu m'as donné, je ne connais absolument rien au javascript.

Merci encore.