Discussion :

[pc2-bresil]

Bonjour,

Nous avons le code suivant:

Code :

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
 
<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.

[Doki95]

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

[pc2-bresil]

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 :

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

[vodiem]

salut Doki95 et pc2-bresil,

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

[Doki95]

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.

[pc2-bresil]

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 :

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
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.

[vodiem]

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

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
<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.

[pc2-bresil]

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