28172 sujets

CSS et mise en forme, CSS3

Problèmes avec les sprites

Salut
Je galère un peu avec les sprites. En effet je trouve ça vraiment bien mais je suis obligé de le faire en utilisant la balise button plutôt que a pour que cela fonctionne comme je veux. Du coup c'est pas terrible non plus... Smiley confus
Comment rendre l'affichage avec les liens identiques à celui avec les boutons, c'est à dire aux bons endroits?
Je voudrai que les balises a aient le même comportement que les balises button en fait...
Comment faites-vous vous?

<head>
<style>
.lienRechercher{background:url(boutonRechercher.png) no-repeat;display:block;float:left;width:16px;height:16px;margin-left:3px;}
.lienRechercher span{display:inline-block;text-indent:-5000px;}
.lienRechercher:hover{background-position:0 -16px;}

.boutonRechercher{background:url(boutonRechercher.png) no-repeat;border:none;width:16px;height:16px;margin-left:3px;cursor:pointer;}
.boutonRechercher:hover{background-position:0 -16px;}
</style>
</head>
<body>
début<a href="#" class="lienRechercher"><span>Recherche</span></a>milieu<a href="#" class="lienRechercher"><span>Recherche</span></a>fin<br>

début<button class="boutonRechercher" value="Recherche"></button>milieu<button class="boutonRechercher" value="Recherche"></button>fin<br>
</body>

Si vous affichez ce code, vous allez vite voir la différence...
le bouton pour ceux qui veulent tester : upload/1302-boutonReche.png

Merci beaucoup à ceux qui se penchent sur le sujet Smiley biggrin
Modifié par jeromax (24 Jul 2012 - 09:43)
Les éléments a par défaut sont en display:inline si je dis pas de bétise.

Le CSS :

a.lienRechercher
{
display:block;
width:16px;
line-height:16px;
text-indent:-999px;
overflow:hidden;
background:url(boutonRechercher.png) 0 0 no-repeat;
}
a.lienRechercher:hover
{
background-position:0 -16px;
}

Modifié par SuperMerguez (24 Jul 2012 - 09:46)
oui c'est pour cette raison que j'ai mis display:block mais du coup je suis obligé de mettre également un float, sinon, bien que les liens soient positionnés au bon endroit (=entre les phrases), l'affichage est vertical et c'est pas terrible non plus Smiley cligne
Sinon il y a display:inline-block.

Sinon as tu essayé d'imbriqué ton <a> dans un élément inline comme un span, ça serait un peu triché... (je ne sais pas si ça marche)
oh punaize, c'est ça ! ça marche ! inline-block !
Merciiiiiiiiiiiiiiiiiiiiiii beaucoup
et ça marche sur firefox, chrome et même ie6 Smiley biggrin Smiley biggrin Smiley biggrin Smiley biggrin
Sujet clos
Aller à