Nous allons utilliser la technique dite des « portes coulissantes » avec une seule image. Cette technique est idéale pour vos menus, vos tags, vos formulaires et j’en passe.
Rendu
Concept
L’idée c’est de faire un <a href="lien"> avec l’image du coté gauche de votre bouton en fond qui contiendra un<span> avec votre texte ainsi que tout le milieu et le coté droit de l’image du bouton en fond :
Concept des portes coulissantes
Voici l’image du fond :
Au format PNG l’image n’est pas très lourde et, dans le cas où un texte un peu long se présenterait, elle doit être suffisament large.
HTML
En HTML, nous faisons un menu classique:
CSS
En CSS, nous faisons en sorte que le menu s’affiche sur une ligne et nous enlevons la petite puce devant chaque <li>
list-style-type:none;
}
li {
display:block;
float:left;
padding-left:10px;
}
Attaquons-nous maintenant au fond.
background:url(img/button-full.png) no-repeat right;
height:20px;
padding-right:6px;
display:block;
color:#9fd2ef;
font-size:11px;
line-height:19px;
text-decoration:none;
}
li a span {
background:url(img/button-full.png) no-repeat left;
height:20px;
padding-left:6px;
margin-left:-6px;
display:block;
}
Nous affichons l’image de fond du a à partir de la gauche, et l’image de fond du span à partir de la droite.
Pour que le début du a (et surtout son fond) soient visibles, nous mettons padding-left:10px; pour avoir un peu d’espace avant le span. En faisant margin-right:-6px;, le span s’affichera après 4 pixels (la taille du coté gauche à peu près).
Même chose mais avec une valeur positive au padding de droite pour garder le même espacement à la fin et que le texte soit centré dans l’image.
Mots de la fin…
Nous pouvons aussi faire en sorte que quand l’utilisateur passe sa souris au dessus d’un bouton, l’image dans le fond change :
background:url(img/button-full-hover.png) no-repeat right;
color:#efefef;
}
li a:hover span {
background:url(img/button-full-hover.png) no-repeat left;
}
C’est un petit effet sympa mais qui coûtera une image de plus.
Dans un prochain billet, nous verrons comment faire la même chose grâce à CSS 3, avec et sans image.
