Discussion :

[MicaelFelix]

Bonjour,

Je vous explique mon problème, voici la page:
http://www.bird4life.com/bepnew/test_v1.html

Bref je travaille sur mon nouveau design de site web car l'ancien (www.birdsevolutionpro.com) était assez raté au niveau couleurs.

Mon problème est le suivant :
J'utilise la technique de CSS Sprite qui fonctionne bien, mais comme vous pouvez le voir le menu à gauche devrait être horizontal... pourtant il se met vertical malgré les deux "display:inline" du code css qui se trouve ici:
http://www.bird4life.com/bepnew/main.css

Un extrait de ce 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
ul#top_menu
{
	list-style:none; 
	margin:0;
	padding:0;
	display:inline;
	height:30px;
	width:800px;
}
ul#top_menu li
{
	display:inline;
}
 
 
ul#top_menu li a
{
	display:block;
	width:157px;
	height:30px;
}
 
#home a span
{
	display:block;
	position:relative;
	width:157px;
	height:30px;
	background-image:url(_but/menu.jpg);
	background-position:0px 0px;
	line-height:30px;
	text-align:center;
}
#home a:hover span
{
	display:block;
	position:relative;
	width:157px;
	height:30px;
	background-image:url(_but/menu.jpg);
	background-position:0px 30px;
	line-height:30px;
	text-align:center;
}

Bref le problème vient apparemment de display:block car si j'enlève display:block des entités en dessous de ma liste non ordonnée, ça s'affiche en horizontal, mais je perd les propriétés de hauteur et de largeur, alors ça m'arrange pas.

Si vous vous demandez pourquoi il y a "test test test" en dessous des deux boutons, c'est simplement un petit test pour montrer que inline fonctionne (j'avais besoin de me prouver que ça fonctionnait au moins au niveau "de base" Ben oui faut se convaincre parfois ).

Merci d'avance pour votre aide précieuse!

[Bisûnûrs]

Mets

Code :

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

float:left

à la place de

Code :

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

display:inline

ainsi que sur tes liens en display block.

[DanielCosta]

Les li ont un display bien à eux, donc ça ne sert à rien de metre in-line, mais y une largeur fixe et joues avec les float et oublie pas un clear both aprés-

[MicaelFelix]

Merci!
Ok donc maintenant c'est horizontal (j'ai mis float left à LI et A, plus un CLEAR:BOTH à A, mais je ne sais pas si c'est utile vu que ça marchait sans?) mais j'ai un autre problème:
Sur Mozilla c'est Ok après le hover il revient à l'état normal, mais sur IE (je teste sous la version 6) dès qu'on passe le curseur dessus ça ne fonctionne plus (ça reste sur l'image du hover), moi j'aimerait que ça reprenne l'état initial, est-ce que vous avez une solution?
Je continue à chercher de mon côté.
Merci d'avance.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
...
ul#top_menu li
{
	float:left;
}
 
 
ul#top_menu li a
{
	float:left;
	clear:both;
...

Suite du message [edit] :
- Hover semble fonctionner correctement maintenant
- J'ai toujours le bug avec la "main" qui n'est pas visible sur IE6.
- La marge du menu est plus grande sur IE6, je ne comprends pas pourquoi (explications du bug sur la page) :
http://www.bird4life.com/bepnew/test_v1.html

[MicaelFelix]

Pour mon problème avec la "main" qui n'apparait pas sur IE6, c'est lié apparemment au fait que dans ma balise A j'ai un SPAN qui n'est pas vraiment considéré comme du texte lié (j'ai testé en rajoutant du texte avant le SPAN, la main apparaissait juste pour le texte rajouté...)
Merci d'avance.

[Bisûnûrs]

Le bug vient du fait que tu as mis ton span en display:block et que sémantiquement, mettre un élément block dans un élément inline ce n'est pas correct.

Je pense que si tu mets ton <a> en display:block aussi ça résoudra ton problème.

[MicaelFelix]

Non... on dirait que cela ne règle pas le problème, j'ai mis "display:block" dans le style du A, ça ne change rien apparemment.

[MicaelFelix]

Ok ce que j'ai fait, je suis allé sur le site de a list appart, j'ai regardé le css de leur menu, et je me suis dit "bon j'avais pris les span à partir d'un autre site, mais c'est vrai que les span ne servent à rien".
Bref, j'ai enlevé les spans, changé A display:block à la place de float, et ça semble fonctionner comme par enchantement

Et pour la marge c'est bizarre, IE semble toujours rajouter quelque chose comme 2px à gauche du ul... c'est génant... et pourtant ul n'a pas de margin ni padding...
Bref j'ai pris une solution intermédiaire, c'est pas tout à fait centré (quelques pixels de décalage à droite), sur IE ça se voit moins.