Mon CSS joue à cache cache avec firefox

**lodan** · 31/10/2006, 14h33

Cela fonctionne.

J'ai fait quelques modifs de rien du tout et pour les fonds.

Je pars de cette base et vais rajouter au fur et à mesure mes styles, cela me permettra d'être sûrement plus propre.

Ensuite je ferai une validation W3C.

Une fois fini, je t'inviterai à venir voir.

Merci beaucoup.

Je reste en ligne au cas où, je mettrai résolu lorsque j'aurai fini.

**trotters213** · 31/10/2006, 14h36

Pense au validateur CSS également

**lodan** · 31/10/2006, 21h51

Me revoilou,

Bon, j'essaie de faire en sorte que les champs en input soit présenté selon le principe suivant :

Les constantes sont à gauche et occupe 20% de la largeur du formulaire, elles sont cadré à droite dans la page.

Les champs de saisie sont dans les 80 % restant et sont cadrés à gauche dans la page.

Mon script fonctionne pour la 1ère ligne et après il me décale tout ?

J'ai ajouté ces lignes de codes au script précédent

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">   
<head> 
<style type="text/css"> 
* { margin:0px; padding:0px; }   
body { background: #e6e6e8 url("http://127.0.0.1/gestelle/images/fond.gif") repeat-x top left; }   
#titreForm { font:bold 1.1em arial, hevetica, sans-serif; color:#000; background:url("http://127.0.0.1/gestelle/images/t_titre.gif"); padding:0.5em; }   
#tabsH { width:100%; font-size:93%; line-height:normal; font:bold 11px/1.5em Verdana; }   
#tabsH ul { padding:10px 10px 30px 0; list-style:none; }   
#tabsH li { display:inline; }   
#tabsH a { float:left; background: url("http://127.0.0.1/gestelle/images/fond_menu_off.gif") repeat-x top left; margin:1; display:block; padding:5px 15px 4px 6px; color:#777; text-decoration:none; }   
#tabsH a:hover { color:#fff;  background:none; background-position:-42px; }   
#tabsH #current a { background:none; color:#777; }
/*** Mise en forme du pieds ***/
#piedForm {	/*** Mise en forme du pied de formulaire ***/
 
	font: bold 1.1em verdana, arial, hevetica, sans-serif;
	text-align: right; /*** Les boutons sont alignés à droite ***/
	color: #fff;
	margin: 0px;
	padding: .5em;
}
 
#piedForm input {
	font-weight: bold; /*** Pour améliorer la lisibilité des boutons ***/
	margin-left: 1em;
}
 
/*** Mise en forme du corps ***/
#corpForm {	/*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
	background: #cccccc url(http://127.0.0.1/gestelle/images/fond_form.gif) repeat-x top left; /*** Ne pas toucher à la couleur de fond elle est la continuité de l'image de fond lorsqu'elle se termine ***/
	border: 1px solid black;
	color: #000000;
	margin: 0px;
	padding: 1em;
}
 
#corpForm fieldset#formulaire label {	/*** Mise en forme des intitulés de champs ***/
	float: left;		/*** Très important, ne pas suprimer ! ***/
	width: 20%;			/*** Les intitulés prennent x% de la largeur totale du formulaire... ***/
	text-align: right;	/*** ... et ils sont alignés à droite... ***/
	margin: 0px;
	padding: 0 .5em 0 0px;
	line-height: 1.8;	/*** ... et centrés verticalement. ***/
}
</style> 
</head> 
<body>  
<div id="tabsH">  
	<ul>  
		<li id="current"><a>Exercices</a></li>  
		<li><a href="...">Classes</a></li>  
		<li><a href="...">Catégories</a></li>  
		<li><a href="...">Sous-Catégories</a></li>  
		<li><a href="...">Listes</a></li>  
	</ul>  
</div>  
<form id="recherche" action="" method="post">  
<div id="titreForm">Liste des Exercices</div>
 
	<div id="corpForm">
	<fieldset id="formulaire">
	<legend>Description</legend>
	  	<p>
			<label for="numcart">N° de carte :</label>
			<input type="text" name="numcart" id="numcart" size="10">
		</p>
		<p>
			<label for="libelle">Libellé :</label>
			<input type="text" name="libelle" id="libelle" size="50">
		</p>
		</fieldset>
	</div>
 
	<div id="piedForm">
			<input type=submit name="Valider" value="Valider">
	</div>  
</form> 
</body> 
</html>

Si je supprime cette partie :

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
* { margin:0px; padding:0px; }   
body { background: #e6e6e8 url("http://127.0.0.1/gestelle/images/fond.gif") repeat-x top left; }   
#titreForm { font:bold 1.1em arial, hevetica, sans-serif; color:#000; background:url("http://127.0.0.1/gestelle/images/t_titre.gif"); padding:0.5em; }   
#tabsH { width:100%; font-size:93%; line-height:normal; font:bold 11px/1.5em Verdana; }   
#tabsH ul { padding:10px 10px 30px 0; list-style:none; }   
#tabsH li { display:inline; }   
#tabsH a { float:left; background: url("http://127.0.0.1/gestelle/images/fond_menu_off.gif") repeat-x top left; margin:1; display:block; padding:5px 15px 4px 6px; color:#777; text-decoration:none; }   
#tabsH a:hover { color:#fff;  background:none; background-position:-42px; }   
#tabsH #current a { background:none; color:#777; }
/*** Mise en forme du pieds ***/
#piedForm {	/*** Mise en forme du pied de formulaire ***/
 
	font: bold 1.1em verdana, arial, hevetica, sans-serif;
	text-align: right; /*** Les boutons sont alignés à droite ***/
	color: #fff;
	margin: 0px;
	padding: .5em;
}
 
#piedForm input {
	font-weight: bold; /*** Pour améliorer la lisibilité des boutons ***/
	margin-left: 1em;
}

Le CSS restant fonctionne alors très bien.

**lodan** · 01/11/2006, 17h26

Bon, quelques heures plus tard, j'ai laissé mon CSS tel que sur le post précédent.

Pour présenter le contenu du corps de formulaire, je suis partie sur ceci :

Code :

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

1
2
3
4
div.table { display:table; border-collapse:collapse; }
div.tr { display:table-row; }
div.td { display:table-cell; border:thin ; padding:5px; vertical-align:top;}
div.td_right { display:table-cell; border:thin ; padding:5px; vertical-align:top; text-align:right; width:30%;}

Et ça marche presque bien.

Sur un html comme celui-ceci :

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
<body>
	<div id="corpForm">
 
		<fieldset id="formulaire">
		<legend class="titre_cadre"> Saisie </legend>
			<div class="table">
				<div class="tr">
					<div class="td_right" title="Veuillez choisir un type de document">
						<b>*Type :</b>
					</div>
					<div class="td">
						<input type="text" name="type_doc">
					</div>
					<div class="td" title="Veuillez choisir un type de document">
						<span class="legende">ex : 'Administratif'</span>
					</div>
				</div>
			</div>
		</fieldset>
		<fieldset id="formulaire">
		<legend class="titre_cadre"> Faire une sélection sur </legend>
			<div class="table">
				<div class="tr">
					<div class="td_right" title="Veuillez choisir le destinataire">
						Destinataire :
					</div>
					<div class="td">
						<input type="text" name="destinataire">
					</div>
				</div>
			</div>
		</fieldset>
	</div>
</body>

Mon problème est que les 30% s'applique bien sur le 1er fieldset et pas sur le second.

Merci d'avance.

**trotters213** · 02/11/2006, 09h15

re,
c'est normal tu déclare formulaire comme un id alors que c'est une class (vu que tu l'utilise 2 fois)

C'est pas ceci que tu cherches à faire :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
* { 
margin:0px; 
padding:0px; 
}
   
body { 
background: #e6e6e8 url("http://127.0.0.1/gestelle/images/fond.gif") repeat-x top left; 
}  
 
/*** Mise en forme du corps ***/
#corpForm {     /*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
        background: #cccccc url(http://127.0.0.1/gestelle/images/fond_form.gif) repeat-x top left; /*** Ne pas toucher à la couleur de fond elle est la continuité de l'image de fond lorsqu'elle se termine ***/
        border: 1px solid black;
        color: #000000;
        margin: 0px;
 
        padding: 1em;
}
 
.formulaire label {     /*** Mise en forme des intitulés de champs ***/
        float: left;            /*** Très important, ne pas suprimer ! ***/
        width: 20%;                     /*** Les intitulés prennent x% de la largeur totale du formulaire... ***/
        text-align: right;      /*** ... et ils sont alignés à droite... ***/
        margin: 0px;
        padding: 0 .5em 0 0px;
        line-height: 1.8;       /*** ... et centrés verticalement. ***/
}
 
div.table { 
display:table; 
border-collapse:collapse; 
}
 
div.tr { 
display:table-row; 
}
 
div.td {
padding:5px; 
vertical-align:top;
}
 
div.td_right { 
display:table-cell;
font-weight:bold; 
padding:5px; 
vertical-align:top; 
text-align:right; 
width:30%;
}
</style>
</head>
 
<body>
	<div id="corpForm">
 
		<fieldset class="formulaire">
		<legend class="titre_cadre"> Saisie </legend>
			<div class="table">
				<div class="tr">
					<div class="td_right" title="Veuillez choisir un type de document">
						*Type :
					</div>
					<div class="td">
						<input type="text" name="type_doc">
					</div>
					<div class="td" title="Veuillez choisir un type de document">
						<span class="legende">ex : 'Administratif'</span>
					</div>
				</div>
			</div>
		</fieldset>
		<fieldset class="formulaire">
		<legend class="titre_cadre"> Faire une sélection sur </legend>
			<div class="table">
				<div class="tr">
					<div class="td_right" title="Veuillez choisir le destinataire">
						Destinataire :
					</div>
					<div class="td">
						<input type="text" name="destinataire">
					</div>
				</div>
			</div>
		</fieldset>
	</div>
</body>
</html>

**lodan** · 02/11/2006, 10h10

Je ne sais pas ce que tu m'as renvoyé, mais cela ne fonctionne pas.

Ce que je cherchais à faire, c'est que les constantes occupent 30% de la place disponible, qu'elles soient toutes cadrées à droite.

Tel que j'ai redéfini mes formulaires en tableau avec des div, je n'ai plus de "label". Donc tout ce joue au niveau des div.

**trotters213** · 02/11/2006, 10h33

c'est à dire que tu n'expliques pas bien ton problème et qu'en plus tu dérives complètement du sujet de base.
Si ton problème de base est réolu, ferme ce post, crées en un autre et explique correctement ton souhait (quitte à faire un dessin).

**lodan** · 02/11/2006, 10h55

Je fermes et je fais autrement.

Moi j'avais compris qu'il fallait que je fasse évoluer mon CSS et mes scripts pour que l'ensemble tienne. Donc évidemment, une fois la 1ère partie ok, le reste ne tenait plus la route.

Comme je pensais aussi que les css pouvait être dépendant les un des autres, je continuais sur ce post.

Merci pour ta patience.