alignement vertical de span

**rduvrac** · 19/04/2008, 12h40

Bonjour

J'ai ce code :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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 :-(

Comment les faires se positionner en bas du tableau général ?

merci

**Kerod** · 19/04/2008, 15h38

Si tu fournis les images afin que nous puissions tester ce serait pas mal

**rduvrac** · 19/04/2008, 16h27

mieux, voila la page :
http://s137595263.onlinehome.fr/Jeux2/span_test.html

**Erwan31** · 19/04/2008, 17h16

Bonjour,
pour commencer les éléments span ne peuvent contenir que des éléments inline
et ne sont pas appropriés ici. Je les ai remplacés par des div.
Tu as encore beaucoup d'attribut de présentation je vois, tu utilises un doctype transitionnal?
Tu dois te servir de ton tableau conteneur comme bloc référent (via position:relative) pour ses enfants positionnés (de manière absolue) qui se placeront donc à partir du bas du tableau.

Supprimes les border="0" de tes images qui ne servent ici à rien et remplaces les par un alt vide (alt=""). Désolé pour le manque d'explication...

Attention en position absolue, ils sont sorti du flux normal.

Ce qui donne

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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>

**rduvrac** · 19/04/2008, 18h27

ça marche impect :-) un GRAND MERCI ! :-D

J'ai adapté avec le DIV répété en PHP et les valeurs de hauteur des images liés à la base de données. C'est parfait.

J'ai juste dû ajouter dans le DIV, un :

Code :

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

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

En fait, j'ai un peu de mal à savoir si il faut partir d'un DIV, d'un SPAN, d'un P ou d'autre chose quand on essaye de faire des trucs de ce genre...