Créer une legende en HTML

Version imprimable

22/09/2009, 13h10
alexorcet

Créer une legende en HTML

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.
22/09/2009, 14h31
Pymento
tu as plusieurs solutions, moi naturellement je ferai pour chaque ligne deux div imbriqués:
Code:

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.
23/09/2009, 09h40
alexorcet
Merci pymento pour ta réponse mais on n'utilise pas de CSS.
Est il possible de faire autrement.??

Cordialement
Citation:
Envoyé par Pymento

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

Code:

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.
23/09/2009, 10h00
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:

<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...)

bonjour,

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

sinon, tu peux faire aussi avec un tableau :
Code:

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>

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

Code:

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>

Tu peux aussi utiliser la balise caption des table.

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

Code:

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>

26/09/2009, 15h00
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...
28/09/2009, 14h04
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.