Aller au menu - Aller au contenu

Déplacement du menu de droite

Pour accéder à cette section
Connectez-vous !
connexion_rpx

Résolu Le problème de ce sujet a été résolu

Page 1 
Auteur Message
1 visiteur sur ce sujet (1 Anonyme)
Page 1 
Hors ligne Arkade # Posté le 04/07/2008 à 18:30:02
D'Oh !
Avatar
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 Arkade
Blog: I have a dream, n'hésitez pas à commenter pour faire naître le débat !
 
Publicité # Posté le 04/07/2008 à 18:30:02

Hors ligne Golmote # Posté le 04/07/2008 à 19:44:13
Tibadibadoum §
Avatar
close

Ville : Lormont
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 causés.
 
Hors ligne Arkade # Posté le 04/07/2008 à 19:50:52
D'Oh !
Avatar
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.
Blog: I have a dream, n'hésitez pas à commenter pour faire naître le débat !
 
Hors ligne Golmote # Posté le 04/07/2008 à 19:52:37
Tibadibadoum §
Avatar
close

Ville : Lormont
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 causés.
 
Hors ligne Yano # Posté le 04/07/2008 à 20:21:43
Avatar
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
Hors ligne Arkade # Posté le 04/07/2008 à 20:30:03
D'Oh !
Avatar
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.
Blog: I have a dream, n'hésitez pas à commenter pour faire naître le débat !
 
Hors ligne Yano # Posté le 04/07/2008 à 20:42:29
Avatar

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
Hors ligne Arkade # Posté le 04/07/2008 à 21:52:08
D'Oh !
Avatar
J'ai choisi celle là: trois colonnes dans un design fluide.
Blog: I have a dream, n'hésitez pas à commenter pour faire naître le débat !
 
Hors ligne Yano # Posté le 04/07/2008 à 22:41:46
Avatar

Redonnes les codes HTML et CSS.
Hors ligne Arkade # Posté le 04/07/2008 à 23:09:20
D'Oh !
Avatar
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>
Blog: I have a dream, n'hésitez pas à commenter pour faire naître le débat !
 
Hors ligne Yano # Posté le 05/07/2008 à 00:01:42
Avatar
À 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
Hors ligne Arkade # Posté le 05/07/2008 à 00:07:21
D'Oh !
Avatar
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 Arkade
Blog: I have a dream, n'hésitez pas à commenter pour faire naître le débat !
 
Hors ligne Arkade # Posté le 06/07/2008 à 16:35:36
D'Oh !
Avatar
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 Arkade
Blog: I have a dream, n'hésitez pas à commenter pour faire naître le débat !
 

Retour au forum "HTML / CSS" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !
connexion_rpx