Sprites css sur menu li

[Kawawachikamach]

Bonjour à tous et toutes.

Je m'essaie tant bien que mal aux sprites et je pense avoir presque réussi à comprendre.

Toutefois, l'affichage sur mobile est un peu fouillis avec des retours à la ligne qui ne sont pas terribles.

Sur la page suivante, j'utilise des sprites: http://escrime-3-frontieres.fr/prati...s-escrime.html et son affichage sur mobile n'est pas bon.

Sur la page suivante d’accueil, j'ai un petit menu sans sprites avec 3 icones ''info'' et son affichage sur mobile est correct.

Je vous donnes mes codes css pour mes sprites et mes menus qui ne vont pas :

mon code html :

<ul class="menu_e3f_sprites_1">
    <li class="e3f_sprite fencing">{tooltip}<a href="http://www.escrime-metz.com/le_club/accueil" target="_blank" title="http://www.escrime-metz.com/le_club/accueil">Société d'escrime de Metz</a>{end-texte |w=300|}<img title="Club d'escrime de Metz." src="images/liens-escrime/sec-metz.png" alt="Club d'escrime de Metz." height="250" width="300" />{end-tooltip}</li></ul>

mon code css :

li.e3f_sprite.fencing {
line-height: 35px;/*PERMET LE RÉGLAGE DU TEXTE PAR RAPPORT À LA PUCE : ALIGNEMENT DU TEXTE VERS LE BAS DE LA PUCE*/
/*padding-bottom: -2%;*/
margin-bottom: 2%;
width: 100%;/*PERMET DE METTRE PLUS DE TEXTE DANS LES LI SANS RETOUR À LA LIGNE*/
padding-left: 5%;
}

li.e3f_sprite.fencing { background-position: 0 -1134px; }

.menu_e3f_sprites_1 {
list-style-type: none;/*PAS DE PUCES*/
padding: 0;/*ENLÈVE L'INDENTATION À GAUCHE POUR TOUS LES NAVIGATEURS*/ 
margin-left: 45px;/*ENLÈVE L'INDENTATION OU PAS À GAUCHE POUR TOUS LES NAVIGATEURS*/
width: 100%;
}
.menu_e3f_sprites_1 li {
background-image: url('../images/icons/e3f_sprites.png');
  background-repeat: no-repeat;
  /*background-position: 4 0.0em;*/
  padding-left: 3.5%;/*ÉCARTE VERS LA GAUCHE LE TEXTE PAR RAPPORT À LA PUCE*/ 
     }

C'est dommage car j'avais presque compris le principe......

Si ça se peut ce n'est pas grand chose.

Vu que j'ai presque compris, j'aimerai bien les utiliser sur tout mon site.

Merci à vous.

[Kawawachikamach]

Re : Sprites css sur menu li

Bonjour.

J'y suis presque arrivé, mais ce n'est pas encore ça.
Les retours à la ligne se font correctement mais lorsque le li est trop long il en manque un morceau.

Voici les nouveaux codes css :

li.e3f_sprite.coupe {
/*line-height: 35px;*//*PERMET LE RÉGLAGE DU TEXTE PAR RAPPORT À LA PUCE : ALIGNEMENT DU TEXTE VERS LE BAS DE LA PUCE*/
background-repeat: no-repeat;
  background-position: 0 -5%;
  padding: 5px 0px 5px 40px;
  /*margin-top: -10px;*/
  width: 100%;/*PERMET DE METTRE PLUS DE TEXTE DANS LES LI SANS RETOUR À LA LIGNE*/
}

.menu_e3f_sprites_1 {
list-style-type: none;/*PAS DE PUCES*/
padding: 0;/*ENLÈVE L'INDENTATION À GAUCHE POUR TOUS LES NAVIGATEURS*/ 
margin-left: 0;/*ENLÈVE L'INDENTATION À GAUCHE POUR TOUS LES NAVIGATEURS*/
width: 100%;
}
.menu_e3f_sprites_1 li {
background-image: url('../images/icons/e3f_sprites.png');
  background-repeat: no-repeat;
  /*background-position: 4 0.0em;*/
  padding-left: 3.5%;/*ÉCARTE VERS LA GAUCHE LE TEXTE PAR RAPPORT À LA PUCE*/ 
     }

Merci pour votre aide.