Centrer le texte d'un menu horizontal CSS

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

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, 15h09

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, 18h52

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, 20h07

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, 09h24

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, 12h26

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, 17h46

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.

Centrer le texte d'un menu horizontal CSS

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager