Mon CSS joue à cache cache avec firefox

Version imprimable

Bonsoir,

J'ai depuis un moment des problèmes avec mon CSS, voici un exemple :

Script html :
Code:

1 2 3 4 5 6 7 <tr class="t_titre"> <td>Bienvenue sur</td> </tr> <tr ><td align="center"><img src="images/logo.png" alt="logo"></td></tr> <tr class="t_titre"> <td>Identification</td> </tr>
Mon CSS :
Code:

1 2 3 4 5 .t_titre { background : url(../images/fond_menu_off.gif) repeat-x fixed top left; font-weight: bold; /*** Pour améliorer la lisibilité des titres ***/ text-align: center; }
Mon CSS s'applique très bien sur le premier class="t_titre", mais pas sur le second.

Qu'est-ce qui peu induire un tel phénomène.

Merci d'avance

30/10/2006, 21h53
francis m

peut-être est-ce ta deuxième balise tr : tu y as mis en espace : <tr > au lieu de <tr>
30/10/2006, 21h56
lodan

Merci, j'ai corrigé mais ce n'étais pas ça.

Autre exemple d'évènement bizard

Mon script html
Code:

1 2 3 4 5 6 7 <div id="tabsH"> <ul> <li id="current"><a><span>Annuaire Utilisateurs</span></a></li> </ul> </div> <form id="recherche" action="{$current_page}" method="post"> <div id="titreForm">Liste</div>
Mon CSS :
Code:

1 2 3 4 5 6 7 8 /*** Mise en forme du titre ***/ #titreForm { /*** Mise en forme du titre et du pied de formulaire ***/ font: bold 1.1em arial, hevetica, sans-serif; color: white; background: grey; margin: 0; padding: .5em; }
Avec "titreForm", les lignes 5 lignes précédent mon "form" on un background grey. Je retire "titreForm", je n'ai plus de background. C'est ce que je veux d'ailleur, mais pourquoi tient-il compte des lignes précédentes ?

J'ai rien compris à CSS sûrement.

30/10/2006, 22h02
francis m

j'ai essayé ton code chez moi et il fonctionne correctement

n'aurais-tu pas un id "t_titre" ailleurs ?

Citation:

Envoyé par francis m

j'ai essayé ton code chez moi et il fonctionne correctement

n'aurais-tu pas un id "t_titre" ailleurs ?

Voivi l'intégralité du script, c'est cours :

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
<html>
 
<head>
<title>Administration</title>
<link REL="StyleSheet" TYPE="text/css" HREF="/<?php echo("$prefixe_dossier"); ?>css/style.css">
</head>
<body>
<form name="login" id="login" method="post">
<input type="hidden" name="action" value="send">
<table border="0" align="center" cellpadding="3" cellspacing="1" >
   <tr class="t_titre">
      <td>Bienvenue sur</td>
   </tr>
   <tr><td align="center"><img src="images/logo_gestelle.png" alt="GESTELLE"></td></tr>
     <tr class="t_titre">
      <td>Identification</td>
   </tr>
   <tr valign="top">
      <td >
 
	   <table border="0" align="center">
	      <tr >
		     <td align="right"><b>Code utilisateur</b></td>
			 <td class="t_cell"><input type="text" name="user_login" size="40" onchange="javascript:this.value=this.value.toUpperCase();"></td>
		  </tr>
		  <tr>
		     <td align="right"><b>Mot de passe</b></td>
			 <td class="t_cell"><input type="password" name="user_password" size="40" autocomplete="off"></td>
		  </tr>
	   </table>
 
	   <br>
 
	   <center><input type="submit" value="Connexion"></center>
 
      </td>
   </tr>
</table>
</form>
</body>

Et dans mon CSS, je n'ai qu'un t_titre

Je suis sous firefox

31/10/2006, 01h37
francis m

je suis désolé
il doit y avoir une subtilité avec firefox que je ne connais pas

j'ai essayé ton code, il ne fonctionne pas avec ff, mais il fonctionne correctement avec ie

:salut:
tu dois avoir un problème avec ton background parce que ceci marche comme il faut :

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
<!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>
<title>Administration</title>
<style type="text/css">
.t_titre {
        background-color:#FFFFCC;
        font-weight: bold; /*** Pour améliorer la lisibilité des titres ***/
        text-align: center;
}
 
table {
border:none;
text-align:center;
padding:3px;
margin:1px;
}
 
#right {
text-align:right;
font-weight:bold;
}
</style>
</head>
 
<body>
<form name="login" id="login" method="post">
	<input type="hidden" name="action" value="send" />
	<table>
		<tr class="t_titre">
			<td>Bienvenue sur</td>
		</tr>
		<tr>
			<td align="center"><img src="images/logo_gestelle.png" alt="GESTELLE"></td>
		</tr>
		<tr class="t_titre">
			<td>Identification</td>
		</tr>
		<tr valign="top">
			<td >	
				<table>
					<tr >
						<td id="right">Code utilisateur</td>
						<td class="t_cell"><input type="text" name="user_login" size="40" onchange="javascript:this.value=this.value.toUpperCase();" /></td>
					</tr>
					<tr>
						<td id="right">Mot de passe</td>
						<td class="t_cell"><input type="password" name="user_password" size="40" autocomplete="off" /></td>
					</tr>
				</table>
				<input type="submit" value="Connexion" />
			</td>
		</tr>
	</table>
</form>
</body>
</html>

ton code n'est pas bon : tu n'as défini de DOCTYPE, tu fermes pas certaines balises (dont le </html> :? ), ... celui du dessus est corrigé.
Tu devrais également utiliser des fieldset pour ton cas plutôt que des tableaux (imbriqués en plus) qui sont très lourd et pas fait pour ça ;)

Tu as essayé sinon de faire comme BisounourJos t'as dit dans un autre post :

Code:

1
2
3
4
background-attachment:fixed;
background-image:url(../images/fond_menu_off.gif);
background-position:top left;
background-repeat:repeat-x;

31/10/2006, 09h40
lodan

Oui j'ai fait ce que bisounoursJos m'avait proposé, mais pas de changement.

Je n'ai pas utilisé fieldset parceque et je viens de m'en rendre compte, mon éditeur (GoLive CS2) n'accepte pas les attributs :

Code:

<fieldset align="center" width="40%">

Lorsque j'écris ça, j'ai "align" et "width" en rouge, donc je lui ai fait confiance pour dire que ce n'était ce qu'il fallait faire.

Pourtant dans la doc sur fieldset, j'avais lu (souvenir) qu'on pouvait mettre des attributs, mais je n'ai pas creusé plus avant.

Bon reprenons mon problème de style.

Je suis sûrement "autiste" mais dans l'exemple que tu me présentes, j'ai perdu mon background avec une image tu fais avec une couleur.

Dans mon cas j'ai une image en background et sur mon exemple, mon problème est que le 1er t_titre à l'image, mais pas le 2ème.
31/10/2006, 10h02
trotters213

Citation:

Envoyé par lodan

Je n'ai pas utilisé fieldset parceque et je viens de m'en rendre compte, mon éditeur (GoLive CS2) n'accepte pas les attributs :

Bon alors pour commencer GoLive (ce qui suit n'engage que moi) c'est de la m... Passe ton site au validateur du W3C et lui il te dira si tu peux ou pas mettre ces attribut là à fieldset (align tu peux mais c'est déprécié en HTML et tu peux en XHTML je crois et width tu peux pas).

Citation:

Envoyé par lodan

Je suis sûrement "autiste" mais dans l'exemple que tu me présentes, j'ai perdu mon background avec une image tu fais avec une couleur.

C'est normal j'ai fait un test avec de la couleur (vu que je n'ai pas ton image) c'est pour cela que je dis que tu as un problème avec le background surement.

Citation:

Envoyé par lodan

Dans mon cas j'ai une image en background et sur mon exemple, mon problème est que le 1er t_titre à l'image, mais pas le 2ème.

Essaie en supprimant le fixed

J'ai supprimé fixed et cela fonctionne.

Je vais testé sur d'autres pages.

Pour tester mes styles je viens de faire ceci :
Code:

1 2 3 4 5 6 7 8 table {border: 1px solid black} tr {border: 1px dotted red} td {border: 1px dotted gray} div {border: 1px solid orange} img, form {border: 1px dashed blue} h1, h2, h3, h4, h5, h6, p {border: 1px solid yellow} ul {border: 1px solid green} li {border: 1px solid lightgreen}
Je mets ça en début de feuille de style et cela me permet de voir où commence et où se termine un style.

31/10/2006, 10h27
trotters213

pense au tag :resolu: si ton prob' l'est ;)
Dis nous ce qu'il en ai pour tes autres pages.

J'ai ce cas là qui me pose également problème :
Citation:
Envoyé par lodan
Autre exemple d'évènement bizard

Mon script html
Code:

1 2 3 4 5 6 7 <div id="tabsH"> <ul> <li id="current"><a><span>Annuaire Utilisateurs</span></a></li> </ul> </div> <form id="recherche" action="{$current_page}" method="post"> <div id="titreForm">Liste</div>
Mon CSS :
Code:

1 2 3 4 5 6 7 8 /*** Mise en forme du titre ***/ #titreForm { /*** Mise en forme du titre et du pied de formulaire ***/ font: bold 1.1em arial, hevetica, sans-serif; color: white; background: grey; margin: 0; padding: .5em; }
Avec "titreForm", les lignes 5 lignes précédent mon "form" on un background grey. Je retire "titreForm", je n'ai plus de background. C'est ce que je veux d'ailleur, mais pourquoi tient-il compte des lignes précédentes ?

J'ai rien compris à CSS sûrement.
Le point commun c'est que ce sont des "div", mais c'est tout, et je n'ai aucun style "div" seul.

bè j'ai fait ceci

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
<!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>
<title>Administration</title>
<style type="text/css">
#titreForm {
        font: bold 1.1em arial, hevetica, sans-serif;
        color:#fff;
        background:#666;
        margin: 0;
        padding: .5em;
}
</style>
</head>
 
<body>
<div id="tabsH">
	<ul>
		<li class="current"><a>Annuaire Utilisateurs</a></li>
		<li class="current"><a>Annuaire Utilisateurs</a></li>
		<li class="current"><a>Annuaire Utilisateurs</a></li>
	</ul>
</div>
<form id="recherche" action="{$current_page}" method="post">
	<div id="titreForm">Liste</div>
</form>
</body>
</html>

et le résultat est le même sous IE, FF et Opera et seule la ligne où tu écris "Liste" à un fond gris (j'ai supprimé les span ils ne servent à rien ;) ).

31/10/2006, 11h13
lodan

Dans mon cas ça ne marche pas, j'ai sûrement un truc qui traîne quelque part.

J'ai installé Webdevelopper pour faire des tests.
31/10/2006, 11h16
trotters213

tu es bien sur que tu as juste le code que je t'ai donné ou tu as autre chose ?
Si c'est le cas, poste tout comme ça on verra d'où ça peut venir.

Voici le code complet :

html :

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
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">-->
<html>
 
	<head>
		<link href="http://127.0.0.1/gestelle/css/style.css" type="text/css" rel="StyleSheet">
		<link href="http://127.0.0.1/gestelle/css/menu.css" type="text/css" rel="stylesheet">
 
	</head>
	<body>
<div id="tabsH">
	<ul>
		<li id="current"><a><span>Exercices</span></a></li>
		<li><a href="http://127.0.0.1/gestelle/admin/onglet_admin_finances_2.php"><span>Classes</span></a></li>
		<li><a href="http://127.0.0.1/gestelle/admin/onglet_admin_finances_3.php"><span>Catégories</span></a></li>
		<li><a href="http://127.0.0.1/gestelle/admin/onglet_admin_finances_4.php"><span>Sous-Catégories</span></a></li>
		{if $ok_liste==1}
			<li><a href="http://127.0.0.1/gestelle/majeurs/onglet_admin_finances_listes.php"><span>Listes</span></a></li>
		{/if}
	</ul>
</div>
<form id="recherche" action="" method="post">
<div id="titreForm">Liste des Exercices</div>
</body>
</html>

Les css

style :

Code:

1
2
3
4
5
6
7
8
/*** Mise en forme du titre ***/
#titreForm {	/*** Mise en forme du titre et du pied de formulaire ***/
	font: bold 1.1em arial, hevetica, sans-serif;
	color: white;
	background: grey;
	margin: 0;
	padding: .5em;
}

menu :

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
/* Menu horizontal*/
#tabsH {
      float:left;
      width:100%;
      font-size:93%;
      line-height:normal;
      margin:0;
      padding:0;
      font: bold 11px/1.5em Verdana;
}
 
#tabsH ul {
        margin:0;
        padding:10px 10px 30px 0;
        list-style:none;
}
#tabsH li {
      display:inline;
      margin:0;
      padding:0;
}
    #tabsH a {
      float:left;
      /*background:url("../images/tableftH.gif") no-repeat left top;*/
      background: url("../images/fond_menu_off.gif") repeat-x top left;
      margin:1;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsH a span {
      float:left;
      display:block;
      padding:5px 15px 4px 6px;
      color:grey;
      }
    #tabsH a span {float:none;}
    /* End IE5-Mac hack */
    #tabsH a:hover span {
      color:#FFF;
      }
    #tabsH a:hover {
      background-position:0% -42px;
      }
    #tabsH a:hover span {
      background-position:100% -42px;
      }
 
        #tabsH #current a {
                background-position:0% -42px;
        }
        #tabsH #current a span {
                background-position:100% -42px;
                color:#FFF;
        }

Les images :

http://127.0.0.1/gestelle/images/fond_menu_off.gif

Tu dois tout avoir

D'après mes tests le cache-cache est entre :

Code:

1
2
3
4
5
6
7
8
9
#tabsH {
      float:left;
      width:100%;
      font-size:93%;
      line-height:normal;
      margin:0;
      padding:0;
      font: bold 11px/1.5em Verdana;
}

Code:

1
2
3
4
5
6
7
#titreForm {	/*** Mise en forme du titre et du pied de formulaire ***/
	font: bold 1.1em arial, hevetica, sans-serif;
	color: white;
	background: grey;
	margin: 0;
	padding: .5em;
}

Même rendu sous IE, FF et Opera :

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
<!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:none;
}
 
#titreForm {
font:bold 1.1em arial, hevetica, sans-serif;
color:#fff;
background:#777;
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("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-position:-42px;
}
 
#tabsH #current a  {
background:none;
color:#777;
}
</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>
  </form>
</body>
</html>

Si ce n'est pas le rendu que tu voulais, fais un dessin sous paint histoire qu'on voit ce que tu veux ;)

31/10/2006, 14h23
Joe-La-Boule

Oublie pas de faire :resolu: et j'espere qu'on a pu te permettre de resoudre ton probleme ;)
31/10/2006, 14h33
lodan

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.
31/10/2006, 14h36
trotters213

Pense au validateur CSS également ;)

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:

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:

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.

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:

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:

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.

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:

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>

02/11/2006, 10h10
lodan

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.
02/11/2006, 10h33
trotters213

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).
02/11/2006, 10h55
lodan

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.
02/11/2006, 15h52
lodan

Erreur
02/11/2006, 16h00
Bisûnûrs

Citation:

Envoyé par lodan

Excellent tuto CSS pour une présentation simple, mais efficace.

URL : file:///C:/Program%20Files/EasyPHP1-8/www/gestelle/fonctions/CSS/SimplifiezVosFormulaires/SVF_intro.htm

...
02/11/2006, 16h21
lodan

Oups c'est ici et c'est intéressant de lire aussi cela.