Centrer le texte d'un menu horizontal CSS

**neaux** · 27/11/2012, 11h25

Bonjour,

Je modifie actuellement un menu horizontal en CSS.

Voici une copie d'ecran du menu

En fait je souhaite centrer les différents textes du menu au centre de la barre noire automatiquement.

J'ai procédé à plusieurs tests mais rien n'y fait.

Voici le 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
38
39
40
41
42
43
44
45
.container {width: 100%; margin: 0 auto;} 
 
 
 
ul#topnav { 
margin: 0; padding: 0; 
float: left; 
width: 100%; 
list-style: none; 
position: relative; 
font-size: 1.1em; 
background:url(../image/menuh/topnav_s.gif) repeat-x; 
} 
ul#topnav li { 
float: left; 
margin: 0; padding: 0; 
border-right: 1px solid #555; 
} 
ul#topnav li a { 
position: left; 
padding: 7px 15px; 
display: block; 
color: #f0f0f0; 
text-decoration: none; 
} 
ul#topnav li:hover { background: #1376c9 url (../image/menuh/topnav_a.gif) repeat-x; } 
ul#topnav li span { 
float: left; 
padding: 7px 0; 
position: absolute; 
left: 0; top:35px; 
display: none; 
width: 750px; 
background: #1376c9; 
color: #fff; 
-moz-border-radius-bottomright: 5px; 
-khtml-border-radius-bottomright: 5px; 
-webkit-border-bottom-right-radius: 5px; 
-moz-border-radius-bottomleft: 5px; 
-khtml-border-radius-bottomleft: 5px; 
-webkit-border-bottom-left-radius: 5px; 
} 
ul#topnav li:hover span { display: block; } 
ul#topnav li span a { display: inline; } 
ul#topnav li span a:hover {text-decoration: underline;}

Voici le 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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="container"> 
 
<ul id="topnav"> 
<li><a href="">Home</a></li> 
<li> 
<a href="">About</a> 
<span> 
<a href="">The Company</a> | 
<a href="">The Team</a> | 
<a href="">Careers</a> 
</span> 
</li> 
<li> 
<a href="">Services</a> 
<span> 
<a href="">What We Do</a> | 
<a href="">Our Process</a> | 
<a href="">Testimonials</a> 
</span> 
</li> 
<li> 
<a href="">Portfolio</a> 
<span> 
<a href="">Web Design</a> | 
<a href="">Development</a> | 
<a href="">Identity</a> | 
<a href="">SEO &amp; Internet Marketing</a> | 
<a href="">Print Design</a> 
</span> 
</li> 
<li><a href="">Contact</a></li> 
</ul> 
</div>

Merci à tous de votre aide!

**jej5189** · 27/11/2012, 16h09

Code :

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

1
2
3
4
 
#topnav{
      text-align:center;
}

Tout simplement. Sur mes menus, c'est comme cela que j'ai fait :

Code :

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

1
2
3
4
 
#topnav, #topnav ul{
      text-align:center;
}

**Muchos** · 27/11/2012, 19h52

C'était bien text-align, mais il fallait le mettre autre part.
Bon, je me suis permis de faire quelques modifications, parce que c'était un peu n'importe quoi ce code

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
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>alignement menu</title>
	<style type="text/css">
.container {
        width: 100%;
        margin: 0 auto;
        text-align: center; /* Alignement menu */
}
ul#topnav {
        margin: 0; padding: 0; 
        list-style: none; 
        font-size: 1.1em; 
        background: black;
}
ul#topnav li { 
        display: inline-block; /* Pas de float */
        position: relative; /* Les div vont s'adapter aux li */
        margin: 0; padding: 0; 
        border-right: 1px solid #555; 
} 
ul#topnav li a {
        padding: 7px 15px; 
        display: block; /* Les uns sur les autres, ça fait mieux !*/
        color: #f0f0f0; 
        text-decoration: none; 
}
ul#topnav li:hover {background: #1376c9;}
ul#topnav li div {display: none;} 
ul#topnav li:hover div {
        display: block;
        position: absolute; 
        right: 0; top: 35px;
        width: 200%;
        padding: 7px 0;
        background: #1376c9; 
        color: #fff; 
        border-bottom-right-radius: 5px; /* border-radius est standard, non ? */
        border-bottom-left-radius: 5px; 
} 
ul#topnav li div a {display: block;} 
ul#topnav li div a:hover {text-decoration: underline;}
</style>
</head>
<body>
 
<div class="container"> 
	<ul id="topnav"> 
		<li><a href="">Home</a></li> 
		<li> 
			<a href="">About</a> 
			<div> 
			<a href="">The Company</a>
			<a href="">The Team</a>
			<a href="">Careers</a> 
			</div> 
		</li> 
		<li> 
			<a href="">Services</a> 
			<div> 
			<a href="">What We Do</a>
			<a href="">Our Process</a>
			<a href="">Testimonials</a> 
			</div> 
		</li> 
		<li> 
			<a href="">Portfolio</a> 
			<div> 
			<a href="">Web Design</a>
			<a href="">Development</a>
			<a href="">Identity</a>
			<a href="">SEO & Internet Marketing</a>
			<a href="">Print Design</a> 
			</div> 
		</li> 
		<li><a href="">Contact</a></li> 
	</ul> 
</div>
 
</body>
</html>

NOTA: L'esperluette (&) doit être codée & #38 ; (sans espaces), mais ça marche pô sur le forum

**neaux** · 27/11/2012, 21h07

bonsoir et merci à tous les deux pour vos réponses

Et Merci Muchos pour le ménage dans mon code, en fait cela fait casiment 10 ans que je n'avais pas fait de dev web, et je m'y remets tout doucement comme une petit nouveau

Parcontre , j'ai remarqué qu'avec mon code ou le tiens, sous IE 8 et 9, lorsque les sous menus s'affiche, je n'arrive pas à selectionner un des liens car ils disparaissent avant d'avoir le temps de cliquer! ça a l'aire d'être aléatoire mais c'est plus souvent nok que Ok.

Qu'en penses tu, ainsi que tous les autres?

**jej5189** · 28/11/2012, 10h24

Dans mon code, j'ai quelque chose comme ça. C'est le min-height: 0 qui corrige ce bug. J'ai repris un code d'un tuto donc je ne saurais pas trop l'adapter à ta situation.

Code :

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

1
2
3
4
5
#topnav li:hover ul, #topnav li li:hover ul
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}

**neaux** · 28/11/2012, 13h26

Salut à tous,
Merci jej5189, je vais tester cela.

Re muchos, j'ai testé ton code! il marche nickel sauf sous IE8.
J'ai tenté quelques modifs, mais ça ne donner rien.

voici à quoi cela ressemble

Aurais tu une idée?

Merci d'avance.

**neaux** · 28/11/2012, 18h46

Envoyé par jej5189

Dans mon code, j'ai quelque chose comme ça. C'est le min-height: 0 qui corrige ce bug. J'ai repris un code d'un tuto donc je ne saurais pas trop l'adapter à ta situation.

Code :

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

1
2
3
4
5
#topnav li:hover ul, #topnav li li:hover ul
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}

Jej5189, ou place tu ce code car pour moi aucun effect.

**zwaldo** · 28/11/2012, 19h20

Hello,

essai de cette façon :

Code :

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

1
2
3
4
5
6
7
 
<div style="width: 800px; margin-left: auto; margin-right: auto; display: block;">
<ul id="menu">
<li><a href="tonlien1">labeldetonlien1</a></li>
<li><a href="tonlien2">labeldetonlien2</a></li>
<li><a href="tonlien3">labeldetonlien3</a></li>
</ul>

Code :

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

1
2
3
4
5
6
7
 
#menu li{ float: left;}
#menu a{
display: block;
width: 100px;
text-align: center;
}

à toi de completer / adapter avec tes paramètres, sachant que le centrage de tes liens dépends de la largeur que tu attribues à chacuns de tes blocs liens

++
zwaldo

**NoSmoking** · 28/11/2012, 20h05

Bonjour,

j'ai testé ton code! il marche nickel sauf sous IE8.

pourtant inline-block compatible IE8

http://caniuse.com/#search=inline-block

essai un hack, en voilà un sur base du code de Muchos

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
ul#topnav li {
  display:inline-block;  /* Pas de float */
  /* le hack pour IE */
  *display:inline;
  zoom:1;
  /* fin du hack */
  position:relative;  /* Les div vont s'adapter aux li */
  margin:0;
  padding:0;
  border-right:1px solid #555;
  width:150px;
}

la construction de ton menu gagnerait en clarté en utilisant des UL dans les LI des sous menus, regarde ce menu

http://css.developpez.com/tutoriels/...enu01test.html

**neaux** · 29/11/2012, 12h24

Bonjour à tous.
Je tenais encore une fois à vous remercier pour votre aide à tous.

J'ai donc testé le code avec le hack pour ie de nosmoking sur le code de muchos, tous cela dans une page html vierge de tout autres codes pour être sûr:

Le menu principal se place donc correctement sur ie8, parcontre maintenant, les sous menu au dessus du menu principal:
Voici le 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
38
39
40
41
42
43
44
45
46
.container {
	width: 100%;
	margin: 0 auto;
	text-align: center; /* Alignement menu */
}
ul#topnav {
	margin: 0; padding: 0; 
	list-style: none; 
	font-size: 1.1em; 
	background: black;
}
ul#topnav li {
  display:inline-block;  /* Pas de float */
  /* le hack pour IE */
  *display:inline;
  zoom:1;
  /* fin du hack */
  position:relative;  /* Les div vont s'adapter aux li */
  margin:0;
  padding:0;
  border-right:1px solid #555;
  width:150px;
}
ul#topnav li a {
	padding: 7px 15px; 
	display: block; /* Les uns sur les autres, ça fait mieux !*/
	color: #f0f0f0; 
	text-decoration: none; 
}
ul#topnav li:hover {background: #1376c9;}
 
ul#topnav li div {display: none;} 
 
ul#topnav li:hover div {
	display: block;
	position: absolute; 
	right: 0; top: 35px;
	width: 200%;
	padding: 7px 0;
	background: #1376c9; 
	color: #fff; 
	border-bottom-right-radius: 5px; /* border-radius est standard, non ? */
	border-bottom-left-radius: 5px; 
} 
ul#topnav li div a {display: block;} 
ul#topnav li div a:hover {text-decoration: underline;}

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
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="container"> 
	<ul id="topnav"> 
		<li><a href="">Home</a></li> 
		<li> 
			<a href="">About</a> 
			<div> 
			<a href="">The Company</a>
			<a href="">The Team</a>
			<a href="">Careers</a> 
			</div> 
		</li> 
		<li> 
			<a href="">Services</a> 
			<div> 
			<a href="">What We Do</a>
			<a href="">Our Process</a>
			<a href="">Testimonials</a> 
			</div> 
		</li> 
		<li> 
			<a href="">Portfolio</a> 
			<div> 
			<a href="">Web Design</a>
			<a href="">Development</a>
			<a href="">Identity</a>
			<a href="">SEO & Internet Marketing</a>
			<a href="">Print Design</a> 
			</div> 
		</li> 
		<li><a href="">Contact</a></li> 
	</ul> 
</div>

Code javascript:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
 
$("ul#topnav li").hover(function() { //Hover over event on list item
	$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
	$(this).find("div").show(); //Show the subnav
} , function() { //on hover out...
	$(this).css({ 'background' : 'none'}); //Ditch the background
	$(this).find("div").hide(); //Hide the subnav
});
 
});

Le pb n'apparait que sur IE8 et maxthon accessoirement. (test sur chrome et firefox ok).

voici un copie d'ecran

Si vous avez de nouvelles bonnes idées pour m'aider? merci à tous

**NoSmoking** · 29/11/2012, 18h56

- insère cette petite ligne en première position dans ton fichier HTML

Code html :

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

<!DOCTYPE html>

- ensuite tu pourras te passer de script.

- pour finir lit Doctype et recommandations du W3C que des bonnes choses

**neaux** · 30/11/2012, 12h41

Super nosmoking!! merci la navigation fonctionne!!! je suis remis que très recemment à coder donc je n'ai plus certains reflex donc merci pour ton lien

Il me reste un dernier soucis (je pense!!!)

Je l'ai intégrer dans mon site, j'ai juste modifier le code pour que la taille des menu s'adapte au texte des Li.

Parcontre maaintenant que les sous menu sont les un en dessous des autres, lorsqu'il se déroule, il passe sous le bas du div 'entete' dans lequel le menu est intégré pour Ie8

Et passe derriere le div principal pour firefox et chrome.
J'ai teste des z-index:1 pour le div du menu et z-index:2 pour les div principaux
mais rien y fait.

je sais pas si je suis claire donc voici une petite copie d'écran:

Qu'en pensez vous?

**neaux** · 02/12/2012, 22h40

bonsoir à tous,

Bon j'ai refais quelques tests mais impossible de faire passer le menu déronlant par dessus les div qui structure ma page.
ça me saoule parce que je suis près des but...

Auriez vous une idée ou un conseil, pour solutionner mon pb, je m'arrache les cheveux!

**Torgar** · 03/12/2012, 10h53

Tes éléments sont-ils positionnés ? Car sinon le z-index ne fonctionne pas.

Définition de z-index.

**NoSmoking** · 03/12/2012, 20h10

A ce stade la seule structure de ton menu ne suffit plus, il nous en faudrait plus sur ta façon de concevoir la page.

**neaux** · 03/12/2012, 22h59

J'ai peur que cela vous pique les yeux NoSmoking

J'essaie de vous mettre cela dès demain.
Déjà je vais vérifier si tt mes div sont bien positionnés et je crois que je me suis trompé dans les z-index.

je pensais que le plus petit (1) était pardessus les autres , mais apriori c'est l'inverse. Vous me confirmez? 2 est au dessus de 1 et ainsi de suite?

Et pour le positionnement, je dois en avoir en absolu et d'autre en relative. ça ne pose pas de pb pour les priorités des du z-index?

Merci à vous de suivre mes malheurs!!!

**NoSmoking** · 03/12/2012, 23h06

je pensais que le plus petit (1) était pardessus les autres , mais apriori c'est l'inverse. Vous me confirmez? 2 est au dessus de 1 et ainsi de suite?

c'est bien cela comme le confirmera le lien fournit par Torgar.

Même en laissant les différents éléments dans le flux normal, absence de positionnement particulier, cela fonctionne très bien.

**neaux** · 04/12/2012, 11h04

alors voici le code de ma page avec le menu;

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
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<body class="body" width="1000px" style='margin-top: 0'>
<center>
<div  class="table" style='width: 1000px; border-left: 1px solid ActiveCaption; border-right: 1px solid ActiveCaption; border-top: 1px solid ActiveCaption; border-bottom: 1px solid ActiveCaption';>
<table border="0" cellpadding="0" cellspacing="0" height="250px">
	<tr>
	<td rowspan="2" valign="top">
		<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
			<tr>
				<td valign="middle" height="100%" width="100%">
				<p align="center">
<img border="0" src="image/Logo_info.png" width="180" height="153"></p>
				</td>
			</tr>
		</table>
		</td>
	<td></td>
	<td height="1"></td>
	</tr>
	<tr>
		<td valign="top" height="149" width="757" colspan="2">
		<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
			<tr>
				<td valign="top" height="100%" width="100%">
				<p align="center">
<img border="0" src="image/informatique/logo.jpg" width="448" height="128"></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td valign="bottom">
		<table cellpadding="0" cellspacing="0" border="0" width="208" height="30">
			<tr>
				<td valign="top" height="30" width="208">
				<p align="center">
				&nbsp;</td>
			</tr>
		</table>
		</td>
		<td valign="bottom" height="60" colspan="2">
		<table cellpadding="0" cellspacing="0" border="0" width="100%" height="30">
			<tr>
				<td valign="top" align="center" height="60" width="100%">
 
 
	<div class="container">		
 
    <ul id="topnav">
        <li><a href="../modelev2test.html">Accueil</a></li>
        <li>
            <a href="#">test</a>
            <div>
                <a href="../info_1.html">test 1</a> |
                <a href="../info_2.html">test2</a>
            </div>
        </li>
        <li>
            <a href="info_appli.html">Applications</a>
        </li>
        <li>
            <a href="info_materiel.html">Matériel</a>
        </li>
        <li><a href="info_system.html">Systèmes & Réseaux</a></li>
		<li><a href="contact.html">Contact</a></li>
    </ul>
	</div>
 
</td>
			</tr>
		</table>
		</td>
	</tr>
</table>
</div>
<div  class="table" style='width: 1000px; border-left: 1px solid ActiveCaption; border-right: 1px solid ActiveCaption; border-top: 1px solid ActiveCaption; border-bottom: 1px solid ActiveCaption';>
 
Le contenu de ma page 
</div>

J'ai 2 fichiers CSS
1 avec les class .body et .table avec respectivement z-index 1 et 2 (surement inutile pour .body d'ailleurs:

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
.body {
width: 100%;
background:#FFEBCD; 
z-index: 1;
font-family: "Times New Roman", Georgia, Garamond, serif; 
position: relative;
position: relative; /* on positionne le conteneur */
  margin-left: auto;
  margin-right: auto;
}
 
.table{
position: relative;
z-index: 2;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
text-align: center;
padding:5px;
background: #F8F8FF;
color: #6495ED;
border-radius: 10px;
word-wrap: break-word;
box-shadow: 5px 5px #818181;
-webkit-box-shadow: 5px 5px #818181;
-moz-box-shadow: 5px 5px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
}

Le 2e CSS avec le class du menu:

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
.container {
border:1px solid #555;
	width: 100%;
	margin: 0 auto;
	text-align: center; /* Alignement menu */
	z-index: 3;
	}
ul#topnav {
	margin: 0; padding: 0; 
	list-style: none; 
	font-size: 1.1em; 
	background: url(../image/menuh/topnav_s.gif) repeat-x;
	}
ul#topnav li {
  display:inline-block;  /* Pas de float */
  /* le hack pour IE */
  *display:inline;
  zoom:1;
  /* fin du hack */
  position:relative;  /* Les div vont s'adapter aux li */
  margin:0;
  padding:0;
   width:auto;
 
}
ul#topnav li a {
	padding: 7px 15px; 
	display: block; /* Les uns sur les autres, ça fait mieux !*/
	color: #f0f0f0; 
	text-decoration: none; 
}
ul#topnav li:hover {background: ActiveCaption;}
 
ul#topnav li div {display: none;
box-shadow: 5px 5px #818181;
-webkit-box-shadow: 5px 5px #818181;
-moz-box-shadow: 5px 5px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
}
 
ul#topnav li:hover div {
	display: inline;
	position: absolute; 
	z-index: 3;
	right: 0; top: 32px;
	width: 200%;
	padding: 7px 0;
	background: ActiveCaption; 
	color: #fff; 
	border-bottom-right-radius: 5px; /* border-radius est standard, non ? */
	border-bottom-left-radius: 5px; 
} 
ul#topnav li div a {display: block;} 
ul#topnav li div a:hover {text-decoration: underline;}

J'ai testé le z-index: 3 sur le .container et sur le ul#topnav li:hover div
Est que c'est génant que les div soient dans 2 fichier CSS distinct?

J'espère que ce sera parlant pour vous, je suis ouvert aux critiques sur le code qui je pense est loin d'être optimisé.

**NoSmoking** · 05/12/2012, 20h22

Ta page est une vériTABLE catastrophe, utilisation des TABLEs déjà pour faire ce que tu fais ce n'est pas top, ensuite mettre une TABLE dans une TD c'est vraiment complétement inutile d'autant que cette TABLE n'a qu'une cellule.

ton code épuré

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
20
21
22
23
24
25
26
27
28
29
30
31
<table border="0" cellpadding="0" cellspacing="0" height="250px">
<tr>
  <td width="208" rowspan="3" valign="top">
    <img border="0" src="image/Logo_info.png" width="180" height="153"></p>
  </td>
  <td height="1"></td>
</tr>
<tr>
  <td valign="top" height="149" width="757">
    <img border="0" src="image/informatique/logo.jpg" width="448" height="128">
  </td>
</tr>
<tr>
  <td valign="top" height="60">
    <div class="container">
      <ul id="topnav">
        <li><a href="../modelev2test.html">Accueil</a></li>
        <li><a href="#">test</a>
        <div>
          <a href="../info_1.html">test 1</a> | <a href="../info_2.html">test2</a>
        </div>
        </li>
        <li><a href="info_appli.html">Applications</a></li>
        <li><a href="info_materiel.html">Matériel</a></li>
        <li><a href="info_system.html">Systèmes & Réseaux</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
  </td>
</tr>
</table>

- Reprends la structure sans TABLE
- Supprimes le CSS inline pour le mettre dans la feuille de style
- supprimes également le filter de ta class table qui visiblement crée un bug
- tu as 2 DIV avec la même class, table, qui présente le même z-index ce qui fait que c'est l'ordre dans le flux qui détermine celle qui sera au dessus, en l’occurrence la deuxième passera au dessus de ton menu.

voilà pour commencer

**neaux** · 06/12/2012, 16h47

Salut et merci pour ta réponse

Merci pour le nettoyage du code.
J'ai suivi tes conseils.

viré le filter, le menu passe bien par dessus le 1er div (celui dans lequel le menu se trouve, parcontre il passe tjr derrière le haut du 2e div.
j'ai essayé de faire une class par div avec

z-index 3 pour le div du menu
z-index 2 pour le div contenant le menu
z-index 1 pour le body

effectivement ça fonctionne. Merci

Parcontre je ne vois pas de quel CSS inline tu parles?!

En tout cas merci beaucoup pour votre aide.

Centrer le texte d'un menu horizontal CSS

Centrer un élément en CSS

Discussions similaires

Partager

Partager