Centrer le texte d'un menu horizontal CSS

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour,

Je modifie actuellement un menu horizontal en CSS.

Voici une copie d'ecran du menu

http://imageshack.us/a/img259/3232/pj305.gif

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:

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:

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!

Code:

1 2 3 4 #topnav{ text-align:center; }
Tout simplement. Sur mes menus, c'est comme cela que j'ai fait :
Code:

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

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 :zoubi:

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
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 :(

27/11/2012, 20h07
neaux

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

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 :aie:

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? :P
28/11/2012, 09h24
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:

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 */ }
28/11/2012, 12h26
neaux

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

http://imageshack.us/a/img842/1336/pj308.gif

Aurais tu une idée?

Merci d'avance.
28/11/2012, 17h46
neaux
Citation:
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:

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.

Hello,

essai de cette façon :
Code:

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:

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

Bonjour,

Citation:

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

pourtant inline-block compatible IE8 :fleche: http://caniuse.com/#search=inline-block

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

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 :fleche: http://css.developpez.com/tutoriels/...enu01test.html

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:

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:

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:

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
http://imageshack.us/a/img210/3045/pj310.gif

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

29/11/2012, 17h56
NoSmoking

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

Code:

<!DOCTYPE html>

- ensuite tu pourras te passer de script.

- pour finir lit Doctype et recommandations du W3C que des bonnes choses
30/11/2012, 11h41
neaux

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!!!) :aie:

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:

http://imageshack.us/a/img528/1378/pj311.gif

Qu'en pensez vous?
02/12/2012, 21h40
neaux

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! :boulet::koi::zen::bug:
03/12/2012, 09h53
Torgar

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

:fleche: Définition de z-index.
03/12/2012, 19h10
NoSmoking

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.
03/12/2012, 21h59
neaux

J'ai peur que cela vous pique les yeux NoSmoking :cry::toutcasse:;)

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!!! :ccool:
03/12/2012, 22h06
NoSmoking

Citation:

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.

alors voici le code de ma page avec le 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
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:

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:

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é.

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:

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 ;)

06/12/2012, 15h47
neaux

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.

Voir 40 message(s) de cette discussion en une page