Menu css centré

Version imprimable

Menu css centré

J'ai pris un menu sur CSSplay (ici) celui du bas. Sur le site il est tout beau, centré avec firefox et IE. Mais impossible de le centré avec IE sur mon site.... 8O Je comprends pas, j'ai pourtant copier le même code...

le menu :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="menu_principal">
	<del class="container">
	<ul id="menu2">
		<li><a href="#nogo">Accueil</a></li>
		<li><a href="#nogo">Groupe</a></li>
		<li><a href="#nogo">Agenda</a></li>
		<li><a href="#nogo">Médias</a></li>
		<li><a href="#nogo">Galerie</a></li>
		<li><a href="#nogo">Presse</a></li>
		<li><a href="#nogo">Contact</a></li>
	</ul>
</del>
</div>

Le CSS :

Code:

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
 
#menu2 {
  display:table;
  padding:0; 
  margin:0 auto; 
  list-style-type:none;
  white-space:nowrap;
  }
#menu2 li {
  display:table-cell;
  }
* html #menu2 li {
  float:left;
  }
#menu2 a {
  width:auto;
  display:block;
  padding:4px 16px;
  color:#fff; 
  background:#08c; 
  border:1px solid #fff; 
  text-decoration:none;
  }
* html #menu2 a {
  float:left;
  }
#menu2 a:hover {
  color:#000; 
  background:#d4d4d4;
  }
 
.container {clear:both; text-decoration:none;}
* html .container {display:inline-block;}

Plus encore ça dans mon head :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<!--[if IE]>
		<style type="text/css">
		#menu2 li {
		  float:left;
		  }
		#menu2 a {
		  float:left;
		  }
		.container {display:inline-block;}
		</style>
		<![endif]-->

Et un ptit lien vers le site : ici

07/11/2006, 15h10
Bisûnûrs

Je pense que c'est une histoire de DOCTYPE.

Tu as du XHTML 1.0 Transitional, sur CSSplay c'est du XHTML 1.0 Strict.
07/11/2006, 15h24
Invité

Ok. Alors je vais essayer de passer en xhtml strict. On verra ce que ça donne
07/11/2006, 15h33
Invité

L'erreur ne doit pas venir de là puisque même avec la validation passé avec succès pour le xhtml1.0 strict ça ne fonctionne pas. la preuve : ici
07/11/2006, 15h44
Bisûnûrs

Tu peux toujours essayer cette méthode sinon ...
09/11/2006, 08h24
Invité

Merci Bisûnûrs !! J'ai juste placé le text-align:center dans mon body et ça a réglé tous les problème. Merci !!!

Oui j'oublie pas de mettre la balise résolu ! ;)
09/11/2006, 08h53
Invité

Eh bien non ça ne marche plus..... IE a décidé de maintenant me mettre un menu vertical au lieu de très joli horizontal qu'il m'affichait avant. Le problème c'est que je n'ai pas changé mon css....

Je suis vraiment désolé mais en fait ça marche.... J'ai renommé mon id et je l'ai pas renommé partout.... Pour mettre tout le monde d'accord (surtout moi...) voilà les codes du menu.

Le menu :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<del class="container">
	<ul id="menu">
		<li><a href="#" >Accueil</a></li>
		<li><a href="#" >Groupe</a></li>
		<li><a href="#" >Agenda</a></li>
		<li><a href="#" >M&eacute;dias</a></li>
		<li><a href="#nogo">Galerie</a></li>
		<li><a href="#" >Presse</a></li>
		<li><a href="#" >Contact</a></li>
	</ul>
</del>

Le css du menu :

Code:

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
 
#menu {
	display:table;
	padding:0; 
	margin:0 auto; 
 	list-style-type:none;
	white-space:nowrap;
}
 
#menu li {
	display:table-cell;
}
 
* html #menu li {
	float:left;
}
 
#menu a {
	width:auto;
	display:block;
	padding:4px 16px;
	color:#000;
	font-weight:bold; 
	background:#fff; 
	border:1px solid #f90; 
	text-decoration:none;
}
 
* html #menu a {
	float:left;
}
 
#menu a:hover {
	color:#f60; 
	background:#E9E9E9;
}
 
.container {
	clear:both;
	text-decoration:none;
}
 
* html .container {
	display:inline-block;
}

et le petit code à placer entre les balises head de la page qui contient le menu :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<!--[if IE]>
<style type="text/css">
#menu li {
  float:left;
  }
#menu a {
  float:left;
  }
.container {display:inline-block;}
</style>
<![endif]-->

Et un ptit lien vers mon site si jamais : ici