D'Oh !
|
Bonsoir,
Sur ma page index, j'ai un menu à gauche, un corps et un menu à droite.
Quand je poste une news, tout reste normal. Mais à partir de 2 news, le menu de droite se met dans le corps, en-dessous des news. Pourquoi ? J'ai bien vérifié, toutes mes balises sont bien fermées, et, je pense que le CSS concorde avec ce que je souhaite avoir, cest-à-dire: menu_gauche / Corps / menu_droite.
Voici ma page index:
Code : PHP 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Nom Du Jeu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="design-index.css" />
</head>
<body>
<div id="en_tete">
</div>
<div id="menu_gauche">
<?php
include("menu_gauche.php") ;
?>
</div>
<div id="corps">
<?php
$pageActuelle = "index.php";
?>
<p><h3>Bonjour et bienvenue sur "Nom du site"!</h3><br />
Intro <br /></p>
<?php
mysql_connect("XXX", "XXX", "XXX");
mysql_select_db("XXX");
$retour = mysql_query('SELECT * FROM news ORDER BY id DESC LIMIT 0, 5') or exit(mysql_error());
while ($donnees = mysql_fetch_array($retour))
{
?>
<div class="news">
<h3>
<?php echo $donnees['titre']; ?>
<em>le <?php echo date('d/m/Y à H\hi', $donnees['timestamp']); ?></em>
</h3>
<p>
<?php
if (isset($donnees['contenu']))
{
$contenu = stripslashes($donnees['contenu']);
$contenu = htmlspecialchars($contenu);
$contenu = nl2br($contenu);
//Smileys
$contenu = str_replace('(a) ', '<img src="images/smileys/ange.png" title="ange" alt="ange" />', $contenu);
$contenu = str_replace(':angry: ', '<img src="images/smileys/angry.gif" title="angry" alt="angry" />', $contenu);
$contenu = str_replace(':blink: ', '<img src="images/smileys/blink.gif" title="blink" alt="blink" />', $contenu);
$contenu = str_replace(';) ', '<img src="images/smileys/clin.png" title="clin" alt="clin" />', $contenu);
$contenu = str_replace('(@) ', '<img src="images/smileys/diable.png" title="diable" alt="diable" />', $contenu);
$contenu = str_replace(':D ', '<img src="images/smileys/heureux.png" title="heureux" alt="heureux" />', $contenu);
$contenu = str_replace('hihi ', '<img src="images/smileys/hihi.png" title="hihi" alt="hihi" />', $contenu);
$contenu = str_replace(':huh: ', '<img src="images/smileys/huh.png" title="huh" alt="huh" />', $contenu);
$contenu = str_replace(':p ', '<img src="images/smileys/langue.png" title="langue" alt="langue" />', $contenu);
$contenu = str_replace(':magic: ', '<img src="images/smileys/magicien.png" title="magicien" alt="magicien" />', $contenu);
$contenu = str_replace(':mechant: ', '<img src="images/smileys/mechant.png" title="mechant" alt="mechant" />', $contenu);
$contenu = str_replace(':ninja: ', '<img src="images/smileys/ninja.png" title="ninja" alt="ninja" />', $contenu);
$contenu = str_replace(':pinch: ', '<img src="images/smileys/pinch.png" title="pich" alt="pinch" />', $contenu);
$contenu = str_replace(':pirate: ', '<img src="images/smileys/pirate.png" title="pirate" alt="pirate" />', $contenu);
$contenu = str_replace(':pleure: ', '<img src="images/smileys/pleure.png" title="pleure" alt="pleure" />', $contenu);
$contenu = str_replace(':rire: ', '<img src="images/smileys/rire.gif" title="rire" alt="rire" />', $contenu);
$contenu = str_replace(':$ ', '<img src="images/smileys/rouge.png" title="rouge" alt="rouge" />', $contenu);
$contenu = str_replace(':siffle: ', '<img src="images/smileys/siffle.png" title="siffle" alt="siffle" />', $contenu);
$contenu = str_replace(':) ', '<img src="images/smileys/smile.png" title="smile" alt="smile" />', $contenu);
$contenu = str_replace('(h) ', '<img src="images/smileys/soleil.png" title="soleil" alt="soleil" />', $contenu);
$contenu = str_replace(':( ', '<img src="images/smileys/triste.png" title="triste" alt="triste" />', $contenu);
$contenu = str_replace('*-) ', '<img src="images/smileys/unsure.gif" title="unsure" alt="unsure" />', $contenu);
$contenu = str_replace(':waw: ', '<img src="images/smileys/waw.png" title="waw" alt="waw" />', $contenu);
$contenu = str_replace(':zorro: ', '<img src="images/smileys/zorro.png" title="zorro" alt="zorro" />', $contenu);
$contenu = preg_replace('#\[b\](.+)\[/b\]#isU', '<strong>$1</strong>', $contenu);
$contenu = preg_replace('#\[i\](.+)\[/i\]#isU', '<em>$1</em>', $contenu);
$contenu = preg_replace('#\[u\](.+)\[/u\]#isU', '<u>$1</u>', $contenu);
$contenu = preg_replace('#\[quote\](.+)\[/quote\]#isU', '<cite>$1</cite>', $contenu);
$contenu = preg_replace('#\[code\](.+)\[/code\]#isU', '<blockquote><p>$1</p></blockquote>', $contenu);
$contenu = preg_replace('#\[img\](.+)\[/img\]#isU', '<img src="$1" />', $contenu);
$contenu = preg_replace("#\[url=(http://)\](.+)\[/url\]#isU",'<a href="$1">$2</a>', $contenu);
$contenu = preg_replace("!\[url=([^\]]+)\](.+)\[/url\]!Ui","<a href=\"$1\" target=\"_blank\">$2</a>",$contenu);
echo $contenu . '<br /><hr />';
}
?>
<?php
}
?>
</p>
</div>
</div>
<div id="menu_droite">
<?php
include("menu_droite.php") ;
?>
</div>
<div id="pied_de_page">
<?php
include("pied_de_page.php") ;
?>
</div>
</body>
</html>
|
Et ma page CSS:
Code : CSS 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180 | body
{
width: 1400px;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
background-image: url("");
margin-left: 30px;
margin-right: 0px;
}
#en_tete
{
width: 1000px;
height: 165px;
background-image: url("");
background-repeat: no-repeat;
margin-bottom: 10px;
}
#menu_gauche
{
float: left;
width: 170px;
}
#corps
{
width: 820px;
float: left;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding: 5px;
background-color: rgb(255,255,255);
background-image: url("");
background-repeat: repeat-x;
border: 2px solid rgb(255,0,0);
}
.image_a_propos
{
width: 250px;
height: 150px;
}
blockquote
{
background-color:#87CEFA;
padding:10px;
}
.center
{
text-align:center;
}
.center_bold
{
font-weight: bold;
}
table
{
border-collapse:collapse;
border:2px solid black;
margin:auto;
}
th, td
{
border:1px solid black;
}
#pied_de_page
{
width: 1000px;
padding: 5px;
text-align: center;
background-color: #cae7ee;
background-image: url("images/motif.png");
background-repeat: repeat-x;
clear: both;
border: 2px solid black;
}
#menu_droite
{
float: left;
width: 170px;
}
.element_menu
{
background-color: rgb(202,231,238);
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
margin-bottom: 20px;
}
.textarea
{
width: 5px;
}
|
Merci beaucoup. Je précise que ce bug n'existait pas il y a quelques jours, et que j'ai essayé d'enlever les codes que j'avais ajoutés, mais sans grand succès.
Édité
le 04/07/2008 à 18:30:50
par Vilower
|
Not a LARBIN !
Ville : Lanvallay
Pays : France métropolitaine
|
Bah perso, je vois deux problèmes... Là, avec les float:left, tes div sont "empilés" contre le côté gauche... ce qui veut dire que si l'écran est plus grand, ta page semblera serrée à gauche.
Chez moi, sur un écran petit, le div du menu de droite passe à la ligne du dessous, vu qu'il n'a pas la place de rentrer à droite...
Pour abréger JavaScript, on dit JS, pas Java.
Java != JavaScript
Merci.
Sachez aussi que vous aider est éprouvant.
Veuillez excuser les désagréments encourus.
|
D'Oh !
|
Oui j'ai ça aussi.
Mais, hier, les menus s'affichaient très bien.
Pour le flot:left, j'avais posé la question de: comment mettre deux menus entre un corps sur le forum, et on m'avait dit de faire ça.
|
Not a LARBIN !
Ville : Lanvallay
Pays : France métropolitaine
|
Bah c'est vrai que c'est une bonne solution, mais à mes yeux elle a quand même ces inconvénients 
Pour abréger JavaScript, on dit JS, pas Java.
Java != JavaScript
Merci.
Sachez aussi que vous aider est éprouvant.
Veuillez excuser les désagréments encourus.
|
|
Bonjour,
Tu as un problème identique à celui-ci.
Deux techniques sont proposées.
++
Ici, c'est un forum HTML, le PHP est y est sans intérêt.
Son résultat en HTML, par contre, oui.
Évite les <h_> dans des <p>.
Édité
le 04/07/2008 à 20:24:27
par Yano
|
D'Oh !
|
Merci, le menu est bien revenu à droite. Par contre, le pied de page est resté dans le corps, et ça fait qu'il pousse le menu de droite hors de l'écran. J'ai fait: float:bottom pour le pied de page, mais ça n'a rien changé.
Oui désolé, j'y penserai la prochaine fois pour le PHP. Mais, je pensais que l'erreur pouvait se trouver dans les codes PHP.
|
|
Quelle solution as-tu choisi ?
Donne les parties CSS et HTML que tu as modifiées.
Édité
le 04/07/2008 à 20:43:08
par Yano
|
D'Oh !
|
J'ai choisi celle là: trois colonnes dans un design fluide.
|
|
Redonnes les codes HTML et CSS.
|
D'Oh !
|
Voici le CSS:
Code : CSS 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190 | body
{
width: 1400px;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
background-image: url("");
margin-left: 30px;
margin-right: 0px;
}
#en_tete
{
width: 1000px;
height: 165px;
background-image: url("");
background-repeat: no-repeat;
margin-bottom: 10px;
}
#menu_gauche
{
width: 170px;
}
#corps
{
width: 820px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding: 5px;
background-color: rgb(255,255,255);
background-image: url("");
background-repeat: repeat-x;
border: 2px solid rgb(255,0,0);
}
.image_a_propos
{
width: 250px;
height: 150px;
}
blockquote
{
background-color:#87CEFA;
padding:10px;
}
.center
{
text-align:center;
}
.center_bold
{
font-weight: bold;
}
table
{
border-collapse:collapse;
border:2px solid black;
margin:auto;
}
th, td
{
border:1px solid black;
}
#menu_droite
{
float: right;
width: 170px;
}
#pied_de_page
{
width: 1000px;
padding: 5px;
float: left;
text-align: center;
background-color: #cae7ee;
background-image: url("");
background-repeat: repeat-x;
clear: both;
border: 2px solid black;
}
.options_configuration_connection
{
font-size: small;
font-style: italic;
}
.element_menu
{
background-color: rgb(202,231,238);
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
margin-bottom: 20px;
}
.textarea
{
width: 5px;
}
|
Voici l'index:
Code : HTML 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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Nom Du Jeu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="design-index.css" />
</head>
<body>
<div id="en_tete">
</div>
<div id="menu_gauche">
<?php
include("menu_gauche.php") ;
?>
</div>
<div id="menu_droite">
<?php
include("menu_droite.php") ;
?>
</div>
<div id="corps">
<p>Corps</p>
</div>
<div id="pied_de_page">
<?php
include("pied_de_page.php") ;
?>
</div>
</body>
</html>
|
|
|
À part l'ajout d'une erreur dans le #pied_de_page (float: left;) rien d'utile n'y a été modifié.
C'est ici qu'il faut que tu commences.
Chez moi, ça fonctionne (sans PHP).
Édité
le 05/07/2008 à 00:02:11
par Yano
|
D'Oh !
|
EDIT: Je pense que tout s'est remis en ordre.
Sauf que, il y a juste un petit problème: comment faire pour que le pied de page reste à une position fixe, c'est-à-dire, sans être sur un autre block ? Merci 
Édité
le 05/07/2008 à 14:01:15
par Vilower
|
D'Oh !
|
Non, c'est bon, j'ai résolu tout seul.
J'avais oublié de supprimer le margin bottom du corps, et d'appliquer un clear both au pied de page.
Merci beaucoup à toi quand même ! 
Édité
le 06/07/2008 à 18:13:07
par Vilower
|
Le problème de ce sujet a été résolu
Vilower
Facebook