Background de lien <a> plus grand

Résolu
ptite parisienne -  
MANGOG Messages postés 5 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
dans mon phtml j'ai :
<a id="lienpaillette" class="lienpaillettes" href="{{store direct_url="paillettes"}}">PAILLETTES</a


et dans mon css j'ai :
#lienpaillette:hover{
height:40px;
width:60px;
font-weight:bold;
color:#fff;
background:url(../images/menuflex-on.png)-30px -10px no-repeat;
}
#lienpaillette{
height:40px;
width:60px;
font-weight:bold;
color:#fff;
background:url(../images/menuflex-of.png)-30px -10px no-repeat;
}


le problème c'est qu'il ne m'affiche le background que dans la limite du texte du lien, comme s'il y avait un masque, hors je voudrais que le background du lien fasse bien la taille de l'image entiere du background du lien : 40px x60px

merci de votre aide ^^



A voir également:

2 réponses

MANGOG Messages postés 5 Date d'inscription   Statut Membre Dernière intervention   1
 
Bonjour ptite parisienne,

Dans ton CSS, rajoute simplement
display:block;

Ton texte sera calé en haut à gauche de l'image, tu auras donc aussi besoin de
text-align:center;
pour le centrer horizontalement.

C'est plus dur pour le centrer verticalement car un
padding-top:10px;
augmente aussi la hauteur du bloc de 10px.

Il faut donc en tenir compte et enlever 10px à ta hauteur qui devient donc
height:30px;

Bonnes fêtes,
Eric
1
jona303 Messages postés 369 Date d'inscription   Statut Membre Dernière intervention   28
 
bah le problème c'est que tu vas devoir mettre ton a en display:block puis lui caler un width et un height. si c'est dans un truc genre menu ok, sinon c'est difficile à intégrer à du texte
0
ptite parisienne
 
super ça marche nickel !! décidément j'adore ce forum !!
merci merci merci merci !!
0