Probleme de placement de div

Version imprimable

Bonjour

J'aimerais effectuer cette présentation dans mon site :
http://ledoidanlku.free.fr/tmp/tmp.JPG
Dans chaque case je mets un tableau.
Voici le css que j'ai fait :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 #gauche { width: 49%; float: left; } #droite { width: 50%; float: left; } #bas { clear:both; width: 100%; }
et mon code html :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 ... <div> <div id="gauche"> <table>...</table> </div> <div id="droite"> <table>...</table>[/FONT] </div> <div id="bas"> <table>...</table>[/FONT] </div>[/FONT] </div> ...
Le problème est que les trois cadres se mettent à la suite, l'une à coté de l'autre !
Si quelqu'un avait une 'tite idée

Merci d'avance

24/05/2006, 11h18
Swoög

essaie de metre #droite en float : right ;) et de réduire un peu les largeurs des fois, il faut du 98% ou 95% max pour qu'ils soient côte à côte ;)
24/05/2006, 12h07
KeKeMaN

nan mais le gauche et le droit sont bien cote à cote, mais le bas se retrouve à droite du gauche ...

8O

essaie ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
<div>
  <div id="gauche">
    <table>...</table>
  </div>
  <div id="droite">
   <table>...</table>[/FONT]
  </div>
  <div style="clear : both"></div>
  <div id="bas">
    <table>...</table>[/FONT]
   </div>[/FONT]
</div>
...

je sais que ç'a l'air de servir à rien... mais des fois il y a des petits bug avec le clear ;)

nop ça marche pas non plus ...
c'est bizare ... je vous mets la sources :

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
 
        $action = "http://" . $_SERVER["SERVER_NAME"] . $_SERVER["PHP_SELF"];
        $html = <<<EOT
<form action="{$action}" method="post">
<fieldset>
<legend>Détails du dossier</legend>
<table border="0">
<tr>
<th>Numéro du dossier :</th>
<td>{$dossier->numDossier}<input type="hidden" name="numDossier" value="$dossier->numDossier"></td>
</tr>
<tr>
<th>Date de la demande :</th>
<td>{$dateDemande}</td>
</tr>
<tr>
<th>Etat du dossier :</th>
<td>{$dossier->statut()}</td>
</tr>
EOT;
        if($dossier->statut() == "accepte") {
            $dateAcceptation = dateFR($dossier->dateAcceptation);
            $html .= "<tr><th>Date d'acceptation :</th><td>$dateAcceptation</td></tr>";
        }
        if($dossier->statut() == "en attente de pieces justificatives") {
            $dateDemandeJustificatif = dateFR($dossier->dateDemandeJustificatif);
            $html .= "<tr><th>Date de mise en attente :</th><td>$dateDemandeJustificatif</td></tr>";
            $html .= "<tr><th>Délai de mise en attente :</th><td>$dossier->delaiAttente jours</td></tr>";
        }
        if($dossier->statut() == "refuse") {
            $dateRefus = dateFR($dossier->dateRefus);
            $html .= "<tr><th>Date de refus :</th><td>$dateRefus</td></tr>";
        }
        $html .= <<<EOT
</table>
</fieldset>
<fieldset>
<legend>Détails du ménage</legend>
<div>
<div id="beneficiaire1">
<table border="0">
<tr>
<th>Nom :</th>
<td>{$personne->nom}</td>
</tr>
<tr>
<th>Prénom :</th>
<td>{$personne->prenom}</td>
</tr>
<tr>
<th>Date de naissance :</th>
<td>{$dateNaissance1}</td>
</tr>
</table>
</div>\n
EOT;
        if($personne2) {
            $html .= <<<EOT
<div id="beneficiaire2">
<table border="0">
<tr>
<th>Nom du conjoint :</th>
<td>{$personne2->nom}</td>
</tr>
<tr>
<th>Prénom du conjoint :</th>
<td>{$personne2->prenom}</td>
</tr>
<tr>
<th>Date de naissance du conjoint :</th>
<td>{$dateNaissance2}</td>
</tr>
</table>
</div>\n
EOT;
        }
        $html .= <<<EOT
<div style="clear : both"></div>
<div id="menage">
<table border="0">
<tr>
<th>Code INSEE :</th>
<td>{$personne->codeINSEE}</td>
</tr>
<tr>
<th>Numéro de téléphone :</th>
<td>{$personne->numTelephone}</td>
</tr>
<tr>
<th>Revenu du ménage :</th>
<td>{$personne->revenu}</td>
</tr>
</table>
</div>
</div>
</fieldset>
<p>
EOT;

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
 
#marie {
    width:100%;
}
 
#beneficiaire1 {
    width: 49%;
    float: left;
}
 
#beneficiaire2 {
    width: 50%;
    float: left;
}
 
#menage {
    clear:both;
    width: 100%;
}
 
table {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
 
th {
    text-align: right;
}
 
td {
    text-align: left;
}

29/05/2006, 09h29
KeKeMaN

personne n'a de petite idée ??
j'aimerais vraiment trouver comment faire !!!

merci d'avance

1 pièce(s) jointe(s)

Salut,
je ne comprends pas ou est le problème (voir fichier ci joint)
mon code :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> 
<head>
    <title>Page de démonstration</title>
    <meta http-equiv="Content-Type"
      content="text/html; charset=iso-8859-1" />
    <style type="text/css">
#gauche {
    width: 50%;
    float: left;
    background-color:red;
}
 
#droite {
    width: 50%;
    float: left;
    background-color:blue;
}
 
#bas {
    clear:both;
    width: 100%;
    background-color:green;
}
    </style>
  </head>
  <body>
<div>
  <div id="gauche">
    <table><tr><td>Contenu gauche</td></tr></table>
  </div>
  <div id="droite">
   <table><tr><td>Contenu droite</td></tr></table>
  </div>
  <div id="bas">
    <table><tr><td>Contenu bas</td></tr></table>
   </div>
</div>
  </body>
</html>

Il me semble que ça correspond à ton schéma ???
@++

30/05/2006, 11h50
KeKeMaN

oui oui c'est bien ça que je veux faire mais ca me donne ca :http://ledoidanlku.free.fr/tmp/tmp2.JPG

donc je cromprends pas !!!
et j'ai bien matté mon code je vais exactement ce que tu me dis ...

Merci beaucoup d'avance
30/05/2006, 12h16
KeKeMaN

bon alors j'ai plus ou moins trouvé ...
en fait dès que j'enlève les fieldset (+legend), tout se place correctement, et ca fait la même chose dans ton code jeff2034 !!

mais moi j'ai pas envi de les enlever pour ma présentation !!
donc si quelqu'un avait une idée ...

Merci d'avance

Salut,

Est ce que tu pourrais laisser le code histoire qu'on y jete un oeil. Perso même avec un fieldset ça marche. Je suppose que sur ton image, le texte de droite "code INSEE" etc ...) devrait se trouver dans le vert ?

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> 
<head>
    <title>Page de démonstration</title>
    <meta http-equiv="Content-Type"
      content="text/html; charset=iso-8859-1" />
    <style type="text/css">
 
 
#gauche {
    width: 50%;
    float: left;
    background-color:red;
}
 
#droite {
    width: 50%;
    float: left;
    background-color:blue;
}
 
#bas {
    clear:both;
    width: 100%;
    background-color:green;
        float:left;
}
 
    </style>
  </head>
  <body>
<form method="post" action="test.php">
<fieldset>
<legend>Détails du ménage</legend>
<div style="height:100%">
  <div id="gauche">
       <table>
	<tr><td>Nom : ******</td></tr>
	<tr><td>Prénom : ***********</td></tr>
	<tr><td>Date de naissance : *******</td></tr>
	</table>
  </div>
  <div id="droite">
   <table>
	<tr><td>Nom du conjoint : ******</td></tr>
	<tr><td>Prénom du conjoint : ***********</td></tr>
	<tr><td>Date de naissance du conjoint : *******</td></tr>
</table>
  </div>
 
  <div id="bas">
    	<table>
	<tr><td>Code INSEE : ******</td></tr>
	<tr><td>Numéro de téléphone : ***********</td></tr>
	<tr><td>Revenu du ménage : *******</td></tr>
	</table>
   </div>
</div>
</fieldset>
</form>
 
  </body>
</html>

Franchement si Swoög te dit de mettre float:right pour la div droite, c'est pas pour t'embêter hein.
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 .gauche { width: 49%; height:100px; float: left; border:1px solid #666666 } .droite { width: 49%; float: right; height:100px; background-color:blue; border:1px solid #666666 } .bas { clear:both; width: 100%; height:100px; background-color:green; border:1px solid #666666 } <body> <div class="gauche"></div> <div class="droite"></div> <div class="bas"></div> </body>
Avec ça j'obtiens ton schéma en haut, à toi d'ajuster les margins, padding et autres width.

31/05/2006, 10h02
KeKeMaN

Avec float:right voila ce que ca donne :
http://ledoidanlku.free.fr/tmp/tmp3.JPG

J'avais déja essayé :cry:

C'est bon ça marche !!!!!! :D
En fait j'ai rajouté "float : left" a ma div #bas, ce qui a permis de bien tout positionner ... je sais pas si c'est la meilleure solution, mais au moins ça marche !

http://ledoidanlku.free.fr/tmp/tmp4.JPG

Juste une dernière petite chose. Est-ce que vous savez pourquoi sous IE, la mise en page et celle-ci :

http://ledoidanlku.free.fr/tmp/tmp5.JPG

Source :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
<head>
  <title>Page</title>
  <link rel="stylesheet" type="text/css" href="../skin/style.css" />
</head>
 
<body>
  <div id="titre">
    Titre
  </div>
 
  <div id="contenu">
    <h2>Consultation d'un dossier</h2>
    <form action="xxxx" method="post">
<fieldset>
<legend>Détails du dossier</legend>
<table border="0">
<tr><th>Numéro du dossier :</th><td>10<input type="hidden" name="numDossier" value="10" /></td></tr>
<tr><th>Date de la demande :</th><td>22/05/2006</td></tr>
<tr><th>Etat du dossier :</th><td>refuse</td></tr>
<tr><th>Date de refus :</th><td>22/05/2006</td></tr></table>
</fieldset>
<fieldset>
<legend>Détails du ménage</legend>
<div>
<div id="beneficiaire1">
<table border="0">
<tr><th>Nom :</th><td></td></tr>
<tr><th>Prénom :</th><td></td></tr>
<tr><th>Date de naissance :</th><td></td></tr>
</table>
</div>
<div id="beneficiaire2">
<table border="0">
<tr><th>Nom du conjoint :</th><td></td></tr>
<tr><th>Prénom du conjoint :</th><td></td></tr>
<tr><th>Date de naissance du conjoint :</th><td></td></tr>
</table>
</div>
<div style="clear : both"></div>
<div id="menage">
<table border="0">
<tr><th>Code INSEE :</th><td></td></tr>
<tr><th>Numéro de téléphone :</th><td></td></tr>
<tr><th>Revenu du ménage :</th><td></td></tr>
</table>
</div>
</div>
</fieldset>
<p><input type='submit' name="a" value="Retour au menu" class="bouton"/>
</p>
</form>
<div id="menu">
</div>
</div>
</body>
</html>

CSS :

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
132
133
134
135
 
body {
	font: 9pt Tahoma, Verdana, Arial, Helvetica, Geneva, sans-serif;
	background-image: url("img/fond.gif");
	background-repeat: repeat-y;
	background-position: center;
	text-align: center;
	margin-top: 20px;
}
 
#titre {
	font:  19pt Tahoma, Verdana, Arial, Helvetica, Geneva, sans-serif;
	text-align: center;
}
 
#contenu {
	margin-left: 20%;
	margin-right: 20%;
	margin-top: 80px;
	width: 60%;
	text-align: center;
	border: 1px dotted black;
}
 
#menu {
	margin-top: 10px;
	margin-bottom: 15px;
}
 
#formulaire {
	margin-left: 15%;
	margin-right: 15%;
	margin-bottom: 10px;
	width: 70%;
}
 
#formulaire label {
	float: left;
	width: 40%;
	text-align: right;
}
 
a:link {
	text-decoration: none;
}
 
a:visited {
	text-decoration: none;
}
 
a:hover {
	text-decoration: none;
}
 
.bouton {
	border: 0px outset;
	font-weight: bold;
	cursor: pointer;
}
 
input {
	border: 1px solid;
}
 
radio {
	border: 0px;
}
 
table {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
 
th {
	text-align: right;
}
 
td {
	text-align: left;
}
 
#tableau {
	width: auto;
	margin-left: auto;
	margin-right: auto;
	border-style: solid; 
	border-width: 1px; 
	border-color: black;
	border-collapse: collapse;
}
 
#tableau th {
	text-align: center;
	border-style:solid; 
	border-width:1px; 
	border-color:black;
}
 
#tableau td {
	text-align: center;
	border-style:solid; 
	border-width:1px; 
	border-color:black;
}
 
fieldset {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
 
textarea {
	font: 9pt Tahoma, Verdana, Arial, Helvetica, Geneva, sans-serif;
}
 
#beneficiaire1 {
	width: 49%;
	float: left;
	background-color:yellow;
}
 
#beneficiaire2 {
	width: 49%;
	float: right;
	background-color:gray;
}
 
#menage {
	clear:both;
	width: 100%;
	background-color:green;
	float:left;
}

Meric encore bôcou bôcou ;)

31/05/2006, 11h55
psychoBob

Citation:

</div>
<div style="clear : both"></div>
<div id="menage">

Qu'est ce que ça fiche dans ton code ce div style clear both ? C'est n'importe quoi ça.

Tu veux un bon conseil aussi : quand tu fermes une balise div tu écris </div>.

Cela s'implifie beaucoup les choses quand on relie le code et que l'on a des balises imbriquées. ;)
31/05/2006, 17h36
KeKeMaN

Citation:

Envoyé par psychoBob

C'est n'importe quoi ça.

:aie: Ben c'est juste Swoög qui m'avait dit d'essayer ca, mais je vais l'enlever vu que ca sert a rien ...
mais je pense pas que ca soit du a ca si ??
31/05/2006, 17h57
psychoBob

Bah d'ailleurs, juste en dessous Swoög à écrit :

Citation:

je sais que ç'a l'air de servir à rien... mais des fois il y a des petits bug avec le clear

Faut pas s'étonner en effet...

Enfin si ça se trouve c'est valable mais j'ai jamais vu ça d'en aucun tuto sur les css, même pas ceux de Meyer.
A mon avis, Swoög a écrit ça juste pour simplifier son exemple, sinon de toute façon c'est dans la feuille de style.

Citation:

mais je pense pas que ca soit du a ca si

Dès fois un seul pixel en plus ou en moins en valeur de width, et toute la mise en page change, alors tu sais...