Bonjour à tous,
Désolé pour ce titre plutôt abscons. Je programme un jeu multijoueur en HTML5+javascript+ARIA, et je suis plutôt nul en CSS. Pas facile d'expliquer son problème sans recourir à des images.
L'application se compose globalement de cinq zones :
- Un historique tout à gauche affichant les messages envoyés par le serveur au fur et à mesure qu'ils arrivent
- Trois zones à droite les unes des autres et à droite de l'historique contenant des boutons permettant d'agir sur le jeu, organisés par groupes: les actions directes du jeu lui-même, les options permettant de gérer la partie, et les options globales du genre rejoindre/inviter/quitter.
- En-dessous des quatre zones, une cinquième permettant de chatter
L'idée étant que les quatre premières zones soient côte à côte et de taille fixe mais de la bonne hauteur de sorte qu'il n'y ait ni place perdue, ni qu'il soit jamais nécessaire d'utiliser la barre de défilement générale de la page. IL ne devrait normalement non plus pas y avoir besoin de défiler la page pour aller chatter dans la zone en-dessous. D'où la restriction que je m'impose, ne pas utiliser de px ou autres unités absolues pour que tout puisse s'adapter automatiquement sans que je n'aie rien à faire.
Je voudrais en particulier que l'historique, première zone à gauche, possède une barre de défilement spécifique et défile automatiquement vers les derniers messages au fur et à mesure qu'ils arrivent, et qu'aucun message ne passe jamais hors écran. De même dans les trois autres zones, s'il y a trop de boutons, une barre de défilement spécifique à la zone apparaîtrait.
Ce qui a été constaté avec mon code actuel, c'est que :
1 - La barre de défilement spécifique à l'historique apparaît bien, mais elle n'est jamais utilisée par le navigateur, elle reste toujours grisée, et la zone s'agrandit à chaque fois qu'un message arrive sans limite de hauteur, forçAnt au bout d'un moment à sans cesse utiliser la barre de défilement générale de la page (ce qui est bien sûr plutôt gênant). Comment y remédier ? Comme déjà dit, je voudrais que la taille de la zone reste fixe et que les messages qui arrivent par le bas poussent les anciens vers le haut en affichant une barre de défilement qui serait toujours tout en bas par défaut.
2 - Lorsque les intitulés des boutons sont trop longs, les div de droite sont temporairement poussées en-dessous de l'historique, et reprennent leur place lorsque les boutons fautifs disparaîssent. Ce va-et-vient est relativement perturbant... comment l'empêcher?
Bonus n°1: Une ligne bleue de focus apparaît lorsque l'élément #keytrap a le focus, peut-on la faire disparaître ? Cet élément est néecessaire et sert à attraper toutes les touches utilisées dans le jeu (pour éviter que les touches exécutent les actions du navigateur). Ceci a été observé sur IE 8, 9 et 10.
Bonus n°2: Pourrais-je faire en sorte que la zone de chat soit alignée avec la seconde zone et non pas avec la première ? autrement dit, faire en sorte que l'historique prenne toute la hauteur sur la gauche, ou encore dit autrement que le clear:left ne s'applique que sur les trois derniers float:left mais pas le premier ? Cette mise en forme est probablement plus logique, plus intuitive, et elle aurait le mérite de plus se conformer à l'agencement du logiciel client en version bureau windows.
Bonus n°3: puis-je faire en sorte que sur téléphone où il n'y a probablement pas la place pour afficher les quatre zones côte à côte, qu'elles soient affichées deux par deux, sans changer le code HTML ?
Merci beaucoup pour vos réponses.
Voici le code actuel ci-dessous.
CSS :
HTML:
Du texte est ajouté à l'historique sur le modèle
<span class="colorX">XXX</span><br />
Des boutons apparaissent et disparaissent dynamiquement dans les trois autres zones sur le modèle :
<button type="button">XXX</button> + éventuellement. <br />
ou bien dans un tableau <table> sans cellule vide de max. 10x10.
A noter qu'il y a un header avec un menu général au site en-dessus de l'application, et un footer contenant un lien contact + mention copyright en-dessous. Je n'ai pas mis le code parce que je suppose qu'il n'est pas nécessaire.
Merci.
Désolé pour ce titre plutôt abscons. Je programme un jeu multijoueur en HTML5+javascript+ARIA, et je suis plutôt nul en CSS. Pas facile d'expliquer son problème sans recourir à des images.
L'application se compose globalement de cinq zones :
- Un historique tout à gauche affichant les messages envoyés par le serveur au fur et à mesure qu'ils arrivent
- Trois zones à droite les unes des autres et à droite de l'historique contenant des boutons permettant d'agir sur le jeu, organisés par groupes: les actions directes du jeu lui-même, les options permettant de gérer la partie, et les options globales du genre rejoindre/inviter/quitter.
- En-dessous des quatre zones, une cinquième permettant de chatter
L'idée étant que les quatre premières zones soient côte à côte et de taille fixe mais de la bonne hauteur de sorte qu'il n'y ait ni place perdue, ni qu'il soit jamais nécessaire d'utiliser la barre de défilement générale de la page. IL ne devrait normalement non plus pas y avoir besoin de défiler la page pour aller chatter dans la zone en-dessous. D'où la restriction que je m'impose, ne pas utiliser de px ou autres unités absolues pour que tout puisse s'adapter automatiquement sans que je n'aie rien à faire.
Je voudrais en particulier que l'historique, première zone à gauche, possède une barre de défilement spécifique et défile automatiquement vers les derniers messages au fur et à mesure qu'ils arrivent, et qu'aucun message ne passe jamais hors écran. De même dans les trois autres zones, s'il y a trop de boutons, une barre de défilement spécifique à la zone apparaîtrait.
Ce qui a été constaté avec mon code actuel, c'est que :
1 - La barre de défilement spécifique à l'historique apparaît bien, mais elle n'est jamais utilisée par le navigateur, elle reste toujours grisée, et la zone s'agrandit à chaque fois qu'un message arrive sans limite de hauteur, forçAnt au bout d'un moment à sans cesse utiliser la barre de défilement générale de la page (ce qui est bien sûr plutôt gênant). Comment y remédier ? Comme déjà dit, je voudrais que la taille de la zone reste fixe et que les messages qui arrivent par le bas poussent les anciens vers le haut en affichant une barre de défilement qui serait toujours tout en bas par défaut.
2 - Lorsque les intitulés des boutons sont trop longs, les div de droite sont temporairement poussées en-dessous de l'historique, et reprennent leur place lorsque les boutons fautifs disparaîssent. Ce va-et-vient est relativement perturbant... comment l'empêcher?
Bonus n°1: Une ligne bleue de focus apparaît lorsque l'élément #keytrap a le focus, peut-on la faire disparaître ? Cet élément est néecessaire et sert à attraper toutes les touches utilisées dans le jeu (pour éviter que les touches exécutent les actions du navigateur). Ceci a été observé sur IE 8, 9 et 10.
Bonus n°2: Pourrais-je faire en sorte que la zone de chat soit alignée avec la seconde zone et non pas avec la première ? autrement dit, faire en sorte que l'historique prenne toute la hauteur sur la gauche, ou encore dit autrement que le clear:left ne s'applique que sur les trois derniers float:left mais pas le premier ? Cette mise en forme est probablement plus logique, plus intuitive, et elle aurait le mérite de plus se conformer à l'agencement du logiciel client en version bureau windows.
Bonus n°3: puis-je faire en sorte que sur téléphone où il n'y a probablement pas la place pour afficher les quatre zones côte à côte, qu'elles soient affichées deux par deux, sans changer le code HTML ?
Merci beaucoup pour vos réponses.
Voici le code actuel ci-dessous.
CSS :
#gamelog, #menuArea, #gameArea {
height: 88%;
overflow-y: scroll;
float: left;
}
#gamelog { width: 36%; }
#menuArea { width: 29%; }
#gameArea, #tableArea { width: 17%; }
#chatArea { clear: left; }
.hidden { text-indent: -1000000px; }
HTML:
<h1>Client web</h1>
<div id="app" role="application">
<h2 id="historyH2" class="hidden">Historique</h2>
<div id="gamelog" contenteditable="true" tabindex="0" aria-labelledby="historyH2" aria-readonly="true"></div>
<h2 id="menuH2" class="hidden">Menu</h2>
<div id="keytrap" class="hidden" aria-labelledby="menuH2"></div>
<div id="menuArea"></div>
<h2 id="gameH2" class="hidden">Actions</h2>
<div id="gameArea"></div>
<h2 id="tableH2" class="hidden">Table</h2>
<div id="tableArea"></div>
<h2 class="hidden">Chat</h2>
<form id="chatArea" data-check="disable">
<p><label id="chatlbl" for="chat">Chat: </label>
<input type="text" id="chatBox" aria-labelledby="chatlbl" />
<button type="submit">Envoyer</button>
<span id="volsliderlbl">Volume: </span>
<span id="volslider" role="slider" tabindex="0" aria-labelledby="volsliderlbl" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">100%</span>
</p></form>
</div><!--app-->
Du texte est ajouté à l'historique sur le modèle
<span class="colorX">XXX</span><br />
Des boutons apparaissent et disparaissent dynamiquement dans les trois autres zones sur le modèle :
<button type="button">XXX</button> + éventuellement. <br />
ou bien dans un tableau <table> sans cellule vide de max. 10x10.
A noter qu'il y a un header avec un menu général au site en-dessus de l'application, et un footer contenant un lien contact + mention copyright en-dessous. Je n'ai pas mis le code parce que je suppose qu'il n'est pas nécessaire.
Merci.