Problème d'affichage ==> float? [Résolu]

papouuu · 26/01/2011, 14h34

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 · 26/01/2011, 20h43

Citation:

Comme vous le voyez

Ben non... on ne voit rien

ornitho13 · 26/01/2011, 21h38

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

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

merci

Myst. · 26/01/2011, 23h55

Essaie de lui définir une width ?

papouuu · 27/01/2011, 08h59

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 · 27/01/2011, 09h37

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.

papouuu · 27/01/2011, 09h52

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.

26/01/2011, 14h34	#1
papouuu Membre actif Inscription : septembre 2009 Messages : 167 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : septembre 2009 Messages : 167 Points : 162 Points : 162	Problème d'affichage ==> float? 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;">
	00

26/01/2011, 23h55	#4
Myst. Futur Membre du Club Inscription : octobre 2009 Messages : 17 Détails du profil Informations forums : Inscription : octobre 2009 Messages : 17 Points : 15 Points : 15	Essaie de lui définir une width ?
	00

27/01/2011, 09h52	#7
papouuu Membre actif Inscription : septembre 2009 Messages : 167 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : septembre 2009 Messages : 167 Points : 162 Points : 162	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email