Discussion :

[pitchalov]

Bonjour

Je voudrais avoir une page centrale qui change en fonction de la résolution et des menus droite et gauche de largeur fixe.

J'ai un code css bien interprété par firefox mais pas par internet explorer:

dans mon html:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div id ="gauche">
		gauche
	</div>
 
	<div id ="centre">
		centre
	</div>
 
	<div id="droite">
		droite
	</div>

dans mon 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
#gauche
{
   float: left;
   width: 300px;
   border: 1px solid black;
   margin: 5px;
   padding: 10px;
   height: 500px;
}
 
#centre
{
   position:absolute;
   left: 340px;
   right: 140px;
   border: 1px solid black;
   margin: 5px;
   padding: 10px;
   height: 500px;
}
 
#droite
{
   float: right;
   width: 100px;
   border: 1px solid black;
   margin: 5px;
   padding: 10px;
   height: 500px;
}

sous IE right n'est pas pris en compte.
Pouvez vous me dire comment contourner ce problème?

merci

[pitchalov]

Je viens de me rendre compte que c'était exactement pareil avec top et bottom: c'est OK sur FF mais pas sur IE.

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
#gauche
{
   position:absolute;
   left: 10px;
   top: 10px;
   bottom: 10px;
   width: 300px;
   border: 1px solid black;
   margin: 5px;
   padding: 10px;
}
 
#centre
{
   position:absolute;
   left: 340px;
   right: 140px;
   top: 10px;
   bottom: 10px;
   min-width: 100px;
   border: 1px solid black;
   margin: 5px;
   padding: 10px;
   overflow: auto;
}
 
#droite
{
   position:absolute;
   right: 10px;
   top: 10px;
   bottom: 10px;
   width: 100px;
   border: 1px solid black;
   margin: 5px;
   padding: 10px;
}

pensez vous que mon problème peut être résolu, sur IE?
Peut-être que je n'utilise pas la meilleure technique. Ya -t-il un meilleur moyen de faire celà?

Je me suis rendu compte aussi que les div se supperposent si on réduit trop la fenêtre. Y a-t-il un moyen d'éviter ça?

Merci

[Bisûnûrs]

Avec un DOCTYPE XHTML complet et une page valide, il n'y a pas de problème.

http://xhtml.developpez.com/faq/?pag...octype_utilite

[Candygirl]

pensez vous que mon problème peut être résolu, sur IE?
Peut-être que je n'utilise pas la meilleure technique. Ya -t-il un meilleur moyen de faire celà?

IE7 gère correctement un positionnement absolu avec les 2 dimensions horizontales ou les 2 verticales spécifiées; seuls IE6 et inférieurs posent problème. Je pense que tu es obligé de passer par du javascript pour y pallier.

Une autre idée de montage serait de laisser ton #centre dans le flux et de le positionner avec des marges. Ton #droite devrait alors intervenir avant dans le html. Après tu peux aussi jouer avec une hauteur en % mais cela deviendra un montage assez complexe avec un comportement pas forcément optimum sur une petite résolution.

Que désires-tu faire exactement ? as-tu une image du résultat souhaité?

[pitchalov]

Je n'ai rien mis en ligne, pour l'instant, comme tu peux le voir avec mon code, je le test avec le strict minimum : des cadres.

Une fois que ça foctionneras, j'insèrerai des images et je mettrais en ligne.


En fait mon but ce serait d'allouer dynamiquement les dimmensions d'un cadre, en fonction de la résoltution utile.
Le cadre aurait le haut et le côté gauche fixes, et la hauteur et la largeur réglées dynamiquement.

Une autre idée de montage serait de laisser ton #centre dans le flux et de le positionner avec des marges. Ton #droite devrait alors intervenir avant dans le html. Après tu peux aussi jouer avec une hauteur en % mais cela deviendra un montage assez complexe avec un comportement pas forcément optimum sur une petite résolution.

Peux tu m'expliquer un peux plus stp, je n'ai aps trop compris. Comment je dois faire avec des marges?
Au niveau de la hauteur en % c'est aps envisageable, car une fois que ça fonctionnera en largeur, je ferai pareil en hauteur...


J'essaye aussi le résonnement en javascript, mais pour l'instant ça fonctionne pas (autre méthode javascript)

[Candygirl]

J
Peux tu m'expliquer un peux plus stp, je n'ai aps trop compris. Comment je dois faire avec des marges?

Un exemple de ce qui peut être fait (mais il faudra composer avec le bug ennuyeux des 3px sur IE6):

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
* {margin:0;padding:0;}
 
body{padding-top:5px;}
 
#gauche {
  float: left;
        width: 300px;
        border: 1px solid black;
        margin:0 5px;
        padding: 10px;
        height: 500px;
        display:inline; /* fix bug double margin IE6 */
}
 
#centre {
        overflow:auto;
        border: 1px solid black;
        padding: 10px;
        height: 500px;
}
 
#droite {
  float: right;
        width: 100px;
        border: 1px solid black;
        margin:0 5px;
        padding: 10px;
        height: 500px;
        display:inline; /* fix bug double margin IE6 */ 
}
</style>
</head>
 
<body>
  <div id ="gauche">  gauche </div>  
  <div id="droite">  droite </div> 
  <div id ="centre">  centre </div> 
</body>
</html>

J
Au niveau de la hauteur en % c'est aps envisageable, car une fois que ça fonctionnera en largeur, je ferai pareil en hauteur...

Le problème, avec la hauteur, c'est qu'il faut bien de la place pour le contenu. Si tu gardes une hauteur fixe, tu risque bien de te retrouver avec une hauteur consultable bien petite sur une résoution genre 800x600. Comment as-tu prévu de gérer le contenu ? avec un overflow ?

J
J'essaye aussi le résonnement en javascript, mais pour l'instant ça fonctionne pas

Un exemple qui pourrait t'inspirer:

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
* {margin:0;padding:0;}
 
html,body {height:100%;}
 
#gauche {position:absolute; left: 10px; top: 10px; bottom: 10px; width: 300px; border: 1px solid black; margin: 5px; padding: 10px; }   #centre {  position:absolute; left: 340px; right: 140px; top: 10px; bottom: 10px; min-width: 100px; border: 1px solid black; margin: 5px; padding: 10px; overflow: auto; }   #droite {  position:absolute; right: 10px; top: 10px; bottom: 10px; width: 100px; border: 1px solid black; margin: 5px; padding: 10px; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
	#centre {
		width:expression(document.body.clientWidth - 512 + "px");
	}
	#centre, #gauche, #droite {
		height:expression(document.body.clientHeight - 50 + "px");
	}
</style>
<![endif]-->
 
</head>
 
<body>
  <div id ="gauche">  gauche </div>
	<div id="centre">  centre </div>
	<div id="droite">  droite </div>
</body>
</html>

(excuse-moi, mais je n'ai pas le temps de commenter ces bout de code)