Utilisation de class valide en W3C mais rendu impossible

**Pierrick81** · 18/08/2011, 13h22

Bonjour à tous,

J'essaye de valider mon site en W3C, mais je m'aperçois que j'ai encore beaucoup de travail !

J'ai un premier problème qui me bloque.
J'ai une mise en page de ce type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="is_new is_not_resto is_not_bienetre is_not_shopping is_loisirs is_not_services is_not_voyage is_not_autres is_national is_not_ville" id="title_element_185"> 
 
	<DIV id="grandcadre"> 	
		<a href="javascript:showHideContent('content_element_185');">		
			<div id="cadrecoin"> 
				<img src ="image.jpg" alt="National Deals" width="110px" height="60px">				
                        </div> 			
			<img src ="img/loisirs.png" alt="Loisirs" style="float:right">				
                        <span id="txt">National Deals</span>				
			<span id="txt2"> 
			         <span class="price_titre">4.99&euro;&nbsp;</span>au lieu de &nbsp;<span class="old_price_titre">10&euro;</span>				
                        </span> 
			<span id="txt3"> 
				<span ID="Counter185" class=compteur> 
					<SCRIPT type="text/javascript" > 
                                                        dateTmp=new Date();                                                     counter185=setInterval(function(){CountDown_Counter("Counter185",dateTmp,820024); },1000);
                                        </SCRIPT> 
				</span> 
			</span> 
		</a> 
	</DIV> 
</div>

et j'ai mon fichier CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#grandcadre
{
	position:relative;				
	border:1px solid #eecfb9;
	margin-top:5px;
    	width: 578px;
	height: 70px;
}			
#grandcadre img
{
	margin-top:0px;
	float:right;
}
#grandcadre a
{
	color: #5a5756;
	text-decoration:none;
}
#cadrecoin
{
	float:left;
	width:110px;
	height:66px;
}
#cadrecoin img
{
	margin-top:5px;
	margin-left:-5px;
}
#txt
{ 				
	position:absolute;	
	width:440px;
	top:0px;				
	left:120px;
	font-size:10pt;
}         
#txt2
{
	position:absolute;				
	bottom:0px;
	left:120px;   
	font-size:10pt;	
}	
#txt3
{ 
	position:absolute;				
	bottom:0px;
	right:5px;
}

Le problème c'est que j'ai une boucle qui créée des dizaines de DIV de ce type.
Et lorsque j'essaye de valider, il me dit que les ID "grandcadre", "cadrecoin", ... existe déjà.
J'ai essayé de remplacer id par class mais cela ne respecte plus du tout la mise en page.

comment faut-il faire ?

Merci d'avance.

P.