validation du code source

miloumoi · 2 Septembre 2005

Bon grâce à vos conseil, j'ai déjà réussi à valider entièrement ma page d'accueil. Sur ma 1ère page, j'ai réussi à résoudre les erreurs mais il me reste 7 erreurs et toutes sur les attributs id (elles ne sont pas uniques).

J'ai lu la doc du forum et j'ai bien compris que ces valeurs devaient être uniques mais je ne sais pas trop comment faire (même pas du tout). Est-il nécessaire de corriger cette erreur ?

En fait, à la base de la création de mes pages, il y a un kit graphique que j'ai téléchargé sur le net et ai un peu modifié. Mais j'avance vraiment pas à pas et je ne comprend pas toujours ce que je fais. Apparemment il y avait déjà des erreurs de code dans le kit téléchargé, j'avais pas mal de balises <ul> sans <li>, du coup, je les ai remplacées par <br /> et apparemment ça fonctionne bien. Ca peut poser problème ?

Et là je vais me répéter mais je vous dis encore un grand merci pour votre aide

Modifié 2 Septembre 2005 par miloumoi

Dudu · 2 Septembre 2005

Salut,

aïe aïe aïe les kits graphiques (ne généralisons pas.. mais bon dans une grande majorité le code est assez drôle)..

Remplacer des listes (<ul><li>) par des sauts de ligne (<br/>) pourquoi pas ? Mais quel rapport ?

Tu n'as un peu de code à nous mettre sous la dent ? ou encore mieux un lien à aller visiter ?

En tous cas oui c'est sur un attribut id doit être unique. C'est à dire que tu ne peux pas avoir dans la même page un <p id="abc"> et un <span id="abc">.

Pour pouvoir utiliser plusieurs fois une valeur c'est class et non id (mais ce n'est pas tout à fait la même chose)

miloumoi · 2 Septembre 2005

Remplacer des listes (<ul><li>) par des sauts de ligne (<br/>) pourquoi pas ? Mais quel rapport ?

Honnêtement, j'ai mis ça simplement parce que ça avait le même effet "visuel" et que ça me supprimait l'erreur.

Tu n'as un peu de code à nous mettre sous la dent ? ou encore mieux un lien à aller visiter ?

Je n'ai pas encore de lien puisque tout est dans mon pc (je voudrais publier un site "propre") je vais copier-coller le code ici. Par contre évidemment, j'ai commencé par la page "adultes", mais je pense que ça ne posera pas de problème car les photos n'apparaîtrons pas (enfin s'il y a problème, j'éditerais mon message).

En tous cas oui c'est sur un attribut id doit être unique. C'est à dire que tu ne peux pas avoir dans la même page un <p id="abc"> et un <span id="abc">.
Pour pouvoir utiliser plusieurs fois une valeur c'est class et non id (mais ce n'est pas tout à fait la même chose)

<{POST_SNAPBACK}>

J'ai encore rien compris :blush:

Voici le code source d'une de mes pages (elles sont pratiquement toutes faites de la même manière) :

<!--

KIT GRAPHIQUE PAR BOZ

http://www.gorets.com

TELECHARGE SUR KITGRAFIK

http://www.kitgrafik.com

-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

function ScanCookie(variable)

{

cook = document.cookie;

variable += "=";

place = cook.indexOf(variable,0);

if (place <= -1)

return("0");

else

{

end = cook.indexOf(";",place)

if (end <= -1)

return(unescape(cook.substring(place+variable.length,cook.length)));

else

return(unescape(cook.substring(place+variable.length,end)));

}

function CreationCookie(nom,valeur,permanent)

{

if(permanent)

{

dateExp = new Date(2020,11,11);

dateExp = dateExp.toGMTString();

ifpermanent = '; expires=' + dateExp + ';';

}

else

ifpermanent = '';

document.cookie = nom + '=' + escape(valeur) + ifpermanent;

}

if(ScanCookie("disclaimerok")==0)

{

ouinon=confirm("ATTENTION : SITE STRICTEMENT RESERVE AUX ADULTES ! ! !\n"+"\n"+"Le contenu de ce site ainsi que les contenus vers lesquels pointent les liens de ce site sont érotiques et réservés aux adultes. Ils peuvent choquer certaines sensibilités\n"+"\n"+"Pour entrer dans ce site cliquez sur OK\n"+"\n"+"SI VOUS ETES MINEUR (- 18 ans), pour quitter ce site, CLIQUEZ SUR ANNULER.");

if (ouinon==false){

document.location="http://www.clicmineur.org";

}

else {CreationCookie("disclaimerok","oui",false);}

}

</script>

<title>adultes pg 1</title>

#container { background: url(../Nouveaux%20fichiers/04.jpg) repeat-y 711px 91px; margin: 0 auto; padding: 0; border-right: 1px solid #818181; border-bottom: 1px solid #818181; border-left: 1px solid #818181; position: relative; top: 0px; left: 0px; width: 768px; visibility: visible; display: block }

--></style>

</head>

<body>

<div class="titreMenu">Fonds d'écran</div>

<ul>

<li><a href="../menunature.html">Nature</a></li>

<li><a href="../menanimaux.html">Animaux</a></li>

</ul>

</div>

</div>

<div class="titreMenu">Images</div>

<ul>

<li><a href="../pagesimages/miniphotos1.html">Mini-photos</a></li>

<li><a href="../pagesimages/avatarsanimes1.html">Avatars animés</a></li>

<li><a href="../pagesimages/avatars1.html">Avatars</a></li>

<li><a href="../pagesimages/blinkies1.html">Blinkies et animations</a></li>

</ul>

</div>

</div>

Section adultes

</div>

<ul>

<li><a href="adultes1.html">Fonds d'écrans</a></li>

<li><a href="photos1.html">Photos</a></li>

</ul>

</div>

Aide

</div>

<ul>

<li><a href="../aide/aide1.html">Comment enregistrer un fond d'écran </a></li>

<li><a href="../aide/aide2.html">Comment enregistrer une image</a></li>

<li><a href="../aide/aide3.html">Comment redimensionner une image</a></li>

<li><a href="../aide/aide4.html">Comment utiliser une image sur un forum</a></li>

<li><a href="../aide/aide5.html">Important : droits d'auteurs

</a></li> </ul>

</div>

</div>

<div class="titreMenu">Newsletter</div>

<label for="Email">Email : <input type="text" name="Email" size="19" maxlength="40" value="" id="Email" /></label>

<br />

<input type="submit" value="Valider" class="sub" /> <a href="#" title="Désabonnement ">Désabonnement </a>

</p>

</form>

</div>

</div>

<div class="titre">Bienvenue sur Merveilles du Web</div>

<div class="soustitre">Vous êtes dans la section Adultes, voici les fonds d'écran </div>

<div class="bloc"> Des contours ont été ajoutés aux images mais ils n'apparaîtront pas sur vos fonds. Pour accéder au fond d'écran, cliquez sur la miniature. N'hésitez pas à consulter la section aide. <br /> Vous trouverez ici essentiellement des photos sexy de célébrités mais pas de pornographie.</div>

<div class="titre">Les fonds d'écran Adultes</div>

Faites votre choix :

</center></div>

</div>

<a href="../index.html">Page d'accueil</a>, Page 1, <a href="adultes3.html">Page 2</a>,<a href="adultes3.html"> Page 3</a></CENTER></div>

</div>

<br />

Les bons plans</div>

N'hésitez pas à cliquer et à vous inscire. </div>

Integer dui augue, tempor in, mattis a, aliquet at, enim. Vestibulum tristique venenatis ante. Nulla viverra justo sit amet est. Aliquam erat volutpat. Fusce vestibulum. Vivamus elementum mi at orci. Nam ullamcorper, lorem ac feugiat sollicitudin, urna elit tincidunt nibh, sit amet laoreet felis odio a diam. Curabitur tempor, sapien a accumsan molestie, sem dolor consectetuer purus, id vestibulum sapien eros nec nulla. Praesent tempor orci et ante. Phasellus dictum tristique enim.

</div>

</div>

.</div>

<br />

</div>

<!-- Extrait de la Faq de Kitgrafik :

Puis-je retirer le copyright des kits ? En règle générale, vous n'avez pas le droit de retirer le nom du graphiste de votre kit.

Par contre, vous pouvez, si vous le desirez, retirer la mention "pour KitGrafik". -->

Copyright © 2004 Merveillesduweb | Design © 2004 <a href="http://www.gorets.com" title="Contactez le créateur de ce design">Boz</a> pour <a href="http://www.Merveillesduweb.com" >Merveillesduweb.com</a>

</div>

</div>

</body>

</html>

Dudu · 2 Septembre 2005

Ah si c'est un site à contenu adulte, non pas de lien sur le Hub désolé

Pour en revenir à ton code source, tu as par exemple plusieurs fois la référence <div id="corps"> donc l'id "corps" est définie plusieurs fois et çà provoque une erreur au validateur (çà pourra aussi en provoquer une fois le site en ligne).

Au choix:

* gardes "corps" pour une seule des balises <div> et trouve autre chose pour les autres. Exemple: <div id="corps"> <div id="corps1> <div id="corps2">

* ou bien remplaces "id" par "class"

Et également remplace tous les <center> par des <div align="center">; et parallèlement tous les </center> par des </div> (tout court)

Çà devrait régler un certain nombre de problèmes

miloumoi · 2 Septembre 2005

Ah si c'est un site à contenu adulte, non pas de lien sur le Hub désolé

Pour en revenir à ton code source, tu as par exemple plusieurs fois la référence <div id="corps"> donc l'id "corps" est définie plusieurs fois et çà provoque une erreur au validateur (çà pourra aussi en provoquer une fois le site en ligne).

Au choix:

* gardes "corps" pour une seule des balises <div> et trouve autre chose pour les autres. Exemple: <div id="corps"> <div id="corps1> <div id="corps2">

* ou bien remplaces "id" par "class"

<{POST_SNAPBACK}>

Bon alors j'ai essayé les 2 méthodes et ça me change la mise en page. Si j'ai bien compris, l'id "corps" est définie plusieurs fois dans mon document mais renvoie toujours à la même chose dans mon css. Si je fais un copier/coller de la partie "corps" de mon css et que je renomme à chaque fois "corps1", corps2", ... cela resoudra-t'il le problème ?

miloumoi · 2 Septembre 2005

J'édite mon message car en fait ce que j'ai fait ne fonctionne pas. Le css est le même pour toutes les pages. La page d'accueil n'a aucune erreur par contre sur toutes les autres j'ai un problème d'id "centre" et d'id "corps".

Je sais que c'est peut-être stupide de dire ça mais en quoi cela pose-t'il problème de laisser ces id comme ils sont puisque c'est le même modèle sur chaque page ?

Pour info, voici mon css :

_AT_charset "iso-8859-1";

/*

KIT GRAPHIQUE PAR BOZ

http://www.gorets.com

TELECHARGE SUR KITGRAFIK

http://www.kitgrafik.com

*/

html, body {

background-color: #FFFFFF;

padding: 0;

margin: 0;

font: 11px/16px "trebuchet ms", arial, helvetica, sans-serif;

color: #000000;

text-align: center;

}

a:link, a:visited {

color: #A4003B;

font-weight: bold;

text-decoration: none;

background: transparent;

}

a:active, a:hover {

color: #E46AC4;

text-decoration: underline;

}

form {

margin: 0px;

padding:0px;

text-align: left;

margin-left: 10px;

color: #818181;

font-weight: bold;

}

input {

width: 100px;

height: 18px;

font-size: 10px;

}

p {

margin: 5px 0 5px 0;

}

.right {

float: right;

}

.myp {

margin: 0;

}

.miniTitre {

text-decoration: underline;

font-weight: bold;

}

#Pass {

width: 100px;

margin-left: 7px;

}

.sub {

width: auto;

}

#container {

display: block;

margin: 0 auto;

padding: 0;

position: relative;

width: 768px;

border-left: 1px solid #818181;

border-right: 1px solid #818181;

border-bottom: 1px solid #818181;

background: url("images/04.jpg");

background-position: 711px 91px;

background-repeat: repeat-y;

}

#header {

background: url("images/01bis.jpg");

background-repeat: no-repeat;

height: 91px;

}

#corps {

width: 100%;

display: block;

background: url("images/03.jpg");

background-position: left 71px;

background-repeat: repeat-y;

background-color: transparent;

}

#end {

clear: both;

height: 0;

line-height: 0;

font-size: 1px;

}

/* colonne gauche */

#gauche {

width: 176px;

float: left;

display: block;

}

/* colonne centre */

#centre {

width: 590px;

float: right;

text-align: left;

display: block;

}

#gauche span#top{

width: 176px;

height: 71px;

display: block;

}

#gauche div.titreMenu{

width: 162px;

height: 30px;

display: block;

color: #A4003B;

font-size: 18px;

font-weight: bold;

text-align: left;

text-indent: 30px;

line-height: 28px;

margin: auto;

}

#gauche div.menu{

background-repeat: repeat-y;

width: 162px;

text-align: left;

display: block;

margin: auto;

}

#gauche div.piedMenu{

width: 162px;

height: 7px;

border: 0px solid black;

line-height: 1px;

margin-bottom: 10px;

display: block;

margin: auto;

margin-bottom: 10px;

}

.menu ul {

margin: 0;

padding: 0;

}

.menu li{

font-size: 12px;

list-style-type: disc;

color: #A4003B;

display: marker;

margin: 0 0 0 25px;

padding: 0;

height: auto;

}

.menu li a {

color: #A4003B;

font-weight: bold;

text-decoration: none;

background: transparent;

display: inline;

width: auto;

}

.menu li a:link, .menu li a:visited {

color: #A4003B;

}

.menu li a:hover {

color: #E46AC4;

text-decoration: underline;

}

/* banniere centre */

#centre span#banniere{

width: 515px;

display: block;

margin: 10px 0 10px 10px;

text-align: center;

}

/* titres centre */

#centre div.titre{

width: 515px;

height: 48px;

display: block;

color: #FFAE00;

font-size: 20px;

font-style: italic;

font-weight: bold;

text-align: left;

text-indent: 50px;

line-height: 22px;

margin-left: 10px;

margin-top: 5px;

}

/* sous titres centre */

#centre div.soustitre{

width: 515px;

display: block;

color: #E46AC4;

font-size: 16px;

font-weight: bold;

text-align: left;

margin-left: 10px;

}

/* blocs centre */

#centre div.bloc{

width: 515px;

display: block;

font-size: 12px;

text-align: left;

margin-left: 10px;

}

#footer {

font-size: 10px;

width: 100%;

clear: both;

}

Merci beaucoup

Modifié 2 Septembre 2005 par miloumoi

Connexion

validation du code source

Sujets conseillés

miloumoi

Dudu

miloumoi

Dudu

miloumoi

miloumoi

Veuillez vous connecter pour commenter

Parcourir

Activité