Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1342 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Lien en forme de bouton avec des images

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Lien en forme de bouton avec des images

n°1307234
fluminis
Posté le 16-02-2006 à 15:28:14  profilanswer
 

Bonjour,
 
Voila ce que je voudrais faire :
un lien qui a la forme d'un bouton.
Donc j'ai trois images :
- le bord gauche
- le milieu du bouton
- le bord droit.
 
Je veux faire ça en css afin que je puisse changer le texte du bouton sans problème.
 
J'ai fait ça :

Code :
  1. <span class="bouton"><a href="#">text du lien</a><span></span></span>


et ma feuille de style contient :

Code :
  1. .bouton { /* balise span contenant le lien */
  2. margin:4px 0 0 15px;
  3. height:23px;
  4. background:url(images/btnGauche.jpg) no-repeat;
  5. padding-left:11px;
  6. font-family: Arial, Helvetica, sans-serif;
  7. font-weight: bold;
  8. font-size: 12px;
  9. }
  10. .bouton a { /* le lien */
  11. background:url(images/bgBtn.jpg) repeat-x;
  12. padding-top:4px;
  13. height:23px;
  14. color: #FBD7A1;
  15. text-decoration:none;
  16. }
  17. .bouton span { /* balise vide permettant d'afficher la bordure droite du bouton*/
  18. background:url(images/btnDroite.jpg) no-repeat;
  19. height:23px;
  20. width:11px;
  21. }


 
Le problème c'est que ça ne marche pas sous FireFox alors que sous IE nikel.
Vous voyez d'ou peut venir le problème ?
 
Merci d'avance


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
mood
Publicité
Posté le 16-02-2006 à 15:28:14  profilanswer
 

n°1307383
fluminis
Posté le 16-02-2006 à 18:02:51  profilanswer
 
n°1307509
Pitsy
Posté le 16-02-2006 à 22:06:13  profilanswer
 

fluminis a écrit :

up... une idée ?


 
Ton truc avec 2 balises span dont une vide c'est un peu bidouille...
Tu devrais normalement t'en sortir en ne stylant que les balises existantes (ul,li,a).
Peut-être pourrais-tu t'inspirer de la technique des "portes coulissantes" et l'adapter à ton cas ?

n°1307517
gatsu35
Blablaté par Harko
Posté le 16-02-2006 à 22:23:25  profilanswer
 

un lien vers la page te posant problème please (avec un accès aux images, je suis sur qu'on peut faire simple

n°1307655
fluminis
Posté le 17-02-2006 à 09:53:12  profilanswer
 

Tres interessant la technique des portes coulissantes, je ne connaissais pas. Je vais regarder ça de plus pres
 
Pour un menu, je pense que ca peut fonctionner du tonnere;
Mais dans mon cas c'est un bouton que je  veux faire, pas un menu. Donc mettre <ul><li> pour un seul item c'est bizarre non ?
 
Voila la page d'exemple, la feuille de style et les images :
http://fluminis.free.fr/test/test.html
http://fluminis.free.fr/test/style3.css
http://fluminis.free.fr/test/images/
 
Merci d'avance


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
n°1307757
Pitsy
Posté le 17-02-2006 à 11:16:15  profilanswer
 

fluminis a écrit :

Tres interessant la technique des portes coulissantes, je ne connaissais pas. Je vais regarder ça de plus pres
 
Pour un menu, je pense que ca peut fonctionner du tonnere;
Mais dans mon cas c'est un bouton que je  veux faire, pas un menu. Donc mettre <ul><li> pour un seul item c'est bizarre non ?


 
 
Oui, effectivement, ça n'a pas de sens pour un seul bouton :)
 
Maintenant dans ton exemple tu en as trois qui sont finalement une liste de choix d'action en raport avec un formulaire ou qqch du genre, donc il me semble que, sémantiquement parlant, l'option de mettre une liste se défend ?
En t'insiprant du lien que je t'ai donné tu peux en tous cas virer ton span vide, c'est déjà ça.
 
Si tu as 3 boutons à la suite et que tu estimes que la liste est appropriée, tu styles le a et le li en background (en utilisant que 2 images selon l'exemple donné)
 
Autrement pour un bouton, je vois 2 options:
 
- Soit tu ne gardes que tes balises a, en appliquant un background et insérant la 2ème images dans le html (avec le désavantage que c'est une image déco qui trouverait mieux sa place en background)
- Soit tu rajoutes un span englobant pour placer le 2ème background (ajout d'une balise pour pas grand chose)
 
Enfin pas d'autres idées pour l'heure ;) bonne chance

n°1307772
gatsu35
Blablaté par Harko
Posté le 17-02-2006 à 11:22:49  profilanswer
 

Je me rappelle avoir fait ça :  
http://gatsu.ftp.free.fr/html/testbouton/bouton.html
 
c'est similaire, ya pas mal de bourrinage en utilisant des hack CSS IE et en utilisant les pseudo-classes after et before qui fonctionnent avec FF
 
Et en utilisant une seule image s'il vous plaît :o


Message édité par gatsu35 le 17-02-2006 à 11:23:37
n°1307827
fluminis
Posté le 17-02-2006 à 11:39:37  profilanswer
 

Pitsy a écrit :

Oui, effectivement, ça n'a pas de sens pour un seul bouton :)
 
Maintenant dans ton exemple tu en as trois qui sont finalement une liste de choix d'action en raport avec un formulaire ...


 
Pour l'exemple, j'ai mis trois boutons cote à cote, il peut y en avoir 1 ou plusieurs...
c'est vrai egalement qu'il ne faut pas non plus que je perde trop de temps sur un pauvre bouton, il y a encore bien d'autres choses à faire.
Je vais voir si je peux mettre en place ta solution, mais je reste ouvert à toutes les propositions


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
n°1307841
gatsu35
Blablaté par Harko
Posté le 17-02-2006 à 11:45:35  profilanswer
 

Et ma solution :o :o :o :o :o :o ?????????????


Message édité par gatsu35 le 17-02-2006 à 11:45:54
n°1307879
fluminis
Posté le 17-02-2006 à 12:22:37  profilanswer
 

hihi :)
c'est vrai qu'elle est bien elle aussi, mais tu me fais peur en disant :

Citation :

...ya pas mal de bourrinage en utilisant des hack CSS IE et en utilisant les pseudo-classes after et before qui fonctionnent avec FF


 
Edit : à y repenser 2fois elle est meme tres bien :)


Message édité par fluminis le 17-02-2006 à 12:25:09

---------------
http://poemes.iceteapeche.com - http://www.simuland.net
mood
Publicité
Posté le 17-02-2006 à 12:22:37  profilanswer
 

n°1307884
gatsu35
Blablaté par Harko
Posté le 17-02-2006 à 12:25:21  profilanswer
 

Non c'est la solution ultime qui fonctionne partout
et que en CSS ya juste un <a><span>texte</span><a>

n°1307901
fluminis
Posté le 17-02-2006 à 12:45:13  profilanswer
 

Voila j'ai mis en application ton css :
http://fluminis.free.fr/test/test.html
 
helas il y a un probleme : sous FireFox l'image est coupée en bas
et sous IE, il semble qu'il y a une marge importante en haut du bouton


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
n°1307922
gatsu35
Blablaté par Harko
Posté le 17-02-2006 à 13:07:42  profilanswer
 

faut ke je corrige ca mais po today

n°1308917
Lund
Posté le 19-02-2006 à 02:51:19  profilanswer
 

Faut faire attention à ces hack pour IE, car j'ai l'impression que "l'astuce" du _attribut a été corrigée pour la prochaine version (7). Je sais bien qu'une partie des gens resteront sous IE6, mais il vaut mieux être prévoyant pour pas tout devoir recoder :)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Lien en forme de bouton avec des images

 

Sujets relatifs
Lien URL -> vidéo WMPsuppression symbole bouton mc graphique
Image a la place d'un boutonFaire des liens vers les images clés dans flash ?
Gestion d'images sous MySQL[LOTUS] bouton dans un memo qui ouvre un ficher
message d'erreur : lien vers le serveur ne peut etre etabli... help!Lien hypertext => changement de deux frames
probleme Value sur bouton (POST)[Flash8 XML] bouton precedent de la galerie photo
Plus de sujets relatifs à : Lien en forme de bouton avec des images


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR