Discussion :

[J0r_x]

Bonjour,

je créé un site avec un bandeau en haut, un menu à droite, une frame à cotés du menu et un foot en bas.
Le tout est contenu dans une balise <div id="site">
Sur firefox les données s'affiche en dessous, la div frame ne se redimensionne pas et le foot ne se decale pas.
Sur IE la frame se redimensionne bien mais le foot ne se decale pas..
Comment faire pour régler ces problèmes ?

css de firefox :

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
 
div#site {
	position: relative;
	min-height: 100%;
	height: auto;
	width: 1024px;
	margin-left : auto;
 	margin-right : auto;
	text-align : left; /* pour résoudre le bug de centrage de IE */
}
div#top {
	position:relative;
	width:1024px;
	height:200px;
	background-color:#00CCFF;
}
div#corps {
	position:relative;
	height: auto;
}
div#menu {
	position:relative;
	float:left;
	width:308px;
	height:750px;
	background-color:#FF6699;
}
div#frame {
	position:relative;
	margin-left:308px;
	width:716px;
	height:750px;
	background-color:#FFCC00;
}
div#foot {
    padding: 0;
	margin: 0;
	position:relative;
	width:1024px;
	height:50px;
	background-color:#33FF99;
}

css de IE :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
div#corps {
	position:relative;
	padding-bottom:50px;
	height: auto;
}
div#menu {
	position:relative;
}
div#frame {
	position:absolute;
	margin-left:0px;
}

[Candygirl]

la div frame ne se redimensionne pas

Hello,

Je ne suis pas sûre d'avoir compris ce que tu entends par là...
Il est normal que ton contenu, lorsqu'il dépasse 750px de haut passe "sous le footer" puisque tu as définis une dimension fixe pour ton #frame. Peut-être devrais-tu plutôt mettre un min-height de 750 ?

[J0r_x]

Merci pour firefox, ca marche impecable.
Reste IE maintenant parce que le min-height ne marche pas sur IE.
Tu aurais une autre astuce pour IE ?

[Dan_A]

Avec un lien vers une page mise à jour on pourrait voir si le fait d'ajouter
* html div#frame{height:750px;}
ferait l'affaire.

[J0r_x]

Avec un lien vers une page mise à jour on pourrait voir si le fait d'ajouter
* html div#frame{height:750px;}
ferait l'affaire.

J'ai pas trop compris ce que tu voulais dire.

[Candygirl]

Dan_A te propose de rajouter ceci dans ton css:

Code :

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

* html #frame {height:750px;}

Afin d'attribuer une hauteur de 750px seulement pour les navigateurs comprenant cette notation (soit IE6 et -).

La notation * html signifie que le style doit être appliqué à n'importe quel élément parent du html. Hors le html ne comportant aucun parent cette règle est ignorée par tous les navigateurs sauf IE6 et moins. Avec IE qui interprête le height comme un min-height, tu devrais avoir l'effet escompté.

Cette notation à la mérite d'être valide et vite mise en oeuvre. Si tu veux quelque chose de plus accadémique mais plus long, tu peux passer par les commentaires conditionnels pour attribuer ton height à IE: