Graphique téléphone portable

Version imprimable

24/08/2009, 12h14
noussa_88

Graphique téléphone portable

salut
je cherche à réaliser l'interface graphique d'un téléphone (ses touches,son écran..) mais je ne sais pas comment organiser mon travail.
en fait je veux bien faire les touches comme un simple 1100 mais le problème c'est que je débute en html et j'arrive pas à avoir quelque chose qui ressemblerait à un téléphone.
SVP si vous pouvez m'aider par un bout de code (juste pour commencer) ou bien un cours

Salut,

Je vois pas en quoi les touches 0 et 1 sont plus facile que les autres mais bon...

Faire un cadran de telephone est assez simple en (x)html / css

Voici quelque chose qui devrait y ressembler:

Code:

1
2
3
4
5
6
7
<div class="cadran">
<div class="touches">1</div>
<div class="touches">2</div>
<div class="touches">3</div>
<div class="touches">4</div>
<!-- et ainsi de suite -->
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
.cadran {
width: 600px /*la taille que tu souhaites*/
margin: auto; /*pour centrer*/
border: 1px solid black;
}
.touches {
float: left;
width: 200px; /*taille a ajuster pour avoir trois boites sur une ligne*/
height: 200px;
border: 1px solid black;
margin: /*a voir*/;
padding: /*a voir*/
}

24/08/2009, 14h39
noussa_88

c'est un téléphone portable que je cherche à simuler. donc y a des touches supplémentaires organisées d'une façon particulière.
Et puis y a aussi des lettres sur les touches,comment faire pour écrire à travers ces touches dans un textarea? le problème existe car pour la meme touche y a 3 lettres et un numéro .
24/08/2009, 17h44
Doki95

Pour les lettres et les numéros, oriente toi vers du javascript.
Après pour savoir s'il faut d'abord utiliser le chiffre ou les lettres, regarde comment ton téléphone fonctionne. Si tu veux appeler quelqu'un, ce sont les chiffres qui son utiliser. Maintenant, si tu écris un texto, ce sont d'abord les lettres minuscules puis majuscules (ou l'inverse, dépend si tu as un fossile ou pas ;)) et enfin les chiffres.

Pour le placement des touches spéciales, il faudra que tu utilises une class css particulière pour chacun d'entre eux. Pour comprendre le css jette un œil sur les tuto du site.

Bon courage
Doki.