[resolu] Validation pages

Bonjour à tous,
Pour mon plus grand malheur, j'ai voulu valider mes pages HTML 4.0.

J'ai des messages d'erreurs pour des syntaxes qui fonctionnent parfaitement, et je n'arrive pas à trouver une équivalence qui fonctionne.

mon texte

  <p align="center"><a class="medium_em" id="i1">&nbsp;Cliquer auf dem Photo, um hineinzugehen - Clik op de foto om in te gaan&nbsp;</a> </p>
  <p align="center"><a class="medium_em" id="i1">&nbsp;Cliquer sur la photo pour continuer - To click on the photo to enter&nbsp;</a> </p>
  <p align="center"><a class="medium_em" id="i1">&nbsp;Klik pä foto for adgang&nbsp;</a> </p>

j'ai, avec le programme "validome.org" les messages suivants

a écrit :

Erreurs: L'attribut `ALIGN` n'est pas autorisé dans la balise p.
Position de l'erreur: <p align="center"><a class="xlarge_em blue">&nbsp;Vacances en chambres d'hô

Erreurs: ID "I1" déjà défini
Position de l'erreur: ...="center"><a class="medium_em" id="i1">&nbsp;Cliquer sur la photo pour co

J'ai essayé de tout mettre dans la balise <a> mais ça ne marche pas.

Je commence à regretter ma tentative, ce que l'on ignore ne nous dérange pas !!!!

dans les faq avec la recherche <align>, je n'ai rien trouvé

merci de m'éclairer
Modifié par helvetdulac (24 Feb 2006 - 09:18)

Bonjour,

Pour corriger ta première erreur, remplace ton

align="center"

par

style="text-align:center;"

Pour la seconde erreur, il faut savoir qu'un id ne peut apparaître qu'une seule fois dans la page; il est censé être unique.

Donc voilà une correction possible des 2 erreurs :

<p style="text-align:center;"><a class="medium_em" id="i1"> Cliquer auf dem Photo, um hineinzugehen - Clik op de foto om in te gaan </a> </p>
<p style="text-align:center;"><a class="medium_em" id="i2"> Cliquer sur la photo pour continuer - To click on the photo to enter </a> </p>
<p style="text-align:center;"><a class="medium_em" id="i3"> Klik pä foto for adgang </a> </p>

Je pense que ceci devrait marcher.

Bonjour,

à partir du moment où tu utlises une déclaration de type de document en "strict" tu dois savoir que les balises et attributs obsolètes seront invalidants.

C'est d'ailleurs pour ça qu'il y a des dtd "transional". Pour les cas où on ne veut ou ne peut se passer de ces balises et attributs.

Merci de vos premières réponses qui ont en partie résolu mon problème.
le positionnement des textes est OK

le hic, c'est pour les balises id="i1", je les utilise pour changer la couleur du fond et de la police, dans les css j'ai déclaré

a#i1 		{background-color : yellow; color:blue;}	
a#i2		{background-color : lime; color:red;}	
a#i3		{background-color : aqua; color:red;}	
a#i4		{background-color : silver; color:red;}	

j'ai plusieurs couleurs de fond de texte sur une même page, j'avais trouvé cet artifice.
Est-il possible de le remplacer ?

merci d'avance

Bonjour,
Dans ce cas, pourquoi ne pas les transformer en classes ? De cette façon tu pourras les réutiliser autant que tu veux . Et il est tout à fait possible de définir plusieurs classes à une balise (contrairement aux id, comme dit plus haut). Dans ce cas, la syntaxe est le suivante :

<balise class="classe1 classe2">

et dans ton cas :

<a class="medium_em i1">

(bien mettre l'espace entre les noms de classe)
Modifié par Jihel (22 Feb 2006 - 10:43)

Merci pour vos réponses
Grace à vous et au livre de Raphäel Gotter qui m'a expliqué l'utilisation des "class" avec plusieurs paramètres, mon problème actuel est presque résolu
J'ai le code CSS

.yellow_blue{background-color : yellow; color:blue;}/* i1   */	
.lime_red	{background-color : lime; color:red;}	/* i2   */
.aqua_red	{background-color : aqua; color:red;}	/* i3   */
.silver_red	{background-color : silver; color:red;}	/* i4   */

et en html

        <p style="text-align:center;" class="large_em yellow_blue">&nbsp;Pour venir à Collias par la route, le train, l'avion&nbsp; </p>
        <p style="text-align:center;" class="large_em lime_red">&nbsp;Cliquer sur le bouton pour continuer&nbsp;</p>
        <p style="text-align:left;" class="xlarge_em aqua_red">&nbsp;Prestations offertes&nbsp;</p>
        <p style="text-align:right;" class="large_em yellow_blue">&nbsp;randonnées VTT&nbsp;</p>

les couleurs sont justes, mais maintenant, la couleur du fond occupe toute la largeur de la fenêtre et plus seulement la taille du texte ?

La vie n'est pas un long fleuve tranquille

Est-ce que tu as un exemple en ligne ? Voir le problème dans son contexte nous permettra de mieux y répondre...

Errare humanum est, persevare diabolicum !
c'est pas toujours vrai.
a force de bricoler, j'ai trouvé une solution qui, si elle n'est pas très ortodoxe, au moins ne renvoie plus de messages d'erreurs.
j'ai le code css suivant

p			{font:italic bold 12pt verdana;}
em			{background-color:yellow;} 
		
.xxpetit_em	{font-size: 0.3em;}
.xpetit_em	{font-size: 0.5em;}
.petit_em	{font-size: 0.7em;}
.medium_em	{font-size: 1.0em;}
.large_em	{font-size: 1.2em;}
.xlarge_em	{font-size: 1.5em;}
.xxlarge_em	{font-size: 2.5em;}
.black 		{color:black;}		/* couleur texte : noir 		*/
.green 		{color:green;} 		/* couleur texte : vert  		*/
.navy 		{color:navy;}  		/* couleur texte : bleu nuit  	*/
.purple 	{color:purple;}  	/* couleur texte : pourpre  	*/
.red 		{color:red;}  		/* couleur texte : rouge  		*/
.lime 		{color:lime;}  		/* couleur texte : vert citron  */
.blue 		{color:blue;}  		/* couleur texte : bleu azur  	*/
.fuchsia 	{color:fuchsia;}  	/* couleur texte : fuchsia  	*/
.aqua 		{color:aqua;}  		/* couleur texte : vert d'eau  	*/
.yellow 	{color:yellow;}  	/* couleur texte : jaune  		*/

j'ai les lignes html suivantes

        <p style="text-align:center;" class="large_em blue"><em>&nbsp;Pour venir à Collias par la route, le train, l'avion&nbsp;</em> </p>
        <p style="text-align:center;" class="large_em blue"><em>&nbsp;Cliquer sur le bouton pour continuer&nbsp;</em></p>
      </div>
    </div>
    </span></a>
    <p></p>
    <a href="heberge-fr.html"><img src="../boutons/chx-fr_hebergement.jpg" alt="bouton choix" width="200" height="40" border="0" ><span><br>
    <div id="preamble"> <img src="../images-fond/fond_hebergement.png" alt="image fond" width="600" height="600" hspace="50" vspace="0" border="0" >
      <div id="texte-scroll"> <br>
        <p style="text-align:right;" class="large_em blue"><em>&nbsp;piscine, salon TV&nbsp;</em> </p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <p style="text-align:left;" class="xlarge_em red"><em>&nbsp;Prestations offertes&nbsp;</em> </p>
        <p style="text-align:right;" class="large_em blue"><em>&nbsp;randonnées VTT&nbsp;</em> </p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <p style="text-align:left;" class="large_em blue"><em>&nbsp;&nbsp;&nbsp;Cyber salon&nbsp;</em> </p>
        <p style="text-align:left;" class="large_em blue" ><em>&nbsp;(internet ADSL, E-mail, vidéo-conférence)&nbsp;</em> </p>
        <p style="text-align:center;" class="large_em red"><em>&nbsp;Cliquer sur le bouton pour continuer&nbsp;</em> </p>
      </div>
    </div>

j'ai accepté de conserver une seule couleur de fond, je ne change que la couleur du texte.
ça fonctionne et c'est visible avec le lien suivant
http://www.collias-vacances.com/test/pages/choixfr.html
[/url]

reste maintenant les problèmes concernant les balises "<div preamble>"
ou j'ai les messages d'erreur suivants

a écrit :

Colonne: 14
74 Erreurs: ID "PREAMBLE" déjà défini
Position de l'erreur:

<div id="preamble"> <img src="../images-fond/fond_hebergement.png" alt="imag

14
74 Erreurs: ID "PREAMBLE" déjà défini
Position de l'erreur:

<div id="preamble"> <img src="../images-fond/fond_hebergement.png" alt="imag

pour cette dernière partie, c'est le noir le plus complet.

Meci d'avance pour vos lumières

En fait il s'agit de la même erreur que plus haut : un identifiant est unique sur une page, il ne peut y en avoir plusieurs. Si tu veux attribuer un style à plusieurs éléments dans une même page, il faut passer par une classe.

C'est vrai que le code est plutôt bricolo, et certaines optimisations pourraient te permettre d'éviter d'utiliser une collection de <br/> ou des <p> vides. Je pense particulièrement à l'utilisation de marges.
N'hésite pas à poster en cas de problèmes ultérieurs !

J'avance lentement , mais surement.

Je viens de comprendre (un peu) l'utilisation des "classes", mais nouveau problème, si ma photo se place parfaitement, pas moyen de centrer le texte sur la photo
j'ai le code provisoire en css

.preamble 		{margin-left: 100px; margin-top: 0px; width: 600px;	height: 500px;}
.texte_inf 		{margin-left: 100px; margin-top: 0px; width: 600px}

et pour la partie html

  <div id="menu" > <a href="situation-fr.html"><img src="../boutons/chx-fr_situation.jpg" alt="bouton choix" width="200" height="40" border="0"><span><br>
    <p class="preamble"> <img src="../images-fond/fond_situation.jpg" alt="image fond" width="600" height="538" vspace="0" ></p>
	    <p style="text-align:center;" class="text_inf large_em blue"><em>&nbsp;Pour venir à Collias par la route, le train, l'avion&nbsp;</em> </p>
        <p style="text-align:center;" class="text_inf large_em blue"><em>&nbsp;Cliquer sur le bouton pour continuer&nbsp;</em></p> 
        </span></a>
    <p></p>

ou est l'erreur ?

en passant, y a-t-il une façon simple de remplacer les régiments de <br>
par un code spécifique.

merci encore une fois

Pour le centrage de ton texte, j'avoue que je ne vois pas vraiment... As-tu un exemple en ligne ? Je ne crois pas que l'url que tu as laissée plus haut reflète l'état actuel de tes travaux.

Pour ce qui est de la mise en page, je te propose quelque chose de plus didactique. En partant du principe que ta partie centrale (qui apparait au survol des boutons) repose plus ou moins sur une mise en page en colonnes, voici un lien vers un tutoriel de l'excellent pompage.net. A appliquer sur ta div preamble. Au final, ton code devrait ressembler à quelque chose dans ce style :

<div class="preamble">
  <div class="colonne"><!-- pour la colonne de gauche -->
    <img src="uneimage" height="x" width="x">
    <p>Commentaires sur ton image</p>
    <img src="autreimage" height="x" width="x">
    <p>Commentaires sur ton autre image</p>
  </div>

  <div class="colonne"><!-- pour la colonne du milieu -->
    <img src="uneimage" height="x" width="x">
    <p>Commentaires sur ton image</p>
    <img src="autreimage" height="x" width="x">
    <p>Commentaires sur ton autre image</p>
  </div>

  <div class="colonne"><!-- pour la colonne de droite-->
    <img src="uneimage" height="x" width="x">
    <p>Commentaires sur ton image</p>
    <img src="autreimage" height="x" width="x">
    <p>Commentaires sur ton autre image</p>
  </div>

avec comme départ de css

.preamble{
  width:600px;
  position:absolute;
  left: /* à placer correctement */;
  top:/* à placer correctement */;
}
.colonne{
  width:195px;
  float:left;
  text-align:center;
}
.colonne p{
/* tous les styles pour le texte */;
}
.colonne img{
margin: 0 auto; 
/* tous les styles pour les images */
}

Evidemment, si tu veux moins de colonnes il faut adapter les largeurs en conséquence. La propriété float placera tes blocs les uns à côté des autres à condition qu'il y ait la place suffisant, sinon ils partiront en dessous. Il faudra alors rectifier les largeurs.

Cette technique est plus complexe, je te le concède, mais très partique pour des misesen pages en colonnes. Une fois le principe acquis, c'est très facile de le reproduire. De plus tes éléments viendront se placer correctement, sans avoir à introduire de <br> pour les placer.

Pour remplacer d'autres <br>, en particulier dans le menu, tu peux utiliser les marges (margin). Ainsi, si tu veux qu'un bouton soit à 150 px du précédent, tu peux faire ainsi :

<a href="tarifsfr.html" style="margin-top:150px;">
  <img src="../boutons/chx-fr_tarifs.jpg" alt="bouton choix" width="200"    height="20" border="0" >
</a>

Cette technique te permettra de placer tes éléments sans avoir recours à de multiples sauts de ligne successifs.

Bon courage pour la suite

Bonjour à tous,
mon problème est résolu à 99.9% et j'ai enfin obtenu une fenêtre verte dans le validateur.
Pour ça, y a pas de miracle, j'ai tout repris et changé l'utilisation des css.
dès que ma dernière difficulté sera résolue d'une façon propre, je communiquerai les solutions employées.
merci encore à tous pour l'aide apportée