[Résolu] Utilisation des balises <table> pour un digicode?

Bonjour à la communauté,

Je suis actuellement en train d'essayer de mettre aux standarts actuels un script de digicode... Cependant, je me demandais si je ne faisais pas une erreur en utilisant la balise créant un tableau...

Peut être existe t'il une façon plus "conseillée" de réaliser ce gadget pour site internet

Voici le lien
Modifié par K3p' (26 Jun 2009 - 14:50)

Bon, visiblement ça reste un tableau pour le mettre aux standards... Je n'ai plus qu'a bien utiliser le tutoriel relatif

Ce qui m'a interpelé c'est cette phrase : "Les tableaux doivent se limiter à la classification d'informations par tableaux" Vrai?
Modifié par K3p' (25 Jun 2009 - 13:12)

Bonjour,

Je pense que ton digicode est un cas "border-line". Les infos qu'ils contient ne sont pas réellement tabulaires, mais suffisament organisée pour justifier un tableau. Le réel problème avec les tableaux de mises en page, c'est surtout leurs imbrications.

Sinon tu pourrais également modéliser ton digicode avec un div qui engloberait des spans qui eux représenteraients les touches et l'écran).

Merci beaucoup pour ta réponse Laurie-Anne. Est ce que ce qui suit est dans l'idée?

HTML
<p>
<span class="gauche"><a href="#lien"><img src="1.png" alt="" title="" /></a></span>
<span class="droite"><a href="#lien"><img src="3.png" alt="" title="" /></a></span>
<a href="#lien"><img src="3.png" alt="" title="" /></a>
</p>
<p>
<span class="gauche"><a href="#lien"><img src="4.png" alt="" title="" /></a></span>
<span class="droite"><a href="#lien"><img src="6.png" alt="" title="" /></a></span>
<a href="#lien"><img src="5.png" alt="" title="" /></a>
</p>
<p>
<span class="gauche"><a href="#lien"><img src="7.png" alt="" title="" /></a></span>
<span class="droite"><a href="#lien"><img src="9.png" alt="" title="" /></a></span>
<a href="#lien"><img src="8.png" alt="" title="" /></a>
</p>...

CSS
p {
  text-align: center;
}
p span.gauche {
  float: left;
}
p span.droite {
  float: right;
}

Modifié par K3p' (25 Jun 2009 - 21:22)

Bon... J'ai regardé d'autres documents et pense que ce qui suit est plus adapté:

<p>
  <span style="border-width: 1px; border-style: dashed; border-color: red;"><a href="#lien"><img src="b1.png" alt="" title="" /></a></span>
  <span style="border-width: 1px; border-style: dotted; border-color: blue;"><a href="#lien"><img src="b2.png" alt="" title="" /></a></span>
  <span style="border-width: 1px; border-style: dashed; border-color: red;"><a href="#lien"><img src="b3.png" alt="" title="" /></a></span>
</p>
<p>
  <span style="border-width: 1px; border-style: dotted; border-color: blue;"><a href="#lien"><img src="b4.png" alt="" title="" /></a></span>
  <span style="border-width: 1px; border-style: dashed; border-color: red;"><a href="#lien"><img src="b5.png" alt="" title="" /></a></span>
  <span style="border-width: 1px; border-style: dotted; border-color: blue;"><a href="#lien"><img src="b6.png" alt="" title="" /></a></span>
</p>
<p>
  <span style="border-width: 1px; border-style: dashed; border-color: red;"><a href="#lien"><img src="b7.png" alt="" title="" /></a></span>
  <span style="border-width: 1px; border-style: dotted; border-color: blue;"><a href="#lien"><img src="b8.png" alt="" title="" /></a></span>
  <span style="border-width: 1px; border-style: dashed; border-color: red;"><a href="#lien"><img src="b9.png" alt="" title="" /></a></span>
</p>

Une petite question: Comment se fait il que sur FireFox les bordures n'encadrent pas l'image lien toute entière comme sur IE?

Merci d'avance!
Modifié par K3p' (26 Jun 2009 - 11:38)

Et faire une div de la largeur et hauteur exacte de l'ensemble de tes images et juste mettre les images les une à la suite des autres dans cette même div, ça ne fonctionne pas ?

Genre :

<div id="digit">
   <img src="1.jpg" alt="1" /><img src="2.jpg" alt="2" /><img src="3.jpg" alt="3" /><img src="4.jpg" alt="4" />....
</div>

Salut Skoua,

Alors j'ai déjà testé ton idée qui donne bien le résultat attendu mais limite énormément / donne moins de liberté. Merci quand même. Je vais sûrement rester sur mon dernier code On va dire résolu...