Discussion :

[baggie]

Bonjour,

j'ai créé un site qui fonctionne parfaitement sous Firefox/Chrome/... mais pas sous Internet Explorer.

J'ai un problème de CSS : mon div menu et mon div contenu sont décalés vers la droite (voir l'image en pièce jointe).

J'aimerai que le menu soit aligné avec le cadre gris en bas et sous IE ça se décale =/

Explication : un div "container" contient un div "menu" et un div "contenu" à droite du div "menu". Puis sous le div "container", on a un div "pied_page".

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
 
div#container {
	background-color:#CCDDEE;
	border:solid 1px #EEEEEE;	
	float:left;
	width:75%;
	padding:5px 5px 0px 5px;
	margin-right:15%;
	margin-left:15%;
	}
 
div#menu {
	float:left;
	width:15%;
	height:100%;
	background-color:#CCDDEE;
	padding-left:5px;
	background-repeat:repeat-y;
	}
div#contenu {
	float:right;
	width:75%;
	height:100%;
	background-color:#FFFFFF;
	padding:5px;
	margin-bottom:5px;
	}
div#pied_page {
	clear:both;
	width:75%;
	background-color:#DDDDDD;
	text-align:center;
	border:solid 1px #CCCCCC;
	padding:5px;
	margin-right:15%;
	margin-left:15%;
	}

Que devrais-je rajouter/modifier pour que IE prenne en compte ma CSS comme il le faut ?

[baggie]

J'ai modifié ma CSS après des lectures de posts sur le web.

J'ai donc mon div "container" avec une "position:relative", et mes deux div "menu" et "contenu" avec chacun une position absolute et right ou left à 0.

Ca fonctionne presque : j'aimerai que le menu soit aussi grand que le div contenu, et donc que le pied de page ne soit pas caché par le div contenu.

[sagopa]

La div contenu est à droite car tu as mis

Code :

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

float:right;

Remplace le par

Code :

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

1
2
float:left;
margin-left: <a_definir>px;

[baggie]

J'ai déja mon menu et mon container qui sont en float left. Et je ne veux pas fixer de margin left car mon contenu n'est pas fixe :/

[sagopa]

Alors tu fixe une margin-right à ton menu

[baggie]

Si je mets mon contenu en float left, le menu se décale à droite et passe sous le contenu du coup. Donc ça ne va pas =/

Mon code actuel :

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
 
div#menu {
	float:left;
	width:15%;
	height:100%;
	background-color:#CCDDEE;
	padding-left:5px;
	background-repeat:repeat-y;
	}
div#contenu {
	position:absolute;
	right:5px;
	width:75%;
	height:100%;
	background-color:#FFFFFF;
	padding:5px;
	margin-bottom:5px;
	}
div#pied_page {
	clear:both;
	width:75%;
	background-color:#DDDDDD;
	text-align:center;
	border:solid 1px #CCCCCC;
	padding:5px;
	margin-right:15%;
	margin-left:15%;
	}
 
div#container {
	background-color:#CCDDEE;
	border:solid 1px #EEEEEE;	
	position:relative;
	width:75%;
	padding:5px 5px 0px 5px;
	margin-right:15%;
	margin-left:15%;
	}

Le problème maintenant :
le pied de page reste collé au menu et non au contenu. Donc si mon contenu est plus long que mon menu, le pied de page est caché et passe sous le contenu.

J'aimerai que le menu fasse la taille du contenu, et donc que le pied de page soit collé au menu et au contenu à la fois.

[sagopa]

Bizarre... Tu peux ajouter ton code HTML ?

[baggie]

J'ai modifié mon post précédent avec le code CSS et mon problème actuel.

Voici mon code 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
 
	<div id="container">
		<div id="menu">
 
		</div>
	<div id="contenu">
 
		<table align="center">
			<tr><td><h3> ... </h3></td></tr>
			<tr><td style="text-align:center;">
					...
			</td></tr>
		</table>	
 
</div></div>
	<div id="pied_page">...</div>

[sagopa]

Je pense que tu peux mettre "pied_page" dans "container"

changer:

Code :

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

1
2
3
4
5
6
7
8
div #contenu {
	position:absolute; ==> enlever cette ligne
	float: left;
	}
 
 div #menu {
	margin-right:5px;
	}

Est-ce qu'on ton pied de page doit être sous le menu , ou bien doit-il être aligner au contenu ?

[baggie]

Merci pour ton aide sagopa mais malheureusement je dois revenir à mon premier code ! En effet, si je mets les modifications que j'ai écrites plus haut, j'ai maintenant un bug sous Firefox ...

Résultat, je repars avec mon problème de décalage vers la droite.

Pour répondre à ta question au cas où ça serve : le pied de page doit être collé au menu ET au contenu (prendre toute la largeur du div container donc).

[Macmillenium]

Bonjour,

Pourrais tu poster la totalité de ton code (X)HTML stp ?

[baggie]

Mon code 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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!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><link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="menu.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>Bienvenue</title>
</head>
 
<body>
 
	<div id="bandeau"><img src="images/banniere.jpg" style="width:100%;" /></div>
	<div id="chemin"><a href="bienvenue.php">Accueil</a> > <i>Bienvenue</i></div>
	<div id="container">
		<div id="menu">
		<?php
			require("menu.php");
		?>
		</div>
	<div id="contenu">
 
		<table align="center">
			<tr><td><h3>Bienvenue sur notre site <?php echo $_SESSION['prenom'].' '.$_SESSION['nom']; ?> !</h3></td></tr>
			<tr><td style="text-align:center;">
					<img src="images/logo.jpg" />
			</td></tr>
		</table>	
 
</div></div>
	<div id="pied_page">Copirayte 2009</div>
 
</body>
</html>

et mon code CSS (menu.css) en entier :

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
 
div#bandeau {
	width:75%;
	background-color:#97BEDD;
	border:solid 1px #EEEEEE;	
	padding-left:5px;
	padding-right:5px;
	margin-right:15%;
	margin-left:15%;
	}
div#chemin {
	width:75%;
	background-color:#DDDDDD;
	border:solid 1px #CCCCCC;	
	padding: 5px;
	margin-right:15%;
	margin-left:15%;
	}
div#menu {
	float:left;
	width:15%;
	height:100%;
	background-color:#CCDDEE;
	padding-left:5px;
	background-repeat:repeat-y;
	}
div#contenu {
	float:right;
	width:75%;
	height:100%;
	background-color:#FFFFFF;
	padding:5px;
	margin-bottom:5px;
	}
div#pied_page {
	clear:both;
	width:75%;
	background-color:#DDDDDD;
	text-align:center;
	border:solid 1px #CCCCCC;
	padding:5px;
	margin-right:15%;
	margin-left:15%;
	}
 
div#container {
	background-color:#CCDDEE;
	border:solid 1px #EEEEEE;	
	float:left;
	width:75%;
	padding:5px 5px 0px 5px;
	margin-right:15%;
	margin-left:15%;
	}

[Macmillenium]

1. IE6 a doublé la marge horizontale gauche de #container, FAQ http://css.developpez.com/faq/?page=...float_ie_marge ;

2. Flotter #container n'est pas pertinent ici, tu peux gérer le dépassement des flottants en établissant un nouveau contexte de formatage, FAQ http://css.developpez.com/faq/?page=...ment_flottants

Ce qui donne :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
 
div#container {
	background-color:#CCDDEE;
	border:solid 1px #EEEEEE;	
	/* float:left; */
        overflow:hidden; /* Dépassement des flottants */
	width:75%; 
	padding:5px 5px 0px 5px;
	margin-right:15%;
	margin-left:15%;
}

EDIT : Pour centrer tes blocs horizontalement, utilise plutôt les marges automatiques et mets margin:auto au lieu de margin-right:15% margin-right:15%.
FAQ http://css.developpez.com/faq/?page=...orizontalement

[baggie]

It ruuuuuuuuuuuuuuuns ! Merci merci merciiiiii

EDIT : c'est noté pour les marges je vais changer ça