Discussion :

[papouuu]

Bonjour,

Je ne parviens pas à afficher correctement un fieldset:


Comme vous le voyez, mon dernier fieldset ne s'affiche pas correctement, même en mettant une propriété width...

voici ce que j'utilise en gros:
Infos produit:

Code :

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

<fieldset style=" float:left; width:450px; margin-right:10px;">

Pour le reste:

Code :

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

<fieldset style="float:left; position:relative; right:487px; margin-right:10px;">

et enfin celui qui s'affiche mal:

Code :

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

<fieldset style="position:relative; right:400px;">

[Bovino]

Comme vous le voyez

Ben non... on ne voit rien

[ornitho13]

le fait d'utiliser "float:left" permet d'afficher les blocs les uns à la suite des autres en alignement "gauche", je ne vois pas pourquoi tu rajoutes des "position:relative" et des "right".

Enfin concernant ton problème, le mieux serait d'avoir le code globale de l'implémentation de tes fieldset parce que comme dit Bovino :

Ben non... on ne voit rien

En bref ajoute le code html+css de ta page où sont appelés les fieldsets

merci

[Myst.]

Essaie de lui définir une width ?

[papouuu]

Vous ne voyez rien?? L'image passe bien chez moi pourtant...

En fait si je ne mets pas les "position:relative; right: ..." mes blocs du dessous s'alignent verticalement avec ceux du dessus.

J'aimerais 2 blocs fieldsets en haut et 4 autres en dessous, et comme dis ceux du dessous s'alignent avec la fin des blocs du dessous, j'ai palié avec la position relative mais c'est franchement pas terrible..

Sinon une idée pour faire passer mon image chez vous?

Le code de mes fieldsets, mais c'est un peu long:

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<fieldset>
                <legend>Infos Produit</legend>
                <table style="float:left; margin-right:150px; margin-top:10px;">
                    <tr>
                        <td> Code Produit :</td>
                        <td> <asp:Label ID="ID_ArticleLabel" runat="server" /></td>                            
                        <td> Nom Produit :</td>  
                        <td><asp:Label ID="Nom_ArticleLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Famille Produit :</td>
                        <td> <asp:Label ID="Famille_ProduitLabel" runat="server" /></td>                            
                        <td> Type : </td>
                        <td> <asp:Label ID="TypeLabel" runat="server" /></td>
                    </tr>
                    <tr>
                        <td> Pression Vapeur :</td>
                        <td> <asp:Label ID="Pression_VapeurLabel" runat="server" /></td>                            
                        <td> Solvant :</td>
                        <td> <asp:Label ID="SolvantLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td colspan="4"> Dernière Modification : &nbsp; <asp:Label ID="Date_ModifLabel" runat="server" /></td>                        
                    </tr>
                </table>
                <table>
                    <tr>
                        <td><asp:Image ID="ImagePicto1" runat="server" Height="100px"/></td>
                        <td><asp:Image ID="ImagePicto2" runat="server" Height="100px"/></td>
                        <td><asp:Image ID="ImagePicto3" runat="server" Height="100px"/></td>
                    </tr>
                </table>
            </fieldset>           
 
            <fieldset>
                <legend>Risques</legend>
                <table>
                    <tr>
                        <td> Code Risque :</td>
                        <td> <asp:Label ID="Code_RisqueLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> CMR :</td> 
                        <td> <asp:Label ID="CMRLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Risque Potentiel :</td>
                        <td> <asp:Label ID="Risque_PotentielLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Priorité :</td>
                        <td> <asp:Label ID="PrioriteLabel" runat="server" /></td>                        
                    </tr>
                </table>
            </fieldset>
 
            <fieldset>
                <legend>Utilisation</legend>
                <table>
                    <tr>
                        <td> Quantité Annuelle Utilisée :</td>    
                        <td><asp:Label ID="QuantiteUtiliseeLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Fréquence Utilisation :</td>
                        <td> <asp:Label ID="Frequence_UtilisationLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Code Utilisation :</td>
                        <td> <asp:Label ID="Code_UtilisationLabel" runat="server" /></td>                        
                    </tr>              
                </table>            
            </fieldset>
 
            <fieldset>
                <legend>Fournisseur et Transport</legend>
                <table>
                    <tr>
                        <td> Code Fournisseur :</td>
                        <td> <asp:Label ID="CODFORLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Code UN :</td>
                        <td> <asp:Label ID="Code_UNLabel" runat="server" /> </td>                       
                    </tr>
                    <tr>
                        <td> Classe UN :</td>
                        <td> <asp:Label ID="Classe_UNLabel" runat="server" /></td>                        
                    </tr>
                </table>
            </fieldset>
 
            <fieldset>
                <legend>Fiche De Sécurité</legend>
                <table>
                    <tr>
                        <td> FDS :</td>
                        <td><asp:Label ID="FDSLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Date FDS :</td>
                        <td> <asp:Label ID="Date_FDSLabel" runat="server" /></td>
                    </tr>
                    <tr>
                        <td> Date de Validation FDS :</td>
                        <td> <asp:Label ID="Date_Validation_FDSLabel" runat="server" /></td>                        
                    </tr>
                </table>
            </fieldset>
 
            <fieldset>
                <legend>Infos Stock</legend>
                <table>
                    <tr>
                        <td> Unité de Stockage :</td>
                        <td> <asp:Label ID="Unite_StockageLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Quantite Maximale de Stockage :</td>
                        <td> <asp:Label ID="Quantite_Max_StockLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Stock :</td>
                        <td> <asp:Label ID="StockLabel" runat="server" /></td>                        
                    </tr>
                </table>
            </fieldset>

PS: j'ai tout enlevé maintenant, j'en ai eu marre d'aligner de jouer avec les pixels, je me suis dis que je verrais ça plus tard mais si vous avez une solution, je testerais et vous donnerais le résultat.

[ornitho13]

Si tu veux 2 rangées autant partir sur 2 conteneurs. un premier qui contient les 2 premiers fieldset (avec une hauteur à ajuster) et enfin un deuxième contenant les autres.
Ensuite pour l'alignement, il suffit de rajouter le float:left sur les fieldset (et pas sur la "table").

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
 
	<div style="height:200px;">
		<fieldset style="float:left">
                <legend>Infos Produit</legend>
                <table>
                    <tr>
                        <td> Code Produit :</td>
                        <td> <asp:Label ID="ID_ArticleLabel" runat="server" /></td>                            
                        <td> Nom Produit :</td>  
                        <td><asp:Label ID="Nom_ArticleLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Famille Produit :</td>
                        <td> <asp:Label ID="Famille_ProduitLabel" runat="server" /></td>                            
                        <td> Type : </td>
                        <td> <asp:Label ID="TypeLabel" runat="server" /></td>
                    </tr>
                    <tr>
                        <td> Pression Vapeur :</td>
                        <td> <asp:Label ID="Pression_VapeurLabel" runat="server" /></td>                            
                        <td> Solvant :</td>
                        <td> <asp:Label ID="SolvantLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td colspan="4"> Dernière Modification : &nbsp; <asp:Label ID="Date_ModifLabel" runat="server" /></td>                        
                    </tr>
                </table>
                <table>
                    <tr>
                        <td><asp:Image ID="ImagePicto1" runat="server" Height="100px"/></td>
                        <td><asp:Image ID="ImagePicto2" runat="server" Height="100px"/></td>
                        <td><asp:Image ID="ImagePicto3" runat="server" Height="100px"/></td>
                    </tr>
                </table>
            </fieldset>           
 
            <fieldset>
                <legend>Risques</legend>
                <table>
                    <tr>
                        <td> Code Risque :</td>
                        <td> <asp:Label ID="Code_RisqueLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> CMR :</td> 
                        <td> <asp:Label ID="CMRLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Risque Potentiel :</td>
                        <td> <asp:Label ID="Risque_PotentielLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Priorité :</td>
                        <td> <asp:Label ID="PrioriteLabel" runat="server" /></td>                        
                    </tr>
                </table>
            </fieldset>
      </div>
      <div>
            <fieldset style="float:left">
                <legend>Utilisation</legend>
                <table>
                    <tr>
                        <td> Quantité Annuelle Utilisée :</td>    
                        <td><asp:Label ID="QuantiteUtiliseeLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Fréquence Utilisation :</td>
                        <td> <asp:Label ID="Frequence_UtilisationLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Code Utilisation :</td>
                        <td> <asp:Label ID="Code_UtilisationLabel" runat="server" /></td>                        
                    </tr>              
                </table>            
            </fieldset>
 
            <fieldset style="float:left">
                <legend>Fournisseur et Transport</legend>
                <table>
                    <tr>
                        <td> Code Fournisseur :</td>
                        <td> <asp:Label ID="CODFORLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Code UN :</td>
                        <td> <asp:Label ID="Code_UNLabel" runat="server" /> </td>                       
                    </tr>
                    <tr>
                        <td> Classe UN :</td>
                        <td> <asp:Label ID="Classe_UNLabel" runat="server" /></td>                        
                    </tr>
                </table>
            </fieldset>
 
            <fieldset style="float:left">
                <legend>Fiche De Sécurité</legend>
                <table>
                    <tr>
                        <td> FDS :</td>
                        <td><asp:Label ID="FDSLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Date FDS :</td>
                        <td> <asp:Label ID="Date_FDSLabel" runat="server" /></td>
                    </tr>
                    <tr>
                        <td> Date de Validation FDS :</td>
                        <td> <asp:Label ID="Date_Validation_FDSLabel" runat="server" /></td>                        
                    </tr>
                </table>
            </fieldset>
 
            <fieldset>
                <legend>Infos Stock</legend>
                <table>
                    <tr>
                        <td> Unité de Stockage :</td>
                        <td> <asp:Label ID="Unite_StockageLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Quantite Maximale de Stockage :</td>
                        <td> <asp:Label ID="Quantite_Max_StockLabel" runat="server" /></td>                        
                    </tr>
                    <tr>
                        <td> Stock :</td>
                        <td> <asp:Label ID="StockLabel" runat="server" /></td>                        
                    </tr>
                </table>
            </fieldset>
       </div>

le code ci dessus fait ce que, a priori, tu demandes. Il faudra tout de même amélioré la largeur des fieldsets. Ici j'ai mis le code css directement dans l'attribut "style" de la balise html utilisé, mais utilise plutôt une feuille de style, ce sera plus facile de mettre à jour ton css.