Aide page web de contenu simple xhtml/css

chessou · Le 10/04/2015, à 10:11

Bonjour à tous,

N'ayant pas eu de retour sur mon autre post j'ai pris l'initiative de programmer un petit site web pour mettre des donnés en ligne.

Le but est simple, mettre à disposition de joueurs une base en ligne avec visionneuse d'échecs intégrée, site accessible uniquement grâce à un login.
Étant absolument novice j'aurais besoin d'une aide assez basique.
J'espère trouver de l'aide ici ou je veux bien une autre adresse de forum connu pour l'aide pour le xhtml si je ne suis pas à l'endroit approprié.

Tout fonctionne bien pour l'instant pour ce qui est de la visionneuse (basée sur ce site:http://chesstempo.com/pgn-usage.html) mais quelques points ralentissent le projet:
- dans le code on indique où se trouve le fichier que l'on veut lire avec le lecteur PGN, mais j'aimerais que ce soit l'inverse, que l'on navigue dans la base via le site et quand on clique sur le fichier que l'on veut lire il s'ouvre dans le lecteur, comment procéder?
-comment mettre en ligne une arborescence de dossier contenant des fichiers, afin de pouvoir naiguer dedans? Dois je créer une page xhtml pour chaque dossier?

Voilà, en espérant obtenir de l'aide, ce projet pourrait intéresser d'autres personnes par dessus le marché Je pense que ce projet est simple alors je devrais pas trop vous embêter.

Merci beaucoup!

PS: Voici le code, vous remarquerez en fin de code la ligne ou l'on indique le chemin du fichier à lire (ici pgnFile: '/home/moi/Documents/Echecs/Base/Lecteur pgn html/lejoueur.pgn'):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Lecteur PGN Beta Chesstempo</title>
  </head>
  <body>
       <!-- Support libraries from Yahoo YUI project -->  
    <script type="text/javascript"  
        src="http://chesstempo.com/js/pgnyui.js">  
    </script>   
    <script type="text/javascript"  
        src="http://chesstempo.com/js/pgnviewer.js">  
    </script>  
<link  
 type="text/css"   
 rel="stylesheet"   
 href="http://chesstempo.com/css/board-min.css"  
/>  
    <link  
     type="text/css"   
     rel="stylesheet"   
     href="/home/yoann/Documents/Echecs/Base EN/Lecteur pgn html/style.css">  
    </link>  
    <script>  
    new PgnViewer(  
      { boardName: "demo",  
        pgnFile: '/home/moi/Documents/Echecs/Base/Lecteur pgn html/lejoueur.pgn',  
        pieceSet: 'merida',
	movesFormat: "main_on_own_line",   
        pieceSize: 46  
}  
    );  
    </script>   
    <div id="demo-container"></div>  
    <div id="demo-moves"></div>  
  </body>
</html>

Dernière modification par chessou (Le 10/04/2015, à 10:26)

Rufus T. Firefly · Le 10/04/2015, à 13:54

Salut,

Déjà une petite remarque : en principe les appels de css, script et autres fichiers à charger, il vaut mieux les ranger dans <head>, <body> ne servant que pour le contenu. Sinon ça devient très vite assez bordélique (même si ça fonctionne)...

Ensuite, si j'ai bien compris, tu voudrais que l'utilisateur de ton site dispose d'une liste (sous une forme ou une autre) des fichiers pgn disponibles, de sorte que lorsqu'il en choisit un, la partie correspondante s'affiche dans le lecteur.
Ce qui revient à créer un nouveau lecteur avec pgnFile: '/home/moi/Documents/Echecs/Base/Lecteur pgn html/fichier_choisi.pgn'
Pour faire une telle liste, tu as la balise <select id="choix"> et à l'intérieur les <option value="fichier_possible">Description</option>
Evidemment il y a 36 façons de faire...
Pour la liste et la syntaxe des balises xhtml : http://giminik.developpez.com/xhtml/index.php

Une fois que tu as la liste, il faut encore la rendre dynamique, puisque pour l'instant il ne se passe rien quand tu choisis une option. Et ça, on peut le faire en javascript (ou l'intégrer dans la balise, mais c'est très vilain et non conforme au standard xhmtl)

var el=document.getElementById("choix") ; // cherche l'élément qui a "choix" pour id, donc le <select>
el.addEventListener("change", afficherPartie, false) ; // ajoute le détecteur d'événement "change"

Donc quand la sélection change, la fonction afficherPartie est appelée.
Source : http://www.gchagnon.fr/cours/dhtml/evenements.html

Reste à concocter cette fonction. Ça pourrait être une truc de ce genre :

function afficherPartie (event) { // event est l'événement qui a appelé
  var opt = event.target.value ; // la valeur de select, donc de l'option choisie, donc le nom du fichier pgm
  pgnF = '/home/moi/Documents/Echecs/Base/Lecteur pgn html/' + opt + '.pgn' ;
  new PgnViewer (  
     { boardName: 'demo',  
        pgnFile: pgnF,  
        pieceSet: 'merida',
	movesFormat:'main_on_own_line',   
        pieceSize: 46
    }  // les accolades me paraissent un peu bizarres (double emploi avec les parenthèses ?)
    ) ;
}

Je ne suis pas sûr du tout que pgnFile: pgnF, passera tel quel. Il faudra peut-être ruser et faire autrement. Mais je ne connais pas du tout ce PgnViewer et encore moins sa syntaxe...

Donc en définitive :

<?xml version="1.0" encoding="UTF-8"?>
<!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="en" lang="en" />
<head>
    <title>Lecteur PGN Beta Chesstempo</title>
    <link type="text/css" rel="stylesheet" href="http://chesstempo.com/css/board-min.css" />  
    <link type="text/css" rel="stylesheet" href="/home/yoann/Documents/Echecs/Base EN/Lecteur pgn html/style.css" />  
    <script type="text/javascript" src="http://chesstempo.com/js/pgnyui.js"></script>   
    <script type="text/javascript" src="http://chesstempo.com/js/pgnviewer.js"></script>
    <script type="text/javascript" src="/home/yoann/Documents/Echecs/Base EN/Lecteur pgn html/mon_script.js"></script>  
</head>
<body>
    <select id="choix">
       <option value="fichier1">description 1</option>
       <option value="fichier2">description 2</option>
       ...
    </select>
    <div id="demo-container"></div>  
    <div id="demo-moves"></div>  
</body>
</html>

Et le fichier /home/yoann/Documents/Echecs/Base EN/Lecteur pgn html/mon_script.js :

// ajoute le gestionnaire d'événement lors du chargement de la page
window.onload = function() {
  var el=document.getElementById("choix") ;
  el.addEventListener("change", afficherPartie, false) ;
}
// création et affichage d'une visionneuse en fonction de la sélection
function afficherPartie (event) {
  var opt = event.target.value ; 
  pgnF = '/home/moi/Documents/Echecs/Base/Lecteur pgn html/' + opt + '.pgn' ;
  new PgnViewer (  
     {  boardName: 'demo',  
        pgnFile: pgnF,  
        pieceSet: 'merida',
	movesFormat: 'main_on_own_line',   
        pieceSize: 46
     } 
  ) ;
}

Bien entendu, ce ne sont que des idées, brutes de décoffrage, avec les inévitables erreurs de syntaxe (et même de conception, ne maîtrisant pas du tout le problème posé)... C'est juste destiné à te donner une idée de ce qu'on peut faire. Et puis il faudra peut-être penser à php, aussi. Parce que si tu as quelques centaines d'options et qu'elles sont en plus susceptibles de changer, il vaudrait réfléchir à une construction automatique...

Je n'ai pas envisagé la seconde partie : naviguer dans une arborescence... C'est forcément plus compliqué... Et là, php s'impose, tôt ou tard.

Dernière modification par Rufus T. Firefly (Le 10/04/2015, à 14:16)

chessou · Le 10/04/2015, à 14:35

Déjà merci Rufus T. Firefly de m'aider et de m'avoir répondu, c'est clair avec plein de commentaires, tu as du passé un peu de temps donc c'est sympa.

Bon c'est bien ce que je craignais ça ne va pas être si simple...
Je vais prendre un peu de temps pour potasser tout ce que tu m'as mis car étant néophyte en la matière c'est un peu raide mais je devrais y arriver!
Je vois également que je vais pas pouvoir échapper au .php...

Donc je vais établir un plan en 3 temps:
- je tente de mettre en place avec ton post la lecture auto des pgn avec le lecteur (pour info il est sous licence common creative donc pas libre j'imagine, donc on a pas le code). ça conditionne la création de la page internet, si ça ne marche pas inutile d'aller plus loin
-je me lance dans la création de l'arborescence donc le PHP
-je mets un login à l'entrée (php j'imagine?)

Voilà je vais travailler ça et je vous reviens au fur et à mesure de mon avancement.

Rufus T. Firefly · Le 10/04/2015, à 15:10

Tu sais, concocter un site c'est un vrai boulot ! Effectivement, on peut faire ça soi-même, mais il y a des choses à apprendre...

En revanche de loin, sans avoir tout sous la main, c'est impossible. C'est de l'informatique ! J'ai mentionné les accolades dans une parenthèse. Je ne sais pas d'où elles sortent, ni pourquoi elles sont là... Ça a l'air d'un détail. Certes... Pour un humain... Pour une machine, ça signifie que ça va fonctionner ou bien planter...

Quand c'est javascript, il ne moufte pas, il se contente de s'arrêter. Et bien sûr rien ne fonctionne plus... Donc il faut chercher l'erreur dans la console javascript. Dans firefox : outils-> développement web -> console, ou bien alors dans l'extension firebug (outils -> modules complémentaires)... Mais on ne peut pas faire ça à distance, comparer avec le code...

Je crains que l'aide qu'on (en tous cas moi) pourra t'apporter risque d'être très limitée par la force des choses...

chessou · Le 10/04/2015, à 15:41

Oui je ne doute pas que c'est un vrai travail, je le vois bien d'ailleurs! Mais quelque chose de si simple, j'espère y arriver, de plus je trouve ça intéressant. En tout cas l'aide que tu m'apportes est déjà très bonne, ça marche presque:

je peux choisir les fichiers à ouvrir mais les lecteurs pgn apparaissent les uns à la suite des autres dans la page, bordélique, il faudrait qu'il recharge un nouveau lecteur et qu'il oublie le précédent quand je change de liste fichiers. Une sorte de refresh à chaque changement de fichier. Tu as une idée?

Dernière modification par chessou (Le 10/04/2015, à 15:43)

Rufus T. Firefly · Le 10/04/2015, à 16:52

Je m'imagine que la création de la visionneuse remplit ces trucs-là (mais bien sûr je n'en sais rien du tout, et c'est un exemple de ce que je disais plus haut : la solution dépend de ce qui se passe effectivement et non pas de mes suppositions) :

    <div id="demo-container"></div>  
    <div id="demo-moves"></div>

Donc il faut fabriquer une fonction qui les récupère (facile, cf plus haut) puis qui les vide (il y a au moins 2 méthodes, celle qui est homogène avec le reste, via nodeValue, et l'autre moins "propre", via innerHTML), et l'appeler avant de créer une nouvelle instance de la visionneuse...

Tiens, encore un truc : http://jacques-guizol.developpez.com/javascript/
Et ça, aussi : http://www.w3schools.com/js/default.asp
C'est en anglais, mais comme c'est le w3c, ça respecte parfaitement les standards.

Dernière modification par Rufus T. Firefly (Le 10/04/2015, à 17:16)

chessou · Le 10/04/2015, à 17:21

Merci Rufus T. Firefly, j'ai traduit ton dernier message et je sens qu'il veut dire "maintenant tu vas te débrouiller on va pas tout t'écrire!"

Bon j'ai pas très bien capté mais je vais réfléchir, je vais bien finir par y arriver, bon pour les cours de java on verra quand j'aurais changé de métier . Merci pour tout les liens en tout cas!

Rufus T. Firefly · Le 10/04/2015, à 17:52

chessou a écrit :

Merci Rufus T. Firefly, j'ai traduit ton dernier message et je sens qu'il veut dire "maintenant tu vas te débrouiller on va pas tout t'écrire!"

Il y a du vrai. Mais j'ai bien précisé que je ne vois pas ce qui se passe et donc je ne vais pas écrire des fonctions éventuellement pour des queues... Ça n'a pas de sens de faire ça ! Un joueur d'échec peut comprendre ça !

chessou a écrit :

Bon j'ai pas très bien capté mais je vais réfléchir, je vais bien finir par y arriver, bon pour les cours de java on verra quand j'aurais changé de métier . Merci pour tout les liens en tout cas!

Javascript ! Strictement aucun rapport avec java...
Et apprendre javascript, c'est plus facile que d'analyser la partie de Spassky et Hutch de 1972...
Pour ta question, il faut que tu regardes le code source de la page après apparition de la première visionneuse, pour voir ce qui s'est passé et où elle niche. Tant qu'on ne le sait pas, on ne peut pas la faire disparaître. Un conseil, installe l'extension firebug, c'est assez pratique pour ce genre de choses...

chessou · Le 10/04/2015, à 17:59

Oui oui tout à fait ce n'était pas une critique, je comprends et de toute façon il faut que je tente tout seul, j'ai le matériel sous le coude donc s'est plus facile si c'est moi qui "fonctionne" .

J'ai installé firebug, je fouine dans tout ça... en espérant que ça marche!

En tout cas vu ce qu'il y a écrit sur le site de l'échiquier en ligne tu dois être dans le vrai:

L'étape suivante est d'indiquer au lecteur PGN où placer l'échiquier (et éventuellement la liste de coups). Au démarrage, le lecteur PGN va chercher les éléments <div> avec des id associés au nom de l'échiquier (option vue plus haut). Dans l'exemple mentionné plus haut d'un boardName 'demo', une <div> avec l'id 'demo-container' sera utilisé pour afficher l'échiquier. Pour la liste des coups, il s'agit de la <div> avec l'id 'demo-moves'. Ces éléments <div> peuvent être ajoutés n'importe où dans votre page et ne doivent pas forcément être ensembles. L'exemple suivant placera la liste de coups juste après l'échiquier :
<div id="demo-container"></div>
<div id="demo-moves"></div>

Etrangement le "demo-moves" semble ne pas poser problème, les coups étant bien remplacés par les nouveaux sans superposition.

Dernière modification par chessou (Le 10/04/2015, à 18:18)

chessou · Le 10/04/2015, à 18:26

Voilà avec Firebug on dirait que c'est bien ça c'est le demo-container qui se remplit au fur et à mesure:

Premier fichier ouvert:

<div id="demo-container" class="ct-board-container" style="display: block;">
<div>
<div id="demo-boardBorder" class="ct-board-border" style="width: 368px; height: 368px;">
<div id="demo-ct-nav-container">
</div>

Deuxième fichier ouvert:

<div id="demo-container" class="ct-board-container" style="display: block;">
<div>
<div id="demo-boardBorder" class="ct-board-border" style="width: 368px; height: 368px;">
<div id="demo-ct-nav-container">
<div id="demo-boardBorder" class="ct-board-border" style="width: 368px; height: 368px;">
</div>

Donc maintenant plus qu'à écrire la fonction.

Rufus T. Firefly · Le 10/04/2015, à 19:02

Là il manque des choses !
Il y a plein de balises <div> mais pas autant de fermetures </div>. Ce qui n'est pas normal !
Et il n'y a aucun contenu, en tous cas visible sur ce que tu mets ici...
<div id="demo-container" class="ct-board-container" style="display: block;"> ne représente que des attributs (id, class, style) de la balise elle-même. Mais ça ne définit pas de contenu.
Et en plus, il y a des <div> qui ont été crées dynamiquement (par un des scripts que tu as mis dans <head>).
Ça se complique !
Mais comme toutes ces <div> ont un id qui commence par "demo-quelque chose", il est peut être plus simple de récupérer toutes les <div> de la page, var divs = document.getElementsByTagName("div"), les passer en revue (avec une boucle for), supprimer celles qui ont un id adéquat, puis recréer les 2 qu'il y avait au départ...

A moins qu'il y ait un destructeur de prévu, en plus du constructeur new (ce serait plus simple)...

Dernière modification par Rufus T. Firefly (Le 10/04/2015, à 19:17)

chessou · Le 10/04/2015, à 19:43

ça y est je décroche!!!

Là ça devient vraiment raide, je mets le tout déroulé (tu vas comprendre pourquoi je l'ai pas fait avant...), j'ai pas déroulé tout les <div> car ça se répète:

Avant:

<select id="choix">
<option value="nicolasguillaume">Nicolas Guillaume</option>
<option value="nobletfranck">Noblet Franck</option>
</select>
<div id="demo-container" class="ct-board-container" style="display: block;">
<div>
<form id="demo-problemSelectorForm" method="" action="">
</div>
<div id="demo-boardBorder" class="ct-board-border" style="width: 368px; height: 368px;">
<div id="demo-rankLabels" style="float: left; display: none;"></div>
<div id="ctb-demo" class="ct-board" style="width: 368px; height: 368px;">
<div>
<div id="demo-s07" class="ct-white-square" style="width:46px;height:46px;background-position:42.10526315789473% 0%">
<div id="yui-gen0" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackrook46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
</div>
<div id="demo-s17" class="ct-black-square" style="width:46px;height:46px;background-position:84.21052631578947% 57.89473684210527%">
<div id="yui-gen1" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackknight46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
</div>
<div id="demo-s27" class="ct-white-square" style="width:46px;height:46px;background-position:26.31578947368421% 15.789473684210526%">
<div id="yui-gen2" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackbishop46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
</div>
<div id="demo-s37" class="ct-black-square" style="width:46px;height:46px;background-position:68.42105263157895% 73.68421052631578%">
<div id="yui-gen3" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackqueen46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
</div>
<div id="demo-s47" class="ct-white-square" style="width:46px;height:46px;background-position:10.526315789473683% 31.57894736842105%">
<div id="yui-gen4" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackking46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
</div>
<div id="demo-s57" class="ct-black-square" style="width:46px;height:46px;background-position:52.63157894736842% 89.47368421052632%">
<div id="yui-gen5" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackbishop46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
</div>
<div id="demo-s67" class="ct-white-square" style="width:46px;height:46px;background-position:94.73684210526315% 47.368421052631575%">
<div id="yui-gen6" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackknight46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
</div>
<div id="demo-s77" class="ct-black-square" style="width:46px;height:46px;background-position:36.84210526315789% 5.263157894736842%">
<div id="yui-gen7" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackrook46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
</div>
<div id="demo-fileLabels" style="display: none;"></div>
</div>
<div id="demo-ct-nav-container">
<div id="demo-navButtons" class="ct-nav-buttons">
<span id="demo-nav-buttons-only">
<img id="demo-start" class="ct-start" title="Go to starting position" alt="Start position" src="http://chesstempo.com/images/disabled_resultset_first.vers1.gif">
<img id="demo-back" class="ct-back" title="Go back a move" alt="Previous Move" src="http://chesstempo.com/images/resultset_previous_disabled.vers1.gif">
<img id="demo-forward" class="ct-forward" title="Go forward a move" alt="Next Move" src="http://chesstempo.com/images/resultset_next.vers1.gif">
<span id="playStopSpan">
<img id="demo-end" class="ct-end" title="Go to final position" alt="End position" src="http://chesstempo.com/images/resultset_last.vers1.gif">
<img id="demo-play" class="ct-play" title="Play sequence of moves" alt="Play moves" src="http://chesstempo.com/images/control_play_blue.vers1.gif">
<img id="demo-stop" class="ct-stop" title="Stop playing move sequence" alt="Stop playing" src="http://chesstempo.com/images/control_stop_blue.vers1.gif">
</span>
</span>
</div>
</div>
</div>
<div id="demo-moves">
<br>
<span id="demo-m0" class="ct-board-move-mainline ct-first-move " title="">
<span id="demo-m1" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m2" class="ct-board-move-mainline" title="">
<span id="demo-m3" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m4" class="ct-board-move-mainline" title="">
<span id="demo-m5" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m6" class="ct-board-move-mainline" title="">
<span id="demo-m7" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m8" class="ct-board-move-mainline" title="">
<span id="demo-m9" class="ct-board-move-mainline" title="">
<div class="ct-mainline-commentary">
<br>
<span id="demo-m16" class="ct-board-move-mainline" title="">
<span id="demo-m17" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m18" class="ct-board-move-mainline" title="">
<span id="demo-m19" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m20" class="ct-board-move-mainline" title="">
<span id="demo-m21" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m22" class="ct-board-move-mainline" title="">
<span id="demo-m23" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m24" class="ct-board-move-mainline" title="">
<span id="demo-m25" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m26" class="ct-board-move-mainline" title="">
<span id="demo-m27" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m28" class="ct-board-move-mainline" title="">
<span id="demo-m29" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m30" class="ct-board-move-mainline" title="">
<span id="demo-m31" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m32" class="ct-board-move-mainline" title="">
<span id="demo-m33" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m34" class="ct-board-move-mainline" title="">
<span id="demo-m35" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m36" class="ct-board-move-mainline" title="">
<span id="demo-m37" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m38" class="ct-board-move-mainline" title="">
<span id="demo-m39" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m40" class="ct-board-move-mainline" title="">
<span id="demo-m41" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m42" class="ct-board-move-mainline" title="">
<span id="demo-m43" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m44" class="ct-board-move-mainline" title="">
<span id="demo-m45" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m46" class="ct-board-move-mainline" title="">
<span id="demo-m47" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m48" class="ct-board-move-mainline" title="">
<span id="demo-m49" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m50" class="ct-board-move-mainline" title="">
<span id="demo-m51" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m52" class="ct-board-move-mainline" title="">
<span id="demo-m53" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m54" class="ct-board-move-mainline" title="">
<span id="demo-m55" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m56" class="ct-board-move-mainline" title="">
<span id="demo-m57" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m58" class="ct-board-move-mainline" title="">
<span id="demo-m59" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m60" class="ct-board-move-mainline" title="">
<span id="demo-m61" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m62" class="ct-board-move-mainline" title="">
<span id="demo-m63" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m64" class="ct-board-move-mainline" title="">
<span id="demo-m65" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m66" class="ct-board-move-mainline" title="">
<span class="ct-result">1/2-1/2</span>
</div>
<div id="pieceDragDiv" style="visibility: hidden; border: 0px none; position: absolute;"></div>

Après:

<select id="choix">
<option value="nicolasguillaume">Nicolas Guillaume</option>
<option value="nobletfranck">Noblet Franck</option>
</select>
<div id="demo-container" class="ct-board-container" style="display: block;">
<div>
<form id="demo-problemSelectorForm" method="" action="">
</div>
<div id="demo-boardBorder" class="ct-board-border" style="width: 368px; height: 368px;">
<div id="demo-rankLabels" style="float: left; display: none;"></div>
<div id="ctb-demo" class="ct-board" style="width: 368px; height: 368px;">
<div>
<div id="demo-s07" class="ct-white-square" style="width:46px;height:46px;background-position:42.10526315789473% 0%">
<div id="yui-gen0" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackrook46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
<div id="yui-gen32" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackrook46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
</div>
<div id="demo-s17" class="ct-black-square" style="width:46px;height:46px;background-position:84.21052631578947% 57.89473684210527%">
<div id="yui-gen1" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackknight46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
<div id="yui-gen33" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackknight46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
</div>
<div id="demo-s27" class="ct-white-square" style="width:46px;height:46px;background-position:26.31578947368421% 15.789473684210526%">
<div id="yui-gen2" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackbishop46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
<div id="yui-gen34" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackbishop46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
</div>
<div id="demo-s37" class="ct-black-square" style="width:46px;height:46px;background-position:68.42105263157895% 73.68421052631578%">
<div id="yui-gen3" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackqueen46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
<div id="yui-gen35" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackqueen46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
</div>
<div id="demo-s47" class="ct-white-square" style="width:46px;height:46px;background-position:10.526315789473683% 31.57894736842105%">
<div id="yui-gen4" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackking46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
<div id="yui-gen36" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackking46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
</div>
<div id="demo-s57" class="ct-black-square" style="width:46px;height:46px;background-position:52.63157894736842% 89.47368421052632%">
<div id="yui-gen5" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackbishop46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
<div id="yui-gen37" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackbishop46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
</div>
<div id="demo-s67" class="ct-white-square" style="width:46px;height:46px;background-position:94.73684210526315% 47.368421052631575%">
<div id="yui-gen6" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackknight46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
<div id="yui-gen38" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackknight46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
</div>
<div id="demo-s77" class="ct-black-square" style="width:46px;height:46px;background-position:36.84210526315789% 5.263157894736842%">
<div id="yui-gen7" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackrook46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
<div id="yui-gen39" class="board-piece-start-style" style="visibility: visible; background-image: url("http://chesstempo.com/images/merida/blackrook46.vers1.png"); height: 46px; width: 46px; position: relative;"></div>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
</div>
<div id="demo-fileLabels" style="display: none;"></div>
</div>
<div id="demo-ct-nav-container">
<div id="demo-navButtons" class="ct-nav-buttons">
<span id="demo-nav-buttons-only">
<img id="demo-start" class="ct-start" title="Go to starting position" alt="Start position" src="http://chesstempo.com/images/disabled_resultset_first.vers1.gif">
<img id="demo-back" class="ct-back" title="Go back a move" alt="Previous Move" src="http://chesstempo.com/images/resultset_previous_disabled.vers1.gif">
<img id="demo-forward" class="ct-forward" title="Go forward a move" alt="Next Move" src="http://chesstempo.com/images/resultset_next.vers1.gif">
<span id="playStopSpan">
<img id="demo-end" class="ct-end" title="Go to final position" alt="End position" src="http://chesstempo.com/images/resultset_last.vers1.gif">
<img id="demo-play" class="ct-play" title="Play sequence of moves" alt="Play moves" src="http://chesstempo.com/images/control_play_blue.vers1.gif">
<img id="demo-stop" class="ct-stop" title="Stop playing move sequence" alt="Stop playing" src="http://chesstempo.com/images/control_stop_blue.vers1.gif">
</span>
</span>
</div>
</div>
<div id="demo-boardBorder" class="ct-board-border" style="width: 368px; height: 368px;">
<div id="demo-rankLabels" style="float: left;"></div>
<div id="ctb-demo" class="ct-board" style="width: 368px; height: 368px;">
<div>
<div id="demo-s07" class="ct-white-square" style="width:46px;height:46px;background-position:42.10526315789473% 0%"></div>
<div id="demo-s17" class="ct-black-square" style="width:46px;height:46px;background-position:84.21052631578947% 57.89473684210527%"></div>
<div id="demo-s27" class="ct-white-square" style="width:46px;height:46px;background-position:26.31578947368421% 15.789473684210526%"></div>
<div id="demo-s37" class="ct-black-square" style="width:46px;height:46px;background-position:68.42105263157895% 73.68421052631578%"></div>
<div id="demo-s47" class="ct-white-square" style="width:46px;height:46px;background-position:10.526315789473683% 31.57894736842105%"></div>
<div id="demo-s57" class="ct-black-square" style="width:46px;height:46px;background-position:52.63157894736842% 89.47368421052632%"></div>
<div id="demo-s67" class="ct-white-square" style="width:46px;height:46px;background-position:94.73684210526315% 47.368421052631575%"></div>
<div id="demo-s77" class="ct-black-square" style="width:46px;height:46px;background-position:36.84210526315789% 5.263157894736842%"></div>
</div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
</div>
<div id="demo-fileLabels"></div>
</div>
</div>
<div id="demo-moves">
<div class="ct-mainline-commentary">
<br>
<span id="demo-m0" class="ct-board-move-mainline ct-first-move " title="">
<span id="demo-m1" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m2" class="ct-board-move-mainline" title="">
<span id="demo-m3" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m4" class="ct-board-move-mainline" title="">
<span id="demo-m5" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m6" class="ct-board-move-mainline" title="">
<span id="demo-m7" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m8" class="ct-board-move-mainline" title="">
<span id="demo-m9" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m10" class="ct-board-move-mainline" title="">
<span id="demo-m11" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m12" class="ct-board-move-mainline" title="">
<span id="demo-m13" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m14" class="ct-board-move-mainline" title="">
<span id="demo-m15" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m16" class="ct-board-move-mainline" title="">
<span id="demo-m17" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m18" class="ct-board-move-mainline" title="">
<span id="demo-m19" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m20" class="ct-board-move-mainline" title="">
<span id="demo-m21" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m22" class="ct-board-move-mainline" title="">
<span id="demo-m23" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m24" class="ct-board-move-mainline" title="">
<span id="demo-m25" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m26" class="ct-board-move-mainline" title="">
<span id="demo-m27" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m28" class="ct-board-move-mainline" title="">
<span id="demo-m29" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m30" class="ct-board-move-mainline" title="">
<span id="demo-m31" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m32" class="ct-board-move-mainline" title="">
<span id="demo-m33" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m34" class="ct-board-move-mainline" title="">
<span id="demo-m35" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m36" class="ct-board-move-mainline" title="">
<span id="demo-m37" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m38" class="ct-board-move-mainline" title="">
<span id="demo-m39" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m40" class="ct-board-move-mainline" title="">
<span id="demo-m41" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m42" class="ct-board-move-mainline" title="">
<span id="demo-m43" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m44" class="ct-board-move-mainline" title="">
<span id="demo-m45" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m46" class="ct-board-move-mainline" title="">
<span id="demo-m47" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m48" class="ct-board-move-mainline" title="">
<span id="demo-m49" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m50" class="ct-board-move-mainline" title="">
<span id="demo-m51" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m52" class="ct-board-move-mainline" title="">
<span id="demo-m53" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m54" class="ct-board-move-mainline" title="">
<span id="demo-m55" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m56" class="ct-board-move-mainline" title="">
<span id="demo-m57" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m58" class="ct-board-move-mainline" title="">
<span id="demo-m59" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m60" class="ct-board-move-mainline" title="">
<span id="demo-m61" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m62" class="ct-board-move-mainline" title="">
<span id="demo-m63" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m64" class="ct-board-move-mainline" title="">
<span id="demo-m65" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m66" class="ct-board-move-mainline" title="">
<span id="demo-m67" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m68" class="ct-board-move-mainline" title="">
<span id="demo-m69" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m70" class="ct-board-move-mainline" title="">
<span id="demo-m71" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m72" class="ct-board-move-mainline" title="">
<span id="demo-m73" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m74" class="ct-board-move-mainline" title="">
<span id="demo-m75" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m76" class="ct-board-move-mainline" title="">
<span id="demo-m77" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m78" class="ct-board-move-mainline" title="">
<span id="demo-m79" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m80" class="ct-board-move-mainline" title="">
<span id="demo-m81" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m82" class="ct-board-move-mainline" title="">
<span id="demo-m83" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m84" class="ct-board-move-mainline" title="">
<span id="demo-m85" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m86" class="ct-board-move-mainline" title="">
<span id="demo-m87" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m88" class="ct-board-move-mainline" title="">
<span id="demo-m89" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m90" class="ct-board-move-mainline" title="">
<span id="demo-m91" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m92" class="ct-board-move-mainline" title="">
<span id="demo-m93" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m94" class="ct-board-move-mainline" title="">
<span id="demo-m95" class="ct-board-move-mainline" title="">
<br>
<span id="demo-m96" class="ct-board-move-mainline" title="">
<br>
<div class="ct-mainline-commentary">
</div>
<div id="pieceDragDiv" style="visibility: hidden; border: 0px none; position: absolute;"></div>

Rufus T. Firefly · Le 10/04/2015, à 19:54

Un problème simple, qu'il disait...

Dernière modification par Rufus T. Firefly (Le 10/04/2015, à 19:56)

chessou · Le 10/04/2015, à 23:16

Là, j'avoue ça merdoie comme on dit.

Je vais m'arrêter là, il y a un moment il faut savoir ce que l'on vaut. C'est déjà pas à ma portée, imaginons alors après avec le PHP...

En tout cas merci de m'avoir aidé c'était très altruiste de ta part et j'aurai appris des choses, dont une particulièrement: c'est que même une action très simple peut demander de grosses compétences et beaucoup de travail en code.

Maintenant dodo...;)

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 10/04/2015, à 10:11

Aide page web de contenu simple xhtml/css

#2 Le 10/04/2015, à 13:54

Re : Aide page web de contenu simple xhtml/css

#3 Le 10/04/2015, à 14:35

Re : Aide page web de contenu simple xhtml/css

#4 Le 10/04/2015, à 15:10

Re : Aide page web de contenu simple xhtml/css

#5 Le 10/04/2015, à 15:41

Re : Aide page web de contenu simple xhtml/css

#6 Le 10/04/2015, à 16:52

Re : Aide page web de contenu simple xhtml/css

#7 Le 10/04/2015, à 17:21

Re : Aide page web de contenu simple xhtml/css

#8 Le 10/04/2015, à 17:52

Re : Aide page web de contenu simple xhtml/css

#9 Le 10/04/2015, à 17:59

Re : Aide page web de contenu simple xhtml/css

#10 Le 10/04/2015, à 18:26

Re : Aide page web de contenu simple xhtml/css

#11 Le 10/04/2015, à 19:02

Re : Aide page web de contenu simple xhtml/css

#12 Le 10/04/2015, à 19:43

Re : Aide page web de contenu simple xhtml/css

#13 Le 10/04/2015, à 19:54

Re : Aide page web de contenu simple xhtml/css

#14 Le 10/04/2015, à 23:16

Re : Aide page web de contenu simple xhtml/css

Pied de page des forums