Problème html attribut id

Résolu
Bonjour,j'ai fais le validator du w3c et j'ai un problème majeur (400 erreur)

erraur en grande quantité : les <div id="...

il faut qu'elles soit unique et je ne sais ps comment faire pour remplacer le id

ex du code :

	<div id="left_bas2"></div>

	    <div id="left_haut2"><h3>.:Le site:. </h3></div>
		<div id="leftbk2">
		    <a href="tonlien.html"><img src="images/gh.png" border=no></a><br />
			<a href="tonlien.html"><img src="images/gh2.png" alt="boutton"></a><br />
			<a href="tonlien.html"><img src="images/gh3.png" alt="boutton"></a><br />
			<a href="tonlien.html"><img src="images/gh4.png" alt="boutton"></a><br />
			<a href="tonlien.html"><img src="images/gh5.png" alt="boutton"></a><br />
			<a href="tonlien.html"><img src="images/gh6.png" alt="boutton"></a><br />

			<a href="tonlien.html"><img src="images/gh7.png" alt="boutton"></a><br />
		</div>
		<div id="left_bas2"></div>
	    <div id="left_haut2"><h3>.:présentation:.</h3></div>
		<div id="leftbk2">
		    <a href="tonlien.html"><img src="images/gh11.png" border=no></a><br />
		<a href="tonlien.html"><img src="images/gh12.png" alt="boutton"></a><br />
		<a href="tonlien.html"><img src="images/gh13.png" alt="boutton"></a><br />

		<a href="tonlien.html"><img src="images/gh14.png" alt="boutton"></a><br />
		<a href="tonlien.html"><img src="images/gh15.png" alt="boutton"></a><br />
		<a href="tonlien.html"><img src="images/gh16.png" alt="boutton"></a><br />
		<a href="tonlien.html"><img src="images/gh49.png" alt="boutton"></a><br />
</div>
		<div id="left_bas2"></div>
	    <div id="left_haut2"><h3>.:Metroids:.</h3></div>
		<div id="leftbk2">
<a href="tonlien.html"><img src="images/gh65.png" alt="boutton"></a><br />

<a href="tonlien.html"><img src="images/gh66.png" alt="boutton"></a><br />
<a href="tonlien.html"><img src="images/gh67.png" alt="boutton"></a><br />
<a href="tonlien.html"><img src="images/gh68.png" alt="boutton"></a><br />
		</div>
		<div id="left_bas2"></div>


comment faire pour que les "id" ne se répette pas ?

merci d'avance pour votre aide !

--
si vous avez remarque le signe XP désigne un smiley nous tirant la langue .....windows se foutrai ne notre gueule ?
Configuration: Windows XP
Firefox 3.5.5

30 réponses

Résumé de la discussion

Le problème central réside dans la répétition des identifiants (id) sur plusieurs div, ce qui rend le code non valide et provoque des erreurs 400 lors du passage du validator W3C. Une solution primordiale consiste à attribuer des classes à ces éléments, notamment left_bas2, left_haut2 et leftbk2, et à ajuster le CSS pour utiliser les sélecteurs .left_bas2 au lieu de #left_bas2, notamment. Dans le même esprit, il faut veiller à protéger l'accessibilité en ajoutant des textes alternatifs pertinents pour les images et fermer correctement les balises, et vérifier le doctype utilisé. D'autres pratiques recommandées incluent l'utilisation du doctype HTML5 pour libérer des contraintes de fermeture et d'organiser le markup en blocs sémantiques.

Bobot (l’IA à votre service)
  1. C'est déjà réparer !

    0 erreur !

    merci ,mais alors merci pour ton aide !

    a + !
    1. Tu ne peux pas imbriquer deux éléments de type bloc. Or un titre (<hx></hx>) et un paragraphe (<p></p>) sont de type bloc.
      1. Pas besoin ,plus qu'une erreur

           1.  Error  Line 268, Column 7: document type does not allow element "h4" here; missing one of "object", "ins", "del", "map", "button" start-tag
        
              <p><h4>Le site sur nintendo ,et mario ...</h4>
        
              &#9993;
        
              The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
        
              One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
        
        1. 30 erreur mais les derniere sont toujour les plus dures !

          voici un formulaire pour inscrption a la newsletter :

          <form method="post" action="inscription.php">
          <table width="10" border="0" class="encadre">
          <tr>
          <td><input class="textbox_login" type="text" name="email" size="25" /></td>
          <td> </td>
          <tr>
          <td>
          <input name="action" type="radio" value="abo"
          checked="checked" />
          inscription<br />
          <input type="radio" name="action" value="desabo" />
          désinscription
          </td>
          </tr>
          <tr>
          <td>
          <input type="submit" name="valid" value="Valider" />
          </td>
          </tr>
          </table>
          </form>
          

          Il est apparemment invalide

          mais moi ,je vois vois rien de louche
          1. merci !

            30 erreur ! (j'en ai réparer un peur aussi de mon coté )

            Mais après ,certaine je ne comprend pas comme :


            Line 225, Column 77: document type does not allow element "br" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag

            1. <tr>
              <td><input class="textbox_login" type="text" name="email" size="25" /></td>
              <td> </td>
              <tr>
              


              Le dernier <tr> doit être </tr>
              1. salut !

                plus que 130 erreur !

                mais je ne comprend pas e qui louche la dedans :

                <form method="post" action="inscription.php">
                <table width="10" border="0" class="encadre">
                <tr>
                <td><input class="textbox_login" type="text" name="email" size="25" /></td>
                <td> </td>
                <tr>
                <td>
                <input name="action" type="radio" value="abo"
                checked="checked" />
                inscription<br />
                <input type="radio" name="action" value="desabo" />
                désinscription
                </td>
                </tr>
                <tr>
                <td>
                <input type="submit" name="valid" value="Valider" />
                </td>
                </tr>
                </table>
                </form>
                


                Il y a des erreur sur les tr ,pourtant je ne vois rien de louche
                1. ok ,mais petit problème , les balise image faut les fermer aussi non ?
                  1. Comme je te l'ai dis plus tôt, il faut souvent chercher l'erreur en amont.
                    Je crois voir par exemple un <tr> qui n'est pas fermé.

                    Contrôle tous tes div, n'y en a-t-il pas un qui est ouvert et non fermé ?
                    Tu en as un paquet.... vérifie.

                    Tu as toujours des <font> qui trainent, des balises img qui ne sont pas fermées d'un slash.
                    1. hello !

                      Error Line 345, Column 7: XML Parsing Error: Premature end of data in tag div line 107

                      </html>

                      que veut dire cette erreur ?

                      je cherche sur le net et je ne trouve vraiment pas :/
                      1. Rémoudo, je ne vais pas tout débugger à ta place ! En plus je n'ai pas le temps...(faut que j'y aille là)

                        Dans cette partie tu as encore des balises en majuscules, encore des attributs dépréciés (dans le body), encore des <center>...

                        a+
                        1. il m'affiche que 136 erreur ,pas normal puisque maintenant c'est 485 !

                          (l'hystérie chez moi ,c'est naturelle =P)

                          Bon alors danc cette partie :

                          <body bgcolor="#FFFFFF" background="im/fond.gif" onload="heure()">

                          <div id="site">
                          <?php
                          $tab = file("header.txt") ;

                          srand((double)microtime() * 1000000) ;
                          $nbr = rand(0, (count($tab) - 1)) ;
                          echo $tab[$nbr] ;
                          ?>
                          <ul id="navbar">
                          <li><a title="Accueil" href="index.html">Accueil</a></li>
                          <li><a title="partenaires" href="partenaires.html">partenaires</a></li>
                          <li><a title="Lien" href="_">Livre d'or </a></li>
                          <li><a title="Lien" href="#">nintenquiz</a></li>
                          <li><a title="Lien" href="#">E.P.W.F</a></li>
                          <li><a title="Lien" href="#">newsletter</a></li>
                          <li><a title="Lien" href="#">chat</a></li>
                          </ul>
                          </div>
                          <div id="left">

                          <div class="left_haut2"><h3>.:heure:.</h3></div>
                          <div class="leftbk2">
                          <center><OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                          CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=5,0,0,0">
                          <PARAM NAME="MOVIE" VALUE="clock8.swf">
                          <PARAM NAME="PLAY" VALUE="true">
                          <PARAM NAME="LOOP" VALUE="true">
                          <PARAM NAME="WMODE" VALUE="Transparent">
                          <PARAM NAME="QUALITY" VALUE="high">
                          <EMBED SRC="clock8.swf" WIDTH="100" HEIGHT="100" PLAY="true" LOOP="true" WMODE="Transparent" QUALITY="high"
                          PLUGINSPAGE="https://get.adobe.com/flashplayer/">
                          <form name="formhorloge" onSubmit="0">
                          <div align="center">
                          <input type="button" name="horloge" value="">
                          </div>
                          </form>
                          </EMBED>
                          </OBJECT></center>
                          </div>
                          <div class="left_bas2"></div>
                          <div class="left_haut2"><h3>.:Le site:. </h3></div>
                          <div class="leftbk2">
                          <a href="tonlien.html"><img src="images/gh.png" border=no></a><br />
                          <a href="tonlien.html"><img src="images/gh2.png" alt="boutton"></a><br />
                          <a href="tonlien.html"><img src="images/gh3.png" alt="boutton"></a><br />
                          <a href="tonlien.html"><img src="images/gh4.png" alt="boutton"></a><br />
                          <a href="tonlien.html"><img src="images/gh5.png" alt="boutton"></a><br />
                          <a href="tonlien.html"><img src="images/gh6.png" alt="boutton"></a><br />
                          <a href="tonlien.html"><img src="images/gh7.png" alt="boutton"></a><br />
                          </div>
                          <div class="left_bas2"></div>
                          <div class="left_haut2"><h3>.:présentation:.</h3></div>
                          <div class="leftbk2">
                          <a href="tonlien.html"><img src="images/gh11.png" border=no></a><br />
                          <a href="tonlien.html"><img src="images/gh12.png" alt="boutton"></a><br />
                          <a href="tonlien.html"><img src="images/gh13.png" alt="boutton"></a><br />
                          <a href="tonlien.html"><img src="images/gh14.png" alt="boutton"></a><br />
                          <a href="tonlien.html"><img src="images/gh15.png" alt="boutton"></a><br />
                          <a href="tonlien.html"><img src="images/gh16.png" alt="boutton"></a><br />
                          <a href="tonlien.html"><img src="images/gh49.png" alt="boutton"></a><br />
                          </div>
                          <div class="left_bas2"></div>
                          <div class="left_haut2"><h3>.:Metroids:.</h3></div>
                          <div class="leftbk2">
                          <a href="tonlien.html"><img src="images/gh65.png" alt="boutton"></a><br />
                          <a href="tonlien.html"><img src="images/gh66.png" alt="boutton"></a><br />
                          <a href="tonlien.html"><img src="images/gh67.png" alt="boutton"></a><br />
                          <a href="tonlien.html"><img src="images/gh68.png" alt="boutton"></a><br />
                          </div>
                          <div class="left_bas2"></div>
                          <div class="left_haut2"><h3>.:Newsletter:. </h3></div>
                          <div class="leftbk2">
                          <form method="post" action="inscription.php">
                          <table width="10" border="0" class="encadre">
                          <tr>
                          <td><input class="textbox_login" type="text" name="email" size="25" /></td>
                          <td> </td>
                          <tr>
                          <td>
                          <input name="action" type="radio" value="abo"
                          checked="checked" />
                          inscription<br />
                          <input type="radio" name="action" value="desabo" />
                          désinscription
                          </td>
                          </tr>
                          <tr>
                          <td>
                          <input type="submit" name="valid" value="Valider" />
                          </td>
                          </tr>
                          </table>
                          </form>

                          </div>
                          <div class="left_bas2"></div>
                          1. si ,sa c'est juste l'horloge flash et en en nombre qui s'affiche ,et il faut mettre sa dans le head =)
                            1. <SCRIPT LANGUAGE="JavaScript"> 

                              A écrire en minuscules et remplacer LANGUAGE="JavaScript" par type="text/javascript"

                              En passant, un menu doit être navigable même avec le javascript désactivé... Je ne pense pas que ce soit le cas du tien.
                              1. ok ,dans cette partie rien de louche ?

                                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

                                <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
                                <head>
                                <link rel="icon" type="image/ico" href="images/favicon.ico" />
                                <script src="jquery.min.js" type="text/javascript"></script>
                                <script type= "text/javascript">/*<![CDATA[*/
                                $(function(){
                                //Get our elements for faster access and set overlay width
                                var div = $('div.sc_menu'),
                                ul = $('ul.sc_menu'),
                                ulPadding = 15;

                                //Get menu width
                                var divWidth = div.width();

                                //Remove scrollbars
                                div.css({overflow: 'hidden'});

                                //Find last image container
                                var lastLi = ul.find('li:last-child');

                                //When user move mouse over menu
                                div.mousemove(function(e){
                                //As images are loaded ul width increases,
                                //so we recalculate it each time
                                var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
                                var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
                                div.scrollLeft(left);
                                });
                                });
                                /*]]>*/</script>
                                <SCRIPT LANGUAGE="JavaScript">
                                function popup(page) {
                                window.open(page,'popup','width=900px,height=600px,toolbar=false,scrollbars=false');
                                }
                                </SCRIPT>
                                <title>Nintendow :.</title>
                                <meta http-equiv="Content-Language" content="fr" />
                                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                                <link type="text/css" rel="stylesheet" href="style.css" />
                                <script language="JavaScript">
                                <!--
                                //PLF-https://twitter.com/ceosammassey
                                function heure () {
                                var Maintenant = new Date();
                                var heures = Maintenant.getHours();
                                var minutes = Maintenant.getMinutes();
                                var secondes = Maintenant.getSeconds();
                                heures = ((heures < 10) ? " 0" : " ") + heures;
                                minutes = ((minutes < 10) ? ":0" : ":") + minutes;
                                secondes = ((secondes < 10) ? ":0" : ":") + secondes;
                                document.formhorloge.horloge.value = heures + minutes + secondes;
                                setTimeout("heure()",1000);
                                }
                                // -->
                                </script>
                                </head>

                                Quand je corrige des erreurs des autre se crée x )
                                1. Oui, tous les éléments et attributs dépréciés le sont car ils peuvent remplacés par les CSS.

                                  Pour centrer, il faut donc utiliser un text-align:center, ou un margin:auto, selon le cas.
                                  Tous les <font> sont à remplacer par font-family, font-size etc.
                                  Le bgcolor, par background-color
                                  ...
                                  • 1
                                  • 2