Span alignement en bas

Bonjour

J'ai ce code :

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="baseline">
    
<span style="width:10px; float:left; position:relative;">
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#00FF00"><img src="images/niveau_bleu.gif" width="10" height="1" border="0" /></td>
  </tr>
  <tr>
    <td bgcolor="#00FFE0"><img src="images/niveau_jaune.gif" width="10" height="6" border="0" /></td>
  </tr>
</table>
</span>
<span style="width:10px; float:left; position:relative;">
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#00FF00"><img src="images/niveau_bleu.gif" width="10" height="1" border="0" /></td>
  </tr>
  <tr>
    <td bgcolor="#00FFE0"><img src="images/niveau_jaune.gif" width="10" height="7" border="0" /></td>
  </tr>
</table>
</span>
<span style="width:10px; float:left; position:relative;">
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#00FF00"><img src="images/niveau_bleu.gif" width="10" height="2" border="0" /></td>
  </tr>
  <tr>
    <td bgcolor="#00FFE0"><img src="images/niveau_jaune.gif" width="10" height="9" border="0" /></td>
  </tr>
</table>
</span>

    </td>
  </tr>
</table>

les tableaux sont bien présents les uns à côté des autres mais aligné depuis le haut
http://www.cyboon.com/Jeux2/images/spantest.png
Comment les faires se positionner en bas du tableau général ?

merci
Modifié par rduvrac (19 Apr 2008 - 12:55)

Bonjour rduvrac,

Quel est le but de la chose ? Car point de vue code il y'a des choses à (re)dire ...

et bien j'ai et j'aimerai comme sur l'image

Le code est pas top certe. C'est qu'en fait c'est un code généré par php avec des données dynamiques. La hauteur des images se règle en fonction des données dans la base, c'est pour ça que c'est pas beau

Le blem est que j'ai besoin d'une image (bleu) placée au dessus d'une image (jaune), puis placé à droite : la même chose mais avec des valeur de hauteur différente (prise dans la base)

au passage, la page pour le test :

http://s137595263.onlinehome.fr/Jeux2/span_test.html
Modifié par rduvrac (19 Apr 2008 - 16:28)

Bonsoir rduvrac,

Je ne sais pas vraiment si cela pourra t'apporter une aide ou t'aiguiller vers de nouvelles pistes, mais ton sujet me fait penser au tutoriel sur les statistiques graphique en css publié en Janvier 2007 : Ici

Plus exactement aux liens fournis en bas de page.

Peut-être que...
Cdt,
Sylvain

j'ai eu la réponse :

<table border="0" cellspacing="0" cellpadding="0" style="position:relative">
  <tr>
    <td><div style="position:absolute; bottom:0; width: 10px">
        <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td bgcolor="#00FF00"><img src="images/niveau_bleu.gif" width="10" height="1" alt="" /></td>
          </tr>
          <tr>
            <td bgcolor="#00FFE0"><img src="images/niveau_jaune.gif" width="10" height="6" alt="" /></td>
          </tr>
        </table>
      </div>
      <div style="position:absolute; bottom:0; width: 10px; margin-left:10px">
        <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td style="background:#00FF00"><img src="images/niveau_bleu.gif" width="10" height="1" alt="" /></td>
          </tr>
          <tr>
            <td bgcolor="#00FFE0"><img src="images/niveau_jaune.gif" width="10" height="7" alt="" /></td>
          </tr>
        </table>
      </div>
      <div style="position:absolute; bottom:0; width: 10px; margin-left:20px">
        <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td bgcolor="#00FF00"><img src="images/niveau_bleu.gif" width="10" height="2" alt="" /></td>
          </tr>
          <tr>
            <td bgcolor="#00FFE0"><img src="images/niveau_jaune.gif" width="10" height="9" alt="" /></td>
          </tr>
        </table>
      </div></td>
  </tr>
</table>

que j'ai adapté vu que génère tout ça par php et relié à une base de donnée.
Juste rajouter

margin-left:<?php echo (10*$i) ?>px

avec $i comme variable de départ calée à 0 et incrémenté de 1 à chaque boucle.
Bon ceux qui font du php doivent suivre

merci tout de même