Placer des <DIV> relativement à un <TD>

Version imprimable

Bonjour,

Nous avons le code suivant:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <table border=1 width=90%> <tr><td> <div style=" position: relative; float: left; left: 0%; z-index: 1; visibility: show;"> 2000 </div> <div style=" position: relative; float: left; left: 25%; z-index: 1; visibility: show;"> 2005 </div> </td></tr> </table>
Avec ce, nous voulons créer une table de largeur 90%. Dans cette table, nous voulons avoir une cellule (un TD), et, dans cette cellule, avoir deux ou plus DIV, dans une position verticale égale à du TD (c'est à dire, ce sera à l'intérieur du TD) et une position horizontale rélative à du TD, par pourcentage. Par exemple, le premier DIV est à 0% de la largeur du TD (i.e., au commencement), le deuxième DIV est à 25%, le troisième à 50%, etc.
Le problème est que chaque DIV créé paraît être à la pourcentage du TD que j'ai défini, plus une "compensation" à cause de la largeur du texte contenu par le DIV antérieur.
Est-ce que quelqu'un a une idée de comme le corriger?
Merci d'avance.

10/08/2009, 22h53
Doki95

Essaye en mettant t'es div a une valeur fixe en pixel. Voit ce que ça donne.

Merci.
Nous l'avons essayé, mais basiquement la même chose se passe. Quand, comme dans l'exemple au-dessous, nous utilisons le valeur "0px" pour les deux DIV, le texte du deuxième DIV apparaît juste après le premier DIV, c'est à dire, 0px loin du premier DIV, et non 0px après le commencement du TD.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table border=1 width=90%>
<tr><td>
        <div
          style="
          position: relative;
          float: left;
          left: 0px;
          z-index: 1;
          visibility: show;">
          2000
        </div>
        <div
          style="
          position: relative;
          float: left;
          left: 0px;
          z-index: 1;
          visibility: show;">
          2005
        </div>
</td></tr>
</table>

11/08/2009, 02h09
vodiem

salut Doki95 et pc2-bresil,

utilise le pourcentage avec width plutot que left dans le style des div.

;)
11/08/2009, 09h40
Doki95

Citation:

Envoyé par vodiem

salut Doki95 et pc2-bresil,

utilise le pourcentage avec width plutot que left dans le style des div.

;)

J'avoue j'avais pas pensé a ça. De mon côté ça fonctionne en effet. :ccool:

Merci beaucoup pour les réponses!

Nous avons essayé de mettre "width" plutôt que "left" pour la pourcentage, mais, pour tout pourcentage, les deux DIV restent dans la même place (le deuxième dans la même place du premier).
Donc, nous avons mis "width" et "left" ensemble, et (nous ne savons pas pourquoi) ça fonctionne: les deux DIV's restent dans les divisions correctes du TD.
Mais, quand nous essayons de mettre trois DIV's (un à 0%, autre à 50% et autre à 100%), le troisième reste au-dessous de la position désirée (qui est à la même hauteur des autres). Avec cinq DIV's, il paraît que les DIV's encore ne sont pas placés tout relativement au TD. Voici le code:
(Notez que left est utilisé avec width; nous ne savons pas si c'est une utilisation correcte)

Code:

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<table border=1 width=90%>
<tr><td>
        <div
          style="
          position: relative;
          float: left;
          left: 0%;
          width: 0%;
          z-index: 1;
          visibility: show;">
          1
        </div>
        <div
          style="
          position: relative;
          float: left;
          left: 25%;
          width: 25%;
          z-index: 1;
          visibility: show;">
          5
        </div>
        <div
          style="
          position: relative;
          float: left;
          left: 50%;
          width: 50%;
          z-index: 1;
          visibility: show;">
          10
        </div>
        <div
          style="
          position: relative;
          float: left;
          left: 75%;
          width: 75%;
          z-index: 1;
          visibility: show;">
          15
        </div>
        <div
          style="
          position: relative;
          float: left;
          left: 100%;
          width: 100%;
          z-index: 1;
          visibility: show;">
          20
        </div>
</td></tr>
</table>

Merci pour la patience.

width: x% c'est x% du conteneur dans ce cas: td.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table border=1 width=90% align="center">
<tr><td>
        <div
          style="float:left ; width: 20%;">
          1
        </div>
        <div
          style="float:left ; width: 20%;">
          5
        </div>
        <div
          style="float:left ; width: 20%;">
          10
        </div>
        <div
          style="float:left ; width: 20%;">
          15
        </div>
        <div
          style="float:left ; width: 20%;">
          20
        </div>
</td></tr>
</table>

5*20%=100% si tu dépasses 100% il y aura renvoie à la ligne. si tu mets 0% il y aura superposition.

;)

12/08/2009, 13h58
pc2-bresil

Maintenant nous comprenons.
Ça fonctionne. Merci à tous.