Background de lien <a> plus grand
Résolu
ptite parisienne
-
MANGOG Messages postés 5 Statut Membre -
MANGOG Messages postés 5 Statut Membre -
Bonjour,
dans mon phtml j'ai :
et dans mon css j'ai :
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 ^^
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:
- Background de lien <a> plus grand
- Lien url - Guide
- Créer un lien pour partager des photos - Guide
- Verificateur de lien - Guide
- Trier du plus petit au plus grand excel - Guide
- Photo insta en grand - Guide
2 réponses
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
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
