Discussion :

[Tchupa]

Bonjour, tout le monde , voilà je rencontre actuellement un petit soucis avec mon css au sujet de mon menu sous IE alors que sur firefox il passe correctement.

Voici un screen

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
59
60
61
62
63
64
65
66
67
68
 
.menu2
 
{
 
	width:100%;
 
	height:50px;
 
	list-style:none;
 
	position:absolute;
 
	top:155px;
 
	left:0px;
 
	line-height:0px ; margin:0px ; padding:0px ; 		
 
}
 
 
 
.menu2 li a 
 
{
 
	display:block;
 
	float:left;
 
	height:50px;
 
	line-height:32px;
 
	color:#64777d;
 
	text-decoration:none;
 
	font-family:arial, verdana, sans-serif;
 
	text-align:center;
 
	font-size:20px;
 
	text-decoration:none;
 
	padding:0 0 0 7px;
 
	cursor:pointer;
 
}
 
 
 
.menu2 ul
 
{
 
	list-style:none;
 
	margin-left:auto;
 
	margin-right:auto;
 
	text-align:center;
 
}

Si quelqu'un peut m'aider.

En vous remerciant.

[desert]

Salut, pourrais-tu également poster le code html ?
Vu comme ça, je dirais d'essayer de spécifier une largeur à tes balises li.

[Tchupa]

J'ai tester en mettant une largeur fixe mais ça n'a rien changer.

Voilà mon css car j'ai corriger mes erreurs grossières

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
59
60
61
62
63
64
65
66
 
#menu2
 
{
 
	width:900px;
 
	height:50px;
 
	list-style:none;
 
	position:absolute;
 
	top:155px;
 
	left:0px;
 
	line-height:0px ; margin:0px ; padding:0px ; 		
 
}
 
 
 
#menu2 li a 
 
{
 
	display:block;
 
	float:left;
 
	height:50px;
 
	line-height:32px;
 
	color:#64777d;
 
	text-decoration:none;
 
	font-family:arial, verdana, sans-serif;
 
	text-align:center;
 
	font-size:20px;
 
	padding:0 0 0 7px;
 
	cursor:pointer;
 
}
 
 
 
#menu2 ul
 
{
 
	list-style:none;
 
	margin-left:auto;
 
	margin-right:auto;
 
	text-align:center;
 
}

Le html

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
 
<ul id="menu2">
 
 
 
				<li><a href=""><img src="style/images/accueil_ico.gif"></a></li>
 
				<li><a href="">Accueil</a></li>
 
				<li><a href=""><img src="style/images/register_ico.gif"></a></li>
 
				<li><a href="">S'enregistrer</a></li>
 
				<li><a href=""><img src="style/images/login_ico.gif"></a></li>
 
				<li><a href="">Se connecter</a><li>
 
				<li><a href=""><img src="style/images/contact_ico.gif"></a></li>
 
				<li><a href="">Contacter Nous</a></li>
 
				<li><a href=""><img src="style/images/panier.gif"></a></li>
 
				<li><a href="">Votre panier</a></li>
 
		</ul>

[desert]

Essaie en appliquant le float sur les balises li au lieu des balises a. C'est souvent ce que l'on fait pour obtenir un menu horizontal.

[akara]

salut !
regarde ce que ça donne mais je suis pas sur à 100%

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
 
#menu 2 ul
{
 
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;
}
 
#menu ul li
{
display: inline;
margin-left: -4px;
}
 
#menu ul li a
{
padding: 5px 10px 5px 10px;
text-decoration: none;
}

[Tchupa]

salut !
regarde ce que ça donne mais je suis pas sur à 100%

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
 
#menu 2 ul
{
 
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;
}
 
#menu ul li
{
display: inline;
margin-left: -4px;
}
 
#menu ul li a
{
padding: 5px 10px 5px 10px;
text-decoration: none;
}

Même problème qu'a départ, les deux derniers items sont décalé vers le bas.

Essaie en appliquant le float sur les balises li au lieu des balises a. C'est souvent ce que l'on fait pour obtenir un menu horizontal.

Pareil le menu part dans tout les sens rien n'est aligner.

[akara]

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
 
#menu2 ul
{
 width:900px;
 
	height:50px;
 
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;
}
 
#menu2 ul li
{
display: inline;
margin-left: -4px;
}
 
#menu2 ul li a
{
padding: 5px 10px 5px 10px;
text-decoration: none;
}

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
 
<div id="menu2">
	<ul id="menu2">
 
 
 
				<li><a href=""><img src="style/images/accueil_ico.gif"></a></li>
 
				<li><a href="">Accueil</a></li>
 
				<li><a href=""><img src="style/images/register_ico.gif"></a></li>
 
				<li><a href="">S'enregistrer</a></li>
 
				<li><a href=""><img src="style/images/login_ico.gif"></a></li>
 
				<li><a href="">Se connecter</a><li>
 
				<li><a href=""><img src="style/images/contact_ico.gif"></a></li>
 
				<li><a href="">Contacter Nous</a></li>
 
				<li><a href=""><img src="style/images/panier.gif"></a></li>
 
				<li><a href="">Votre panier</a></li>
 
		</ul>
		</div>

j'avais oublié de préciser la taille du ul, enfait chez moi cela fonctionne

[Macmillenium]

Bonjour,

Il faut flotter les <li> aussi,

Code css :

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

1
2
 
#menu2 li { float:left; }

[Tchupa]

Bonjour,

Il faut flotter les <li> aussi,

Code css :

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

1
2
 
#menu2 li { float:left; }

Oui voilà ce qu'il manquait , merci a vous trois d'avoir pris de votre temps pour me venir en aide.
Tchupa.