[W3C] Utilisation de class valide en W3C mais rendu impossible [Résolu]

[Pierrick81]

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 :

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 :

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.

[Bovino]

Ben oui... un id doit être unique dans la page
Ensuite, changer les id en class, pourquoi pas mais dans ce cas, il faut aussi le préciser dans le CSS ('#' => id ; '.' => class)

[Pierrick81]

Et pourquoi dis-tu pourquoi pas ?
Il y a une autre solution ?

[Pierrick81]

En fait la technique de changer les id en Class, MAIS aussi de changer dans le CSS a corrigé le "bug" W3C.

Merci