Discussion :

[laurentSc]

Bonjour,

j'ai un menu dont certains items comportent un sous-menu ; pour indiquer que sur ces items, il faut cliquer pour dérouler le menu (j'exclue volontairement le hover), je place une flèche sous le texte, ainsi :

Code html :

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

1
2
3
<li class="fleche"><a href="#" onclick="id_monitoring=getElementById('id_monitoring');id_monitoring.style.display=(id_monitoring.style.display=='block')?'none':'block';">Monitoring</a>
<ul id="id_monitoring">
...

Code css :

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

1
2
3
4
5
6
.fleche{
  background-image: url('../images/fleche-droite_9px.png');
  background-repeat: no-repeat;
  background-position-y:20px;
  background-position-x:60px;
}

Donc la flèche est censée être décalée de 20 pixels verticalement et de 60 horizontalement.

Pour une fois, le bon élève est IE qui le prend bien en compte (ainsi que Chrome), mais pas Firefox (décalage de 0 pixels dans les 2 sens). Comment obtenir ce décalage avec FF ?

[lachik]

Salut laurentSc !

Effectivement, je crois que

Code :

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

background-position-x...

n'est pas supporté par firefox, essaie plutôt

Code :

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

background-position 20px 60px, center;

[lachik]

...tu peux aussi l'écrire sans le

Code :

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

center

[Jacques Beauregard]

Bonjour Laurent,

Comment obtenir ce décalage avec FF ?

Au minimum en tapant sur google : background-position firefox.

Par défaut une image en background est en haut à gauche de l'élément (ici <li>).

Code :

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

background-position: 60px 20px;

décalera l'image de 60px vers la droite, 20px vers le bas.

[laurentSc]

Merci Lachik.

Jacques, ce n'est pas (pour moi) un réflexe de regarder sur Google s'il y a un problème de prise en compte par un navigateur. La prochaine fois, j'essaierai d'y penser.

[Invité]

...ce n'est pas (pour moi) un réflexe de regarder sur Google ...

Depuis le temps, ça devrait.

Tout comme regarder D'ABORD dans les FAQ, les cours,... AVANT de poster ici.
Et le glossaire CSS.