Discussion :

[alexorcet]

salut tout le monde

je dois créer une espèce de légende pour graphique en html pour les besoins d'un projet.
c'est tout simple une petit carré coloré et du text a coté.
j'ai jamais fait de HTML donc est ce que qlqn pourrai m'aider svp.ça doit ressembler a ceci
__
|__| text 'à droite et carré de couleur bleue
__
|__| text 'à droite et carré de couleur verte

Merci pour votre aide.

[Pymento]

tu as plusieurs solutions, moi naturellement je ferai pour chaque ligne deux div imbriqués:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div id="légende">
<div class="ligne">
<div class="couleur" style="backgroundColor:tacouleur;"> </div>
 <span> légende a mettre </span>
</div>
<div[...]</div>
<div>

ensuite dans le css tu positionne ton gros div légende, ensuite comment tes lignes doivent se comporter(essentiellement avec un width) puis tu t'occupe de la classe couleur tu lui donne un gabarit width et height en fonction.


ps: le backgroundColor il faut vérifier la syntaxe exacte.

[alexorcet]

Merci pymento pour ta réponse mais on n'utilise pas de CSS.
Est il possible de faire autrement.??

Cordialement

tu as plusieurs solutions, moi naturellement je ferai pour chaque ligne deux div imbriqués:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div id="légende">
<div class="ligne">
<div class="couleur" style="backgroundColor:tacouleur;"> </div>
 <span> légende a mettre </span>
</div>
<div[...]</div>
<div>

ensuite dans le css tu positionne ton gros div légende, ensuite comment tes lignes doivent se comporter(essentiellement avec un width) puis tu t'occupe de la classe couleur tu lui donne un gabarit width et height en fonction.


ps: le backgroundColor il faut vérifier la syntaxe exacte.

[laurentSc]

Vu que la solution de Pymento utilise des classes, il y a forcément un fichier CSS.
Pour faire hyper simple, j'imagine :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="carré bleu.jpg"> légende 1<br><img src="carré vert.jpg"> légende 2

(jpg est un exemple ; il faut bien une extension...)

[sebhm]

bonjour,

ben t'auras une meilleure note en mettant du CSS !!

sinon, tu peux faire aussi avec un tableau :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<table>
 <tr>
  <td><img src="un_carre_bleu.png" /></td>
  <td>legende de mon carre bleu</td>
 </tr>
 <tr>
  <td><img src="un_carre_pas_bleu.png" /></td>
  <td>legende de mon carre pas bleu</td>
 </tr>
</table>

[laurentSc]

Exact ; d'ailleurs, pour placer ce tableau où l'on veut, on peut faire un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<table><tr><td width=xx></td><td>Le graphique</td><td><table>
 <tr>
  <td><img src="un_carre_bleu.png" /></td>
  <td>legende de mon carre bleu</td>
 </tr>
 <tr>
  <td><img src="un_carre_pas_bleu.png" /></td>
  <td>legende de mon carre pas bleu</td>
 </tr>
</table></td></tr></table>

[Doki95]

Tu peux aussi utiliser la balise caption des table.

L'inconvénient c'est que tu devras créer un tableau par image

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<table> 
    	<caption valign="right" align="right"> Légende du tableau </caption>
    	<tr>
    		<td><img src="un_carre_bleu.png" /></td>
    	</tr> 
</table>
<table> 
    	<caption valign="right" align="right"> Légende du tableau </caption>
    	<tr>
    		<td><img src="un_carre_vert.png" /></td>
    	</tr> 
</table>

[laurentSc]

Quel est l'intérêt de caption ? Je viens de tester le code, et ça provoque un retour à la ligne de la cellule, au lieu de la mettre à la suite du texte...

[Doki95]

J'ai testé le code que j'ai transmit et pour mon cas, le texte est inséré sur la droite de la cellule ou il doit y avoir l'image. A la base caption sert a mettre un titre au tableau, mais tu peux facilement t'en servir pour ajouter une légende.

C'est une solution comme une autre.