Superposer 2 images dans un bouton

Superposer 2 images dans un bouton - HTML/CSS - Programmation

Marsh Posté le 04-05-2009 à 18:05:40    

Bonjour a tous,
 
je souhaiterais creer des boutons en utilisant des images de fond avec les CSS. le probleme est que les boutons n'ont pas toujours la meme largeur, et puis le cote droit n'est pas le meme qua le cote gauche (il y a une ombre interne de 120°)
 
je sais qu'il faut decouper l'image en 2: partie gauche et partie droite, mais comment dire aux CSS de me placer une de chaque cote???
 
Merci infiniment de votre aide
Reda

Reply

Marsh Posté le 04-05-2009 à 18:05:40   

Reply

Marsh Posté le 04-05-2009 à 18:27:07    

Une seule grande image, tu mets ton texte dans un span.
Ton <a> et ton span en display block, leur hauteur est celle de l'image, ils sont flottant tous les deux, et un a l'image en background-position left ,l'autre right  tu mets un peu de padding, et hop

Reply

Marsh Posté le 05-05-2009 à 11:01:35    

Merci David pour ta reponse, mais je suis un peu perdu, pourrais tu stp detailler un peu plus?
Merci

Reply

Marsh Posté le 05-05-2009 à 11:20:12    

Tout simplement

Code :
  1. <a href="#" class="btn"><span>link<span></a>

 

Code :
  1. a.btn, a.btn span {background: url('../images/buttons/btn.gif') no-repeat;display:block;float:left;
  2. height:23px;line-height:23px;}
  3. a.btn {background-position:left;padding:0 0 0 5px;}
  4. a.btn span {background-position:right;padding:0 10px 0 0;cursor:pointer;}

Reply

Marsh Posté le 05-05-2009 à 11:30:58    

OK, je vais tester, merci bien

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed