Discussion :

[Nicovideo]

Bonjour à tous

Voilà j'ai un petit problème je n'arrive absolument pas au bout de plusieurs heures intensives, de centrer mon menu.

Je m'explique :

J'ai un header centrer tout en haut qui fait 133px de hauteur et sur les cotés de celui le fond est noir.
En dessous, collé je veux mettre mon menu mais là impossible de le centrer en fonction du header vu que mon menu n'a pas de largeur. je mets des margin:0 auto mais rien n'y fait.

Pour être plus concret voilà ce que ça me fait :




Voivi maintenant mon code CSS :

Code css :

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
body{
	background:url(img/fond.jpg);
	margin:0 auto;
	padding:0;
	}
 
#header{
	height:133px;
	background:url(img/header.jpg) no-repeat top center #000000;
	margin:0;
}
 
#conteneur{
	margin:-16px auto;
}
 
#menu ul li{
	list-style:none;
	float:left;
	padding:0;
}
 
#menu ul li a{
	height:39px;
	text-decoration:none;
	text-align:center;
	display:block;
	background:no-repeat top left;
 
}
 
#menu ul li a.gauche{
	width:129px;
	background:url(img/menu-gauche.jpg);
}
 
#menu ul li a.accueil{
	width:120px;
	background:url(img/menu-accueil.jpg);
}
 
#menu ul li a.copies{
	width:139px;
	background:url(img/menu-copies.jpg);
}
 
#menu ul li a.top10{
	width:103px;
	background:url(img/menu-top10.jpg);
}
 
#menu ul li a.forum{
	width:106px;
	background:url(img/menu-forum.jpg);
}
 
#menu ul li a.inscription{
	width:152px;
	background:url(img/menu-inscription.jpg);
}
 
#menu ul li a.connexion{
	width:147px;
	background:url(img/menu-connexion.jpg);
}
 
#menu ul li a.droite{
	width:128px;
	background:url(img/menu-droite.jpg);
}

Merci d'avance pour votre aide !

[Apollinaire]

Bonjour,

Pourquoi ne pas appliquer une largeur a #menu (je ne sais pas exactement ce que c'est mais ça ressemble au conteneur du menu) avec les margins auto ?

[Nicovideo]

Ben c'est ce que j'ai fait après j'ai mis un width:1024px qui est la largeur du total de mes boutons mais il y a toujours un bouton qui part à la ligne donc pour combler j'ai mis un width de 1104px exactement et j'ai centré le tout et là ca marche bien mais bon je pense que c'est une méthode un peu "hard".

Néanmoins, je rencontre un nouveau soucis au niveau du menu.

Sur IE :



Sur Firefox :



Et voilà mon code pour le menu :

Code css :

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
#conteneur{
	padding:0;
	margin:-29px auto;
	width:1104px;
	height:29px;
}
 
#menu ul li{
	list-style:none;
	float:left;
}
 
#menu ul li a{
	height:29px;
	text-decoration:none;
	text-align:center;
	display:block;
	background:no-repeat bottom left;
 
}
 
#menu ul li a.gauche{
	width:129px;
	background:url(img/menu-gauche.jpg);
}
 
#menu ul li a.accueil{
	width:120px;
	background:url(img/menu-accueil.jpg);
}
 
#menu ul li a.copies{
	width:139px;
	background:url(img/menu-copies.jpg);
}
 
#menu ul li a.top10{
	width:103px;
	background:url(img/menu-top10.jpg);
}
 
#menu ul li a.forum{
	width:106px;
	background:url(img/menu-forum.jpg);
}
 
#menu ul li a.inscription{
	width:152px;
	background:url(img/menu-inscription.jpg);
}
 
#menu ul li a.connexion{
	width:147px;
	background:url(img/menu-connexion.jpg);
}
 
#menu ul li a.droite{
	width:128px;
	background:url(img/menu-droite.jpg);
}

Voilà je ne sais pas pourquoi il y a un decallage comme cela, si vous avez une idée

[devyan]

Bonjour,

La méthodes des marges automatiques en plus de ne pas fonctionner avec tous les navigateurs a absolument besoin d'une largeur fixe.

Essayes de mettre text-align:center sur le conteneur de ton menu...

devyan

[Apollinaire]

Quelle est la fonction de #menu par rapport à #conteneur ?

Le problème vient peut être du margin:-29px auto;

Sinon petite faute de frappe à inscription

[Nicovideo]

Merci pour vos réponses !

Pour ce qui est du margin -29px j'ai bidouillé à ma façon car quand je m'étais mes divs a la suite il y avait une marge qui se créée entre le menu et le header (je ne sais pas pourquoi) . En bidouillant la marge j'ai réussi à les coller mais je ne sais pas pourquoi ça ne sait pas fait tout seul comme un grands seulement en mettant les div avec des margin:0 à la suite..

#menu est en faite dans #conteneur, je m'y suis peut être mal pris mais en faite j'ai créé un div conteneur de la largeur de mes boutons et j'ai mis menu dedans. peut être que #conteneur ne sert à rien ?