IE6 et IE7 Problème d'affichage des DIV

**BenCarolo** · 17/03/2008, 10h48

Bonjour,

j'ai un problème d'affichage, ma page s'affiche bien sous FF et IE7 mais j'ai un problème avec ma div de gauche (elle ne descend pas jusqu'au bas de la page) et ce sous IE6 ou inférieur! mais je ne comprend pas pourquoi!

voici des printscreens sous IE6 et IE7

si quelqu'un sait me donner une solution ça sera le top!

merci pour vos réponse

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
 
div#header 
{margin: 0px;
padding:0px;
top :0;
left :0;
position:fixed;
z-index:10;
width:100%;
height:4em;
background-color:Black;
}
div#menuLeft 
{
margin: 0px;
padding:4em 1em;
float:left;
left :0;
position:fixed;
width:8em;
height:100%;
background-color:blue;
overflow:hidden
}
div#content 
{
clear : left;
padding:5em 1em;
float:left;	
margin-left:9em;
width:92em;
height:100%;
background-color:White;
overflow:hidden
}
div#footer 
{
clear:both;
position:fixed;
left:0;
bottom:0;
z-index:10;	
width:100%;
height:1em;
background-color:Black;
}

**Erwan31** · 17/03/2008, 12h49

Bonjour,
tout d'abord si tu veux avoir des chance qu'on te réponde, penser à fournir au minimum la totalité du code HTML/XHTML et le code CSS ciblé.

Tu as beaucoup de déclaration inutiles ou superflues.

La position:fixed n'est pas interprétée par IE6 et inférieur et fait passer la valeur de la propriété float à none de manière transparente.
En général et dans la grande majorité des cas, celle-ci doit être utilisé avec parcimonie et je doute que ce choix soit pertinent ici.

Tu pourrais a priori te contenter de

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
div#header {
height:4em;
background: #000;
}
div#menuLeft 
{
padding:4em 1em;
float:left;
width:8em;
height:100%;
background:blue;
overflow:hidden /*pourquoi overflow:hidden?*/
}
div#content 
{
padding: 5em 1em;
width:92em;
height:100%;
overflow:hidden
}
div#footer 
{
clear:left;
height:1em;
background:#000;
}

Lire les commentaires.
Je doute que des largeurs de bloc et padding en EM soit le plus adaptés...

Tu n'as pas besoin de width:100% sur des bloc qui ne sont pas flottant (float)
ou en position: absolute/fixed puisque ceux-ci prennent par default toute la largeur disponible (width:auto > valeur initiale).

**BenCarolo** · 17/03/2008, 14h14

Tout d'abord merci de ta réponse,

au fait j'aimerais avoir une feuille de style qui me crée une zone figée en haut, une zone figée à gauche et une zone figée en bas! mais suivant ce que tu dis on ne peut pas utiliser position:fixed avec IE6 ou < !

Je débute en css et j'ai lu des tutos (les sources viennent d'un de ces tutos!) mais je ne trouve pas vraiment réponse à mes questions, c'est pourquoi je me tourne vers vous pour obtenir une solution!

merci à tous

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
 
div {
	text-align:center;
	}
div#bandeau {
	width:100%;
	height:50px;
	background-color:#00CCFF;
	}
div#menu {
	float:left;
	width:15%;
	height:100%;
	background-color:#FF6699;
	}
div#contenu {
	float:left;
	width:85%;
	height:100%;
	background-color:#FFCC00;
	}
div#pied_page {
	clear:both;
	width:100%;
	height:50px;
	background-color:#33FF99;
	}

html:

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Positionnement CSS</title>
</head>
<body>
	<div id="bandeau">bandeau</div>
	<div id="menu">menu</div>
	<div id="contenu">contenu</div>
	<div id="pied_page">pied de page</div>
</body>
</html>

**Erwan31** · 17/03/2008, 14h54

Le nouveau code HTML est totalement différent que ce que tu as fournis au départ!
Tu ne pose pas de question.... Bref si tu veux qu'on t'aide, il faudrait être un peu plus clair et savoir ce que tu fais.

**BenCarolo** · 17/03/2008, 15h06

ok!

basons nous sur le deuxième post que j'ai mis!

voici donc ma question :
avec ce code html et cette feuille de style : comment faire pour figer le menu haut, le menu gauche et le menu bas?

j'espère que c'est un peu plus clair

**BenCarolo** · 18/03/2008, 09h32

personne pour m'aider?

donc j'aimerais une css qui permet de fixé un menu haut, un menu gauche et un menu bas!

est-ce que personne n'a jamais réalisé cela?

merci

**Erwan31** · 18/03/2008, 12h58

Quels problèmes rencontres tu?

IE6 et IE7 Problème d'affichage des DIV

CSS

Discussions similaires

Partager

Partager