Menu de bas de page centré

**Mister Paul** · 25/10/2010, 11h00

Bonjour,

je souhaite mettre un menu en bas de page. Mais je voudrais centrer horizontalement son contenu et je n'y arrive pas...

J'ai essayé de placer par-ci par-là des margin:0 auto;
mais je n'y arrive pas...

Siouplaît, qu'est-ce qu'il faudrait modifier à ce code pour centrer les items 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
55
56
57
58
<style type="text/css">
<!--
 
#menu {
	height:50px;
	position: absolute; 
	z-index: 1001; 
	bottom: 0px; 
	width: 100%; 
 
}
#menu ul {
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:center;
 
}
#menu li {
	float:left;
	margin:auto;
	padding:0;
	background-color:black;
}
#menu li a {
	display:block;
	width:auto;
	color:white;
	text-decoration:none;
	padding:15px;
}
#menu li a:hover {
	color:#FFD700;
}
#menu ul li ul {
	display:none;
}
#menu ul li:hover ul {
	display:block;
}
#menu li:hover ul li {
	float:none;
}
</style>
<!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<!--> <![endif]-->
<!--[if IE 8]>
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<![endif]-->

**Bisûnûrs** · 25/10/2010, 11h44

Vu que tes éléments sont flottants, le seul moyen de les centrer horizontalement est de donner une largeur (de la taille de la somme des éléments enfants) à leur conteneur (ici ton ul) et de centrer celui-ci grâce au marges auto.

**Atomya Rise** · 25/10/2010, 11h47

Pour centrer ton menu au milieu, sers-toi de ta position absolute avec les propriétés left et margin-left

Code css :

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

1
2
3
4
5
6
7
8
9
10
 
#menu {
	position: absolute;
	height:50px;
	left: 50%; /* trouver le milieu de ta fenêtre */
	margin-left: -25px; /* longeur de height divisé par 2 */
	z-index: 1001; 
	bottom: 0px; 
	width: 100%; 
}

Et pour les float-left, j'ai utilisé ceci pour ma part :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
 
#menu li {
	float: left;
	padding: 8px; 
	margin-top: 10px; 
	margin-bottom: 10px; 
	font-size: 14px;
	text-align: center;
	background-color: black; 
	height: 19px;
}

A voir....

**Mister Paul** · 01/11/2010, 16h04

J'ai suivi le conseil de Bisûnûrs

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
#menu {
	opacity : 0.5; filter : alpha(opacity=50);
	height:50px;	
	color: white; 
	background-color: black; 
	cursor: pointer; 
	position: absolute; 
	left: 0px;
	z-index: 1001; 
	bottom: 0px; 
	width: 100%;
}
#menu ul {
	width: 425px;
	margin:0 auto;
	padding:0;
	list-style-type:none;
	text-align:center;
}
#menu li {
	float:left;
	margin:auto;
	padding:0;
	background-color:black;
}

Ça fonctionnait bien.

Mais je viens de tester sur Explorer et patatras, le menu se retrouve totalement décalé sur la droite et non pas superposé comme il devrait l'être...

Comment le positionner bien sur IE ?

Edit :
Tiens je viens de voir à la fin des styles ces lignes pour IE :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<!--> <![endif]-->
<!--[if IE 8]>
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<![endif]-->

Que faut-il ajouter pour qu'il n'y ait pas de souci avec IE ?
(ceci dit je n'ai testé que sur IE 7, pas encore sur IE 8...)

**Candygirl** · 07/11/2010, 11h19

Hello,

Tu peux centrer des éléments flottants en jouant avec des positions:relative. Exemple:

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
 
<!DOCTYPE HTML>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
 
<meta charset="utf-8">
<title>centrer des flottants</title>
<style type="text/css">
 
#menu ul {
        float:right;
        position:relative;
        right:50%;
 
}
#menu li {
        float:left;
        margin:0.5em;
        padding:0.2em;
        background-color:black;
        color:#fff;
        position:relative;left:50%;
        }
 
</style>
 
</head><body>
 
<div id="menu">
<ul>
	<li>testestest</li>
	<li>test</li>
	<li>testtest</li>
</ul>
</div>
</body>
</html>

Menu de bas de page centré

CSS

Discussions similaires

Partager

Partager