Problème d'affichage ==> float?

Version imprimable

26/01/2011, 14h34
papouuu

Problème d'affichage ==> float?

Bonjour,

Je ne parviens pas à afficher correctement un fieldset:
http://nsa25.casimages.com/img/2011/...3502125934.jpg

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:

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

Pour le reste:

Code:

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

et enfin celui qui s'affiche mal:

Code:

<fieldset style="position:relative; right:400px;">
26/01/2011, 20h43
Bovino

Citation:

Comme vous le voyez

Ben non... on ne voit rien :aie:
26/01/2011, 21h38
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 :

Citation:

Ben non... on ne voit rien :aie:

:)

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

merci
26/01/2011, 23h55
Myst.

Essaie de lui définir une width ?

8O 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:

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.

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:

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.

27/01/2011, 09h52
papouuu

Ok, Merci, ca passe quasiment comme je le veux, juste à arranger 2-3 trucs.

J'avais testé avec des conteneurs mais ca me faisait le même problème, qu'expliqué plus haut.
Cette fois en donnant une hauteur fixe au premier conteneur ca passe bien, ca doit être ça qui rendait mal.