Probleme de placement de div

**KeKeMaN** · 24/05/2006, 11h11

Bonjour

J'aimerais effectuer cette présentation dans mon site :

Dans chaque case je mets un tableau.
Voici le css que j'ai fait :

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
 
#gauche {
    width: 49%;
    float: left;
}
 
#droite {
    width: 50%;
    float: left;
}
 
#bas {
    clear:both;
    width: 100%;
}

et mon code html :

Code :

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

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

**Swoög** · 24/05/2006, 11h18

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

**KeKeMaN** · 24/05/2006, 12h07

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

**Swoög** · 24/05/2006, 13h01

essaie 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
...
<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

**KeKeMaN** · 24/05/2006, 15h40

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

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
 
        $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 :

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
 
#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;
}

**KeKeMaN** · 29/05/2006, 09h29

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

merci d'avance

Invité · 29/05/2006, 20h43

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

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
 
<!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 ???
@++

**KeKeMaN** · 30/05/2006, 11h50

oui oui c'est bien ça que je veux faire mais ca me donne ca :

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

Merci beaucoup d'avance

**KeKeMaN** · 30/05/2006, 12h16

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

Invité · 30/05/2006, 19h36

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 :

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
 
<!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>

@+

**psychoBob** · 30/05/2006, 20h17

Franchement si Swoög te dit de mettre float:right pour la div droite, c'est pas pour t'embêter hein.

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
.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.

**KeKeMaN** · 31/05/2006, 10h02

Avec float:right voila ce que ca donne :

J'avais déja essayé

**KeKeMaN** · 31/05/2006, 10h10

C'est bon ça marche !!!!!!

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 !

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

Source :

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
 
<!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 :

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
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

**psychoBob** · 31/05/2006, 11h55

</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.

**KeKeMaN** · 31/05/2006, 17h36

Envoyé par psychoBob

C'est n'importe quoi ça.

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 ??

**psychoBob** · 31/05/2006, 17h57

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

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.

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...

Probleme de placement de div

HTML

Discussions similaires

Partager

Partager