Problème de compatibilité - mise en page

**talmai** · 18/12/2009, 11h56

Bonjour,

Novice en codage, je tente de faire une mise en page et je rencontre quelques problemes...

Voici mon code HTML:

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
 
<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">Ceci est le bandeau</div>
	<div id="menu">
		<div id="menu_haut">Menu haut</div>
		<div id="menu_moyen">Menu moyen</div>
		<div id="menu_bas">Menu bas</div>
	</div>
	<div id="contenu">Ceci est le contenu</div>
	<div id="colonne_droite">Ceci est la colonne droite</div>
	<div id="pied_page">Ceci est le pied de page</div>
</body>
</html>

Voici mon CSS:

Code CSS :

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
 
div {
	text-align:center;
	}
div#bandeau {
	position:absolute;left:210px;
	width:600px;
	height:120px;
	background-color:#00CCFF;
	}
div#menu {
	float:left;
	width:200px;
	height:600px;
	background-color:#FF6699;
	}
div#menu_haut {
	width:200px;
	height:200px;
	background-color:#66CC33;
	}
div#menu_moyen {
	width:200px;
	height:200px;
	background-color:#FFCCEE;
	}
div#menu_bas {
	width:200px;
	height:200px;
	background-color:#CC99CC;
	}
div#contenu {
	position:absolute;left:210px;   
	margin-top:150px;
	width:600px;
	height:450px;
	background-color:#FFCC00;
	}
div#colonne_droite {
	position:absolute;left:820px;  
	margin-top:150px;
	width:150px;
	height:450px;
	background-color:#66CC33;
	}
div#pied_page {
	clear:both;
	width:800px;
	height:100px;
	background-color:#33FF99;
	}

Le rendu souhaité est celui de Firefox.

Je souhaiterai qu'il fonctionne egalement tout navigateur, ce qui n'est pas le cas. Par exemple, sous IE7, tout est sans dessus dessous...

Merci pour votre aide,

Talmai

**lautrejojo** · 18/12/2009, 14h35

Yo!

Le problème viens de la structure de ta page. En effet, tu peux difficilement construire une page efficacement en plaçant "à la main" toutes tes div. En gros, l'utilisation de "position:absolute" créé à certains niveaux des différences d'interprétations selon les navigateurs.

Je te propose de régorganiser la page comme ci-dessous, ce qui revient exactement au même (à un margin près), mais sans utiliser l'attribut position, uniquement à coup de float et de capsule bien posées :

(et si tu veux en savoir un peu plus sur la compatibilité IE / Safari / FF : DevWeb )

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
 
<body>
    <div class="page">
        <div class="main">
          	<div id="bandeau">Ceci est le bandeau</div>
          	<div id="menu">
          		<div id="menu_haut">Menu haut</div>
          		<div id="menu_moyen">Menu moyen</div>
          		<div id="menu_bas">Menu bas</div>
          	</div>
          	<div id="contenu">Ceci est le contenu</div>
          	<div id="pied_page">Ceci est le pied de page</div>
    	</div> <!-- fin de main -->
    	<div id="colonne_droite">Ceci est la colonne droite</div>
 
     </div> <!-- fin de page -->
</body>

Code css :

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
 
.page
{
    width: 950px;
    margin: 0 auto;   
}
 
.main
{
    float: left;
    background: #CCC;
    overflow: hidden;  
    width: 800px; 
}
 
div#bandeau {
    float: right;
	width:600px;
	height:120px;
	background-color:#00CCFF;
	}
 
div#menu {
	float:left;
	width:200px;
	height:600px;
	background-color:#FF6699;
	}
div#menu_haut {
	width:200px;
	height:200px;
	background-color:#66CC33;
	}
div#menu_moyen {
	width:200px;
	height:200px;
	background-color:#FFCCEE;
	}
div#menu_bas {
	width:200px;
	height:200px;
	background-color:#CC99CC;
	}
div#contenu {
    float: left;
	width:600px;
	height:450px;
	background-color:#FFCC00;
	}
div#colonne_droite {
	width:150px;
	height:450px;
	background-color:#66CC33;
	float: left;
	margin-top: 120px;
	}
div#pied_page {
    float: left;
	width:800px;
	height:100px;
	background-color:#33FF99;
	}

Problème de compatibilité - mise en page

CSS

Discussions similaires

Partager

Partager