Discussion :

[Mo_Poly]

hi!

J'ai une page web qui est divisé en plusieurs div, et j'ai un probleme avec l'un de ces derniers.

il s'agit du div :<div id="corps"> (donc le corps de la page ), outre que ce div j'ai un <div id="menu">avec un float: left; ...

dans le div corps j'affiche un tableau, sur firefox l'affichage est parfait(c'est à dire que j'ai un menu à gauche, et le contenu juste à coté au centre de la page), sur internet explorer je n'obtiens le même resultat que sur firfox, sur internet explorer j'obtiens le menu à gauche, mais le corps en dessous du menu (au centre aussi)

avez vous une idée sur ce problème, et surtout savez vous quel code mettre pour obtenir le meme affichage que ce soit sur firefox ou sur internet explorer ?


merci



...

[pop_up]

pour t'aider, il faudrai que tu mettes ton code html et aussi ton css pour pouvoir tester.

merci

[Mo_Poly]

oui t'as raison,

mon code HTML est le suivant :

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
echo"<div id=\"en_tete\">
			</div>
 
			<div id=\"menu\">
 
 
			<div class=\"element_menu\">
 
						   <ul>
							   <li><a href=\"http://132.207.28.219/magnu/Admin/personnes/formpers.php\">Ajouter une personne</a></li>
							   <li><a href=\"http://132.207.28.219/magnu/Admin/personnes/personnes.php\">Gérer la liste du personnel du laboratoire</a></li>
							   <li><a href=\"http://132.207.28.219/magnu/Admin/projets/formproj.html\">Ajouter un projet</a></li>
				   			   <li><a href=\"http://132.207.28.219/magnu/Admin/projets/projets.php\">La liste des projets</a></li>
							   <li><a href=\"http://132.207.28.219/magnu/Admin/laboratoires/formlabo.html\">Ajouter un laboratoire</a></li>
				   			   <li><a href=\"http://132.207.28.219/magnu/Admin/laboratoires/laboratoires.php\">La liste des laboratoires</a></li>
							   <li><a href=\"impr.php\" target=\"new\">Version imprimable</a></li>
						   </ul>
					   </div> 
			</div>
			<div id=\"corps\">
						<div id=\"menuder\">
							   <ul class=\"niveau1\"> 
								  <li class=\"sousmenu\">
								  <img src=\"http://www.amaq.bordeaux-bs.edu/fxObjects/img16/edit.gif\"></a>
 
									 <ul class=\"niveau2\">
 
									<li> <input type='checkbox' id='nm' $lien_nom  >Nom</li>
									<li> <input type='checkbox' id='pfr' $lien_pw >Page Web</li>
									<li> <input type='checkbox' id='desc' $lien_desc >Descrption</li>
									<li> <input type='checkbox' id='logs' $lien_logs >Les logiciels</li>
 
									 </ul>
								  </li>
							   </ul>
							</div> 
						<input class=\"coch\" type=\"button\" value=\"Tout décocher\" onClick=\"checkUncheckAll('div_chck',false);\">
						<input class=\"coch\" type=\"button\" value=\"Tout cocher\" onClick=\"checkUncheckAll('div_chck',true);\">
						<br /><br />
                <center>
                    <form method=\"POST\" action=\"del&editlab.php\">
                        <table border=\"1\" id='div_chck' class=\"sortable\">
						<p>    
                            <input class=\"bout\" type=\"submit\" name=\"action\" value=\"Editer\" />
                            <input class=\"bout\" type=\"submit\" name=\"action\" value=\"Supprimer\" />
                        </p>
                            <tr>
							";
                            if($_SESSION["nom_js"]==1) echo  "<th   onMouseOver=\"this.style.cursor='pointer'; this.style.backgroundColor='white';\" onMouseOut=\"this.style.cursor='default'; this.style.backgroundColor='#DBE0E3';  \" id='nom_0' width=\"200\" align=\"center\">Nom</th>";
 
                            if($_SESSION["pw_js"]==1) echo    "<th onMouseOver=\"this.style.cursor='pointer'; this.style.backgroundColor='white';\" onMouseOut=\"this.style.cursor='default';  this.style.backgroundColor='#DBE0E3';\" id='pw_0' width=\"200\" align=\"center\">Page Web</th>";
 
                            if($_SESSION["desc_js"]==1) echo   "<th onMouseOver=\"this.style.cursor='pointer'; this.style.backgroundColor='white'; \" onMouseOut=\"this.style.cursor='default';  this.style.backgroundColor='#DBE0E3';\" id='desc_0' width=\"200\" align=\"center\">Description</th>";
 
							 if($_SESSION["logs_js"]==1) echo   "<th onMouseOver=\"this.style.cursor='pointer'; this.style.backgroundColor='white'; \" onMouseOut=\"this.style.cursor='default';  this.style.backgroundColor='#DBE0E3';\" id='desc_0' width=\"200\" align=\"center\">Les logiciels</th>";
 
 
							echo "	
								<th align=\"center\" class=\"col\">
								</th>
                            </tr> ";
 
							foreach ($dom->getElementsByTagName('struct') as $struct) 
							{
								$id = getVarByName($struct , 'id');
								$nom = getVarByName($struct , 'nom');
								$pw = getVarByName($struct , 'pageWeb');
								$desc = getVarByName($struct , 'description');
 
								$logs = logiciels($struct);
								$str='';
								for($i=0;$i<$logs->length;$i++)
								{
									$str=$str."\n".$logs->item($i)->nodeValue ;
								}
 
								if($_SESSION["nom_js"]==1)
								echo"
										<td align=\"center\">$nom</td>";
								if($_SESSION["pw_js"]==1)
								echo"
										<td align=\"center\">$pw</td>";
 
								if($_SESSION["desc_js"]==1)
								echo"
										<td align=\"center\">$desc</td>";
 
								if($_SESSION["logs_js"]==1)
								echo"
										<td align=\"center\">$str</td>";
 
 
 
								echo"		
										<TD align=\"center\">
										<input type=\"checkbox\" id='checkbox'".($i+1)."' name=laboratoires[] value=$id>
										</TD>
									</TR>";
							}
 
 
							echo "
                        </table>
 
                        <p>     
                            <input class=\"bout\" type=\"submit\" name=\"action\" value=\"Editer\" />
                            <input class=\"bout\" type=\"submit\" name=\"action\" value=\"Supprimer\" />
                        </p>
						</form>
						</center>
 
						</center>
						<br /><br />
						<input class=\"coch\" type=\"button\" value=\"Tout décocher\" onClick=\"checkUncheckAll('div_chck',false);\">
						<input class=\"coch\" type=\"button\" value=\"Tout cocher\" onClick=\"checkUncheckAll('div_chck',true);\">
						<br /><br />
 
 
						</div>
 
				<div id=\"pied_de_page\">
				</div>

c'est un peu long quand meme c'est pour ça que j'ai evité de mettre mon code. et voici les parties importantes de mon code 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
body
{
   width: 760px;
   margin-top: 20px;
   margin-bottom: 20px;   
   background-image: url("http://img296.imageshack.us/img296/7537/magnuhy4.jpg");
   behavior: url(csshover.htc);
}
 
 
#en_tete
{
   width: 760px;
   height: 100px;
   background-image: url("http://img165.imageshack.us/img165/472/magnulab6ai7.gif");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
#menu
{
   float: left; 
   width: 150px; 
   height: 400px;
}
 
.element_menu
{
   background-color: #C0C0C0;
   background-image: url("http://img147.imageshack.us/img147/5107/menuyz2.jpg");	
   border: 2px solid black; 
   font-weight: bold;
 
}
 
#corps
{
   width: 1080px;	
   margin-left: 151px; 
   margin-right: 0px; 
   margin-bottom: 20px; 
   padding: 5px;
 
   color: #B3B3B3;
   background-color: #DBE0E3; 
   background-repeat: repeat-x; 
 
   border: 2px solid black; 
}

voili voilou


et merci



...

[Mo_Poly]

Voici ma page web qui contient le problème, testez la dans internet explorer pour voir le problème



http://132.207.28.219/magnu/Admin/la...boratoires.php


merci



...

[Auteur]

[doublon] : voir cette discussion :
http://www.developpez.net/forums/sho...d.php?t=480276



[edit]Ce n'est pas un doublon. Erreur d'appréciation de ma part [/edit]

[Mo_Poly]

[doublon] : voir cette discussion :
http://www.developpez.net/forums/sho...d.php?t=480276

euuh non c'est pas le même problème

ici il s'agit de problème de compatibilité , et dans l'autre sujet c'est un problème de largeur



...

[pop_up]

tu as un petit problème de conception je pense. Tu définis un body large de 760px mais tu veux que ton menu de 150 px + ton corps de 1080px (+margin+border) rentre dedans. ça peut pas rentrer.

voici avec ton body de 760px, une mise en page qui rentre :
le 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
 
body
{
   width: 760px;
   margin-top: 20px;
   margin-bottom: 20px;   
   background-image: url("http://img296.imageshack.us/img296/7537/magnuhy4.jpg");
   behavior: url(csshover.htc);
}
 
 
#en_tete
{
   width: 760px;
   height: 100px;
   background-image: url("http://img165.imageshack.us/img165/472/magnulab6ai7.gif");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
#menu
{
   float: left; 
   width: 150px; 
   height: 400px;
}
 
.element_menu
{
   background-color: #C0C0C0;
   background-image: url("http://img147.imageshack.us/img147/5107/menuyz2.jpg");	
   border: 2px solid black; 
   font-weight: bold;
 
}
 
#corps
{
   width: 606px;	
   margin: 0;
   padding: 0px;
   float:left;
   color: #B3B3B3;
   background-color: #DBE0E3; 
   background-repeat: repeat-x; 
   overflow: auto;
   border: 2px solid black; 
}

et le html que j'ai récupéré sur ton site (c'est celui ci que je voulais dire : pas de php dedans, directement récupéré en copiant le source du navigateur)

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
 
<body>
 
<div id="en_tete"></div>
 
<div id="menu">
	<div class="element_menu">
 
 
						   <ul>
							   <li><a href="http://132.207.28.219/magnu/Admin/personnes/formpers.php">Ajouter une personne</a></li>
							   <li><a href="http://132.207.28.219/magnu/Admin/personnes/personnes.php">La liste des personnes</a></li>
							   <li><a href="http://132.207.28.219/magnu/Admin/projets/formproj.html">Ajouter un projet</a></li>
				   			   <li><a href="http://132.207.28.219/magnu/Admin/projets/projets.php">La liste des projets</a></li>
							   <li><a href="http://132.207.28.219/magnu/Admin/laboratoires/formlabo.html">Ajouter un laboratoire</a></li>
 
				   			   <li><a href="http://132.207.28.219/magnu/Admin/laboratoires/laboratoires.php">La liste des laboratoires</a></li>
							   <li><a href="impr.php" target="new">Version imprimable</a></li>
						   </ul>
	</div> 
</div>
<div id="corps">
	<div id="menuder">
			<ul class="niveau1"> 
								  <li class="sousmenu">
 
								  <img src="http://www.amaq.bordeaux-bs.edu/fxObjects/img16/edit.gif"></a>
 
					<ul class="niveau2">
 
									<li> <input type='checkbox' id='nm' onclick=" self.location='/magnu/Admin/laboratoires/laboratoires.php?hide=nom_js' " CHECKED   >Nom</li>
									<li> <input type='checkbox' id='pfr' onclick=" self.location='/magnu/Admin/laboratoires/laboratoires.php?hide=pw_js' " CHECKED  >Page Web</li>
									<li> <input type='checkbox' id='desc' onclick=" self.location='/magnu/Admin/laboratoires/laboratoires.php?hide=desc_js' " CHECKED  >Descrption</li>
									<li> <input type='checkbox' id='logs' onclick=" self.location='/magnu/Admin/laboratoires/laboratoires.php?hide=logs_js' " CHECKED  >Les logiciels</li>
 
 
			  		</ul>
								  </li>
			</ul>
	</div> 
	<input class="coch" type="button" value="Tout décocher" onClick="checkUncheckAll('div_chck',false);">
	<input class="coch" type="button" value="Tout cocher" onClick="checkUncheckAll('div_chck',true);">
						<br /><br />
      <center>
                    <form method="POST" action="del&editlab.php">
 
                        <table border="1" id='div_chck' class="sortable">
						<p>    
                            <input class="bout" type="submit" name="action" value="Editer" />
                            <input class="bout" type="submit" name="action" value="Supprimer" />
                        </p>
                            <tr>
							<th   onMouseOver="this.style.cursor='pointer'; this.style.backgroundColor='white';" onMouseOut="this.style.cursor='default'; this.style.backgroundColor='#DBE0E3';  " id='nom_0' width="200" align="center">Nom</th><th onMouseOver="this.style.cursor='pointer'; this.style.backgroundColor='white';" onMouseOut="this.style.cursor='default';  this.style.backgroundColor='#DBE0E3';" id='pw_0' width="200" align="center">Page Web</th><th onMouseOver="this.style.cursor='pointer'; this.style.backgroundColor='white'; " onMouseOut="this.style.cursor='default';  this.style.backgroundColor='#DBE0E3';" id='desc_0' width="200" align="center">Description</th><th onMouseOver="this.style.cursor='pointer'; this.style.backgroundColor='white'; " onMouseOut="this.style.cursor='default';  this.style.backgroundColor='#DBE0E3';" id='desc_0' width="200" align="center">Les logiciels</th>	
								<th align="center" class="col">
 
								</th>
                            </tr> 
										<td align="center">LUMINOS</td>
										<td align="center"></td>
										<td align="center"></td>
										<td align="center">
 
</td>		
										<TD align="center">
										<input type="checkbox" id='checkbox'3' name=laboratoires[] value=2>
 
										</TD>
									</TR>
										<td align="center">CHAIRE_COEC</td>
										<td align="center"></td>
										<td align="center"></td>
										<td align="center">
 
</td>		
										<TD align="center">
										<input type="checkbox" id='checkbox'3' name=laboratoires[] value=3>
 
										</TD>
									</TR>
										<td align="center">LIV4D</td>
										<td align="center"></td>
										<td align="center">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
										<td align="center"></td>		
										<TD align="center">
										<input type="checkbox" id='checkbox'1' name=laboratoires[] value=4>
 
										</TD>
									</TR>
                        </table>
 
                        <p>     
                            <input class="bout" type="submit" name="action" value="Editer" />
                            <input class="bout" type="submit" name="action" value="Supprimer" />
                        </p>
						</form>
						</center>
 
 
						</center>
						<br /><br />
						<input class="coch" type="button" value="Tout décocher" onClick="checkUncheckAll('div_chck',false);">
						<input class="coch" type="button" value="Tout cocher" onClick="checkUncheckAll('div_chck',true);">
						<br /><br />
 
 
</div>
 
<div id="pied_de_page"></div>
 
 
 
</body>

[Auteur]

euuh non c'est pas le même problème

ici il s'agit de problème de compatibilité , et dans l'autre sujet c'est un problème de largeur



...

ah pardon comme cette discussion débutait de la même manière que l'autre j'ai cru à un doublon
La prochaine fois je lirai tout le sujet

[kaiser59]

Salut,

Ce n'est pas un problème de compatibilité entre les navigateurs, mais, surtout un problème de contenu.

En effet, à ton corps tu lui définis une taille fixe de 606px (+les bordures = 609px firefox étant bon élève, il préserve cette taille quelque soit la taille du contenu, IE comme tjrs bon dernier adapte la taille.

Du coup, ton problème provient du contenu de ta table où l'on voit AAAAAAA...., aucun navigateur à ma connaissance ne va te mettre à la ligne ce genre de chose. Réduit tes A ou met un espace au milieu de tes A tu verras que tu n'auras plus de problème.

[Mo_Poly]

ça semble correcte sur internet explorer but, maintenant c'est sur firefox que ca foire regardez ça http://132.207.28.219/magnu/Admin/projets/projets.php , il y a une grande distance entre le menu et le corps!

voici mon code CSS modifié ! :

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
body
{
   margin-top: 20px;
   margin-bottom: 20px;   
   background-image: url("http://img296.imageshack.us/img296/7537/magnuhy4.jpg");
   behavior: url(csshover.htc);
}
 
 
#en_tete
{
   width: 760px;
   height: 100px;
   background-image: url("http://img165.imageshack.us/img165/472/magnulab6ai7.gif");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
#menu
{
   float: left; 
   width: 150px; 
   height: 400px;
}
 
.element_menu
{
   background-color: #C0C0C0;
   background-image: url("http://img147.imageshack.us/img147/5107/menuyz2.jpg");	
   border: 2px solid black; 
   font-weight: bold;
 
}
 
.coch
{
	float:right;
	background:#FFFFFF;
	border:ridge;
}
 
.bout
{
	background:#000000;
	color:#FFFFFF;
	border:ridge;
}
 
#corps
{
   margin-left: 151px; 
   margin-right: 0px; 
   margin-bottom: 20px; 
   padding: 5px;
 
   color: #B3B3B3;
   background-color: #DBE0E3; 
   background-repeat: repeat-x; 
 
   border: 2px solid black; 
   overflow: auto;	
}

sur ie ça marche à la perfection!

merci de m'aider!




...

[Mo_Poly]

j'ai trouvé la source de l'erreur mais je ne sais pas comment la corriger

le problème est avec cette ligne

Code :

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

overflow : auto;

cette ligne de code decale mon tableau à droite sur firefox pour des raisons que j'ignore, savez vous comment regler ce probleme svp ?



merci



...

[pop_up]

ton corps possede un overflow:auto;

il n'est donc plus necessaire de mettre ceci :

Code :

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

1
2
 
margin-left: 151px;

en revanche je sais pas si tu ne vas pas devoir mettre zoom:1; sur ton corps pour IE si il est inferieur a la version 7

[kaiser59]

Encore une fois ton problème vient tjrs de la même chose ce n'est pas overflow qui est en cause mais le contenu de tes cellules.

Regarde tu as deux cellules avec deux liens non séparé par un espace du coup il ne va pas à la ligne, par conséquence ton tableau déborde du div

Met une icône page html à la place du lien cela résoudra déjà le problème de ces cellules.

[Mo_Poly]

ton corps possede un overflow:auto;

il n'est donc plus necessaire de mettre ceci :

Code :

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

1
2
 
margin-left: 151px;

en revanche je sais pas si tu ne vas pas devoir mettre zoom:1; sur ton corps pour IE si il est inferieur a la version 7

merci beaucoup ça marche



...