Discussion :

[Larger]

Bonjour,

D'apres ce que j'ai pu voir sur le forum je suis loin d'etre le seul a me battre avec ce de IE au sujet des flottants.

Mon souci est le suivant :

J'utilise des floats pour agencer un formulaire. Et voici ce que cela devrait me donner :

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
		body
        {
            width: 1000px;
        }
        fieldset
        {
            margin: 0 0 25px;
            padding: 10px 10px 20px 10px;
        }
        label
        {
            clear: left;
            float: left;
            margin: 0 0 10px;
            width: 200px;
        }
        input, select, textarea
        {
            float: left;
        }
        textarea
        {
            clear: left;
        }
        select
        {
            width: 146px;
        }

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
   <fieldset>
        <legend>Print Spec </legend>
        <label>
            Total quantity*</label>
        <input type="text" name="total_quantity" size="20" />
        <label>
            Number of versions</label>
        <input disabled="disabled" type="text" name="number_of_version" size="20" />
        <label>
            Production sample required</label>
        <input type="checkbox" name="production sample" />
        <label>
            Proof/Prototype required</label>
        <input type="checkbox" name="proof_prototype" />
        <label>
            Flat Size - HxW (mm)</label>
        <input type="text" name="flat_size" size="20" />
        <label>
            Finished size - HxW (mm)</label>
        <input type="text" name="finished_size_HxW" size="20" />

C'est beau, c'est niquel, c'est ce que je veux : c'est Chrome, Firefox, ect.
Passons a IE7 (je n'ai pas teste les autres) :





C'est bien moche ...


Evidemment c'est toujours quand ces soucis la arrivent qu'on est presse. J'ai donc tente plusieurs trucs vite fait. L'ajustement du width qui est bien souvent propose comme solution ne me convient pas vraiment : je devrais recreer une div pour chaque ligne avec une largeur specifique. J'ai pas vraiment envie de charger mon code html et surtout j'ai pas particulierement envie de remesurer toutes mes largeurs au fur et a mesure des changements ...
J'ai donc completement abandonne cette solution et opte pour autre chose. J'ai ajoute des <br /> un peu partout. C'est un peu une solution d'urgence parce que je ne trouve pas ca particulierement propre non plus.

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
    <fieldset>
        <legend>Print Spec </legend>
        <label>
            Total quantity*</label>
        <input type="text" name="total_quantity" size="20" /><br />
        <label>
            Number of versions</label>
        <input disabled="disabled" type="text" name="number_of_version" size="20" /><br />
        <label>
            Production sample required</label>
        <input type="checkbox" name="production sample" /><br />
        <label>
            Proof/Prototype required</label>
        <input type="checkbox" name="proof_prototype" /><br />
        <label>
            Flat Size - HxW (mm)</label>
        <input type="text" name="flat_size" size="20" /><br />
        <label>
            Finished size - HxW (mm)</label>
        <input type="text" name="finished_size_HxW" size="20" /><br />

Quelqu'un a-t-il une solution simple ? Ou du moins une solution CSS ?

[Général03]

tu as essayé cela

Code :

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

1
2
3
4
5
6
7
8
9
label
{
float: left;
clear : both ;
}
input, select, textarea
{
float: left;
}

mois j'utilisais toujours le clear:both, si ca peut t'aider !

[Larger]

c'est ce que je faisais avant. J'ai modifie en clear: left apres avoir lu que ca pouvait causer des problemes avec IE.

J'ai malgre tout retente pour voir, mais sans resultat.

[Général03]

As tu essayé d'enlever le float:left de tes input ?

Code :

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

1
2
3
4
5
6
7
8
label
{
float: left;
}
input, select, textarea
{
clear : both ;
}

[Larger]

Euh possible. Mais de toute maniere si je fais ca, tous mes input de droite ne seront plus alignes


Bon je reteste, juste pour me faire un peu de mal


EDIT : aucun changement pour IE, Et Firefox se met a faire comme lui.

[TiEuAM]

Salut,
Un élément ne peu pas etre float:left et clear:both en meme tps !
Il faut que tu rajoutes un div vide avec la propriété clear:both derrière chaque label.

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
<head>
<style type="text/css">
body {
	width:1000px;
	}
fieldset {
	margin:0 0 25px;
	padding:10px 10px 20px 10px;
	}
label {
	display:block;
	float:left;
	margin:0 0 10px;
	width:200px;
	}
input, select, textarea {
	float:left;
	}
select {
	width:146px;
	}
.clearFloat {
	clear:both;
	}
</style>
</head>
 
<body>
<fieldset>
<legend>Print Spec</legend>
 
<label>Total quantity*</label>
<input type="text" name="total_quantity" size="20"/>
<div class="clearFloat"></div>
 
<label>Number of versions</label>
<input disabled="disabled" type="text" name="number_of_version" size="20"/>
<div class="clearFloat"></div>
 
<label>Production sample required</label>
<input type="checkbox" name="production sample"/>
<div class="clearFloat"></div>
 
<label>Proof/Prototype required</label>
<input type="checkbox" name="proof_prototype"/>
<div class="clearFloat"></div>
 
<label>Flat Size - HxW (mm)</label>
<input type="text" name="flat_size" size="20"/>
<div class="clearFloat"></div>
 
<label>Finished size - HxW (mm)</label>
<input type="text" name="finished_size_HxW" size="20"/>
<div class="clearFloat"></div>
 
</fieldset>
</body>

[Macmillenium]

Bonjour,

Il faut que tu rajoutes un div vide avec la propriété clear:both derrière chaque label.

Étant donné que les éléments vides n'ont pas de valeurs sémantiques (et génère des avertissements au niveau des parser HTML), je conseillerai plutôt d'englober le label et l'input dans une div doté d'un overflow:hidden.

[TiEuAM]

Oui il y a différentes manières.
Avec la maniere .clearFloat, ça permet une utilisation plus souple je trouve.

Un overflow:hidden servira a rien pour encadrer le label/input.

Je pense que ce serait assez stupide de vouloir parser l'intérieur du div .clearFloat que l'on sais très bien qu'il sera tjrs vide. Et je n'ai jamais rencontrer de probleme du coté des navigateur non plus.

Ceci pourrais exister dans une page sans que ce soit pour autant invalide :

Code :

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

1
2
3
4
5
6
.divVide {
	width:100px;
	height:50px;
	background-image:url('./image.jpg');
	}
<div class="divVide"></div>

[Larger]

Un élément ne peu pas etre float:left et clear:both en meme tps !

Euh, pourquoi ? Ca me paraissait putot logique au contraire

Est-ce qu'au final ca ne revient pas a mes balises <br /> ? Avec encore plus de code HTML
Ou est-ce mieux sematiquement parlant ?



PS: oui je suis chiant a poser plein de questions

[TiEuAM]

Tu peux mettre un ou plusieurs <br/> pour réussir a sauter la ligne, tant que tes labels et inputs auront la meme hauteur, donc ca pourrais donner un résultat avec des plus grosse marge que prévu, ce n'est pas tres propre ni ajustable avec les br, et selon ce qui suis tes champs, il faudra annuler le float en cours.

[Larger]

Ah oui effectivement !
Il va donc falloir que je change ca ...

Et concernant l'utilisation du clear et du left pour un meme element ?

[TiEuAM]

Bin l'élément tout seul ne peu pas faire les deux bien malheureusement, et clear:both l'emporte, ce qui parait quand meme logique, vu qu'il est censer annuler le float en cours.

[Macmillenium]

Un overflow:hidden servira a rien pour encadrer le label/input.

Cette div ne s'adapte pas à la hauteur des deux flottants label et input retirés partiellement du flux normal.
overflow:hidden établit ce qu'on appelle contexte de formatage block (petite recherche sur le forum) et qui permet à un élément d'englober ses enfants flottants.

Je pense que ce serait assez stupide de vouloir parser l'intérieur du div .clearFloat que l'on sais très bien qu'il sera tjrs vide. Et je n'ai jamais rencontrer de probleme du coté des navigateur non plus.

Je ne vois pas en quoi c'est stupide, les specs sont claires, une balise fermante ne devrait pas être vide, les parser se référent simplement à la DTD.
Je parle d'avertissement et non pas d'erreur (cf HTML Validator de FF)

Ceci pourrais exister dans une page sans que ce soit pour autant invalide :

Code :

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

1
2
3
4
5
6
.divVide {
	width:100px;
	height:50px;
	background-image:url('./image.jpg');
	}
<div class="divVide"></div>

Si le background-image est une simple image décorative, au pire mettre <div class="divVide">&nbsp;</div> et encore il y a toujours moyen d'éviter les éléments vides dans ce cas de figures.

Sinon :

Code :

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

1
2
3
4
5
6
7
.divVide {
	width:100px;
	height:50px;
	background-image:url('./image.jpg');
        text-indent:-9999px;
	}
<div class="divVide">Description détailler de l'image</div>

Afin d'éviter la perte des données en cas de CSS désactivé (Agents Utilisateurs textuels en mode console comme Lynx par exemple)

@Larger :

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
 
<style type="text/css">
body {
        width:1000px;
        }
fieldset {
        margin:0 0 25px;
        padding:10px 10px 20px 10px;
        }
label {
        display:block;
        float:left;
        margin:0 0 10px;
        width:200px;
        }
input, select, textarea {
        float:left;
        }
select {
        width:146px;
        }
 
.conteneurChamp {
        overflow:hidden;
}
</style>
</head>
 
<body>
<fieldset>
<legend>Print Spec</legend>
 
<div class="conteneurChamp">
<label>Total quantity*</label>
<input type="text" name="total_quantity" size="20"/>
</div>
 
<div class="conteneurChamp">
<label>Number of versions</label>
<input disabled="disabled" type="text" name="number_of_version" size="20"/>
</div>
 
<div class="conteneurChamp"> 
<label>Production sample required</label>
<input type="checkbox" name="production sample"/>
</div>
 
<div class="conteneurChamp">
<label>Proof/Prototype required</label>
<input type="checkbox" name="proof_prototype"/>
</div>
 
<div class="conteneurChamp"> 
<label>Flat Size - HxW (mm)</label>
<input type="text" name="flat_size" size="20"/>
</div>
 
<div class="conteneurChamp"> 
<label>Finished size - HxW (mm)</label>
<input type="text" name="finished_size_HxW" size="20"/>
</div>
 
</fieldset>
</body>

[Larger]

@Larger :

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
 
<style type="text/css">
body {
	width:1000px;
	}
fieldset {
	margin:0 0 25px;
	padding:10px 10px 20px 10px;
	}
label {
	display:block;
	float:left;
	margin:0 0 10px;
	width:200px;
	}
input, select, textarea {
	float:left;
	}
select {
	width:146px;
	}
 
.conteneurChamp {
	overflow:hidden;
}
</style>
</head>
 
<body>
<fieldset>
<legend>Print Spec</legend>
 
<div class="conteneurChamp">
<label>Total quantity*</label>
<input type="text" name="total_quantity" size="20"/>
</div>
 
<div class="conteneurChamp">
<label>Number of versions</label>
<input disabled="disabled" type="text" name="number_of_version" size="20"/>
</div>
 <div class="conteneurChamp"> 
<label>Production sample required</label>
<input type="checkbox" name="production sample"/>
</div>
 <div class="conteneurChamp">
<label>Proof/Prototype required</label>
<input type="checkbox" name="proof_prototype"/>
</div>
 <div class="conteneurChamp"> 
<label>Flat Size - HxW (mm)</label>
<input type="text" name="flat_size" size="20"/>
</div>
 
<div class="conteneurChamp"> 
<label>Finished size - HxW (mm)</label>
<input type="text" name="finished_size_HxW" size="20"/>
</div>
 
</fieldset>
</body>

Merci beaucoup.
Par contre mon formulaire fait 4 pages A4, j'vais bien me marrer

Concernant la div vide je suis plutot d'accord avec toi. J'ai d'ailleurs utilise
ca pour autre chose a un endroit de mon formulaire. Sauf que j'ai opte
pour une troisieme solution :

Code :

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

1
2
3
<label class="hiddenlbl">
          hidden label
 </label>

Code :

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

1
2
3
4
.hiddenlbl
        {
            visibility: hidden;
        }

Concernant le float et le clear ensemble, j'ai relu un peu la doc du WC3. Meme si ce n'est pas ecrit explicitement, ca n'a pas vraiment de sens de
faire ca ...



Merci d'avoir pris un peu de votre temps pour moi

[TiEuAM]

ahh, désolé Macmillenium pour le coup du overflow:hidden inutile...
Je tombe a vrai dire jamais dans cette situation avec les fameux div clear:both vu que ça fait prendre toute la zone.

Mouuarf... moi qui trouvais ma manière correcte... la tienne est mieux, c'est sur, sans ces fameux div vides.

Je découvre que il y en a meme qui ont sorti de sacré sauces :
http://css.developpez.com/tutoriels/...issement-flux/

Merci de m'avoir mit un clear:both lool, je vais voir pour changer mes veilles habitudes.

[Candygirl]

Salut,
Un élément ne peu pas etre float:left et clear:both en meme tps !

Euh, pourquoi ? Ca me paraissait putot logique au contraire

Oui, on peut très bien appliquer un clear sur un élément flottant. Le problème, tu l'as rencontré; c'est très mal interprété par IE6 voir IE7

[Macmillenium]

Je découvre que il y en a meme qui ont sorti de sacré sauces :
http://css.developpez.com/tutoriels/...issement-flux/

Cet article date un peu (les codes avec le hack _ pour IE6- par exemple) et les méthodes d'intégration ont nettement évolué depuis.
En revanche, l'utilisation de clear:both s'impose dans certains cas de figures dont overflow:hidden pose problème (conteneur doté d'un overflow:hidden + position:relative et ayant un enfant/descendant positionné en absolute par exemple).

On peut cependant éviter l'utilisation de <hr style="clear:both" /> ou <div style="clear:both"></div> etc. grâce au pseudo-élément :after en générant une chaine vide couplé à un clear:both et display:block afin d'occuper toute la largeur disponible, ce qui donne :

Code css :

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

1
2
3
4
5
6
 
.conteneur-champ:after {
   content:"";
   clear:both;
   display:block;
}

Et dans le HTML :

Code :

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

1
2
3
4
5
 
<div class="conteneur-champ">
   <label for="bla">bla</label>
   <input type="text" id="bla" />
</div>

:after n'est pas implémenté dans IE6-, on se contente alors de conférer le layout à l'élément en question (un zoom:1 fera l'affaire) dans une CSS dédié à IE6- et appelé via commentaires conditionnels.

[TiEuAM]

Oui j'ai apercu ce :after
Mais il ne me convient pas non plus.
La simple astuce overflow:hidden devrait a priori bien me sauver, au pire du clear:both dans les éléments (non vide lol).