[Résolu]Décalage dans la gestion d'un sprite

Bonjour,

Je rencontre actuellement quelques ennuis sur la gestion d'un menu en sprite.
L'idée de base est de mettre en évidence des liens vers des réseaux sociaux, le tout encadré dans une div ayant une position "fixed".

J'ai donc mon sprite créer en .png. A l'écran il apparaît simplement le premier lien non survolé répété 4 fois. Je ne trouve pas de solution, malgré quelques modifications hasardeuses.

Voici le code source :

HTML :

a écrit :

<div id="sprite">
	<ul>
        <li><a href="http://www.facebook.com/profile.php?id=100001521136546&ref=tn_tnmn" class="facebook"></a></li>
        <li><a href="http://www.flickr.com/photos/leuka/sets/" class="flickr"></a></li>
        <li><a href="http://www.folio.urrutia.fr" class="Issuu"></a></li>
        <li><a href="http://issuu.com/laurenturrutia" class="Rss"></a></li>
	</ul>    
</div>

CSS :

a écrit :

/*debut sociaux*/
#sprite {position:fixed; bottom:5%; left:2%;
		width: 136px;
		 /*background:url(../images/sprite.png) no-repeat; */
		}

#sprite ul{
  list-style-type:none;
  left: 0px;
  top: 0px;
  margin:0;
  padding:0;
  border:0;
}
#sprite li{
  margin:0;
  padding:0;
}

#sprite li a{
  display:inline-block;
  height:20px;
  width:68px;
  background: transparent url("../images/sprite.png") no-repeat 0 0;
  margin:0;
  border:0;
}

a.facebook {background-position: 0px 0px;}
a.flickr {background-position:0px -20px;}
a.Issuu {background-position:0px -40px;}
a.Rss {background-position:0px -60px;}

.facebook:hover{background-position: -68px 0px;}
.flickr:hover{background-position:-68px -20px;}
.Issuu:hover{background-position:-68px -40px;}
.Rss:hover{background-position:-68px -60px;}
		
/*Fin sociaux*/ 

Ci dessous le lien de la page impacté :
http://www.folio-lurrutia.fr/cvlu/index.htm

J'ai pensé à plusieurs problèmes notamment au niveau de la déclaration des "class". Je tourne en boucle dessus depuis une demie journée, la méthodologie n'est peu être simplement pas bonne.

Pouvez vous m'aiguiller dans ma démarche ?
Modifié par Foliolur (15 Dec 2011 - 14:12)

Bonjour,

si je ne me trompe pas il s'agit d'un problème de priorité des sélecteurs : même placé après, tes background-position ne s'appliquent pas à cause du #sprite li a{...} qui est prioritaire.

Essaies d'ajouter #sprite li devant ton a.facebook par exemple.

Bonjour,

Il s'agit surtout d'un problème de logique d'utilisation des sprites. Une image porteuse de contenu et/ou support d'un lien doit toujours être placé dans le code html et non en image de fond dans le css.

Là, pour faire simple, tu as des liens vides d'intitulés. Donc ces liens n'existent pas.


Les sprites, c'est super, mais ça ne pas être utilisé partout.

Merci pour vos réponse.

Ten : Effectivement le problème venais bien des sélecteurs, après modification le sprite réagi correctement. Merci pour ton oeil aguerrie ^^

Laurie-Anne : Je comprend tout à fait. Effectivement, le plus juste aurais été d'injecter les images directement dans le code html. Malgré tout cela ma permis de tester et de comprendre la mise en forme de l'outil, même si son utilisation dans le cas présent n'est pas justifié. Merci pour t'es conseil