bonjour,
je souhaite mettre une image en fond de lien.
la commande background sur un lien ne permet malheureusement pas de mettre une image plus large que la longueur de texte compris dans la balise <a>.
exple:mon lien fait 6 caractères, je ne peux pas afficher une image plus large que ces 6 caractères.
J' ai donc créer un div englobant ce lien.
la balise div étant une balise de type bloc, j' ai voulu annuler le retour à la ligne avec la commande display inline.
Le retour à la ligne est bien annulé mais malheureusement, les propriétés de dimensions de la balise div ( width et height ) sont également annulées.
Comment résoudre le problème ?
le but étant de créer un bouton cliquez ici mais en inscrivant "cliquez ici" dans ma page html afin que "cliquez" ici soit reconnu par les moteurs de recherches.
merci de vôtre aide.
je voudrais que le lien de téléchargement soit à la suite du nom du logiciel.

Bienvenue dans le monde merveilleux du CSS positionning.
 
La seule chose que je vois qui ne soit pas trop crade, c'est d'ajouter l'attribut CSS "float: right" sur ton lien. Faudra aussi le déplacer avant ton texte (- VirutalDub ...), et mettre un br pour "couper" le float (attribut "clear: both" ), genre :
 
...
<div>
<a class="telecharger" href="http://chrisllers.free.fr/logitheque/VirtualDub-1.6.18.zip">Télécharger Virtualdub</a> - Virtualdub :<br style="clear: both" />
</div>
...
 
Bon, il y aura un "ressort" horizontal entre le texte et le le lien, mais ça devrait être pas trop génant.

salut et merci,
je viens d' essayer mais ça ne marche pas aussi biuen sous IE que FF.
J' ai fait scrupuleusement ce que tu m' as dit.
le lien qui précède le texte.
Le float:right; dans le CSS, le lien par à droite normal.
J' ai ensuite mis le code  :<br style="clear: both" />  
un ligne saute mais le float n' est pas coupé.
La seule chose qui soit à peu près correcte pour l' instant, c' est effectivement un float:right; avec en plus un margin-right de 300px our ramener le tout sur la gauche.
Mais je ne sais pas si c' est très correct tout ça.

Ah la vache vous êtes beau tout les 2...
Rajoute en cas du flash dans le br.... ça marchera mieux
 
sinon : http://gatsu.ftp.free.fr/html/bouton/testbt.html

Bah, c'est ce que j'obtiens avec IE 6 et Firefox :
 

 
Sans le br, le lien écraserait une partie du texte. Le code à cet endroit est :
 
<h4>Logiciels utilisés:</h4>
<a class="telecharger" href="../logitheque/VirtualDub-1.6.18.zip" style="float: right">Télécharger Virtualdub</a> - Virtualdub : <br style="clear: both">
 
Rien modifié d'autre.

justement tpierron, je voudrais que le bouton soit collé à gauche du texte.
xtof_83, ça m' a l' air mieux comme méthode.
Cependant, comme tu l' as peut être vu, j' ai une flèche jaune à droite du lien.
avec ta méthode,  l' image s' adapte à la largeur du texte, ce qui est bien mais ne me permet pas d' afficher le coté droit de bouton avec cette fameuse flèche.
J' ai vu qu' il y a avait un border:1 px solid;
On ne peux pas remplacer cette bordure par la partie droite de mon image ( donc avec cette fameuse flèche ) ?
Ou alors, peut on coller systématiquement l' image avec la flèche à droite du lien ?

Tu met le background à droite, un padding-right, et voilà, il y a pas de souci
 
Pourquoi ce prendre la tête quand c'est tellement simple

en fait, j' ai retourné mon image.
la flèche est maintenant à gauche.
Mais il y a un problème sur le bord droit du bouton.
en effet, j' ai fait comme sur le lien que tu as mis plus haut :
j' ai créer une image plus grande qui s' adapte à la longeur du texte, ça c' est vraiment génial et je t' en remercie.
Mais dans mon cas, j' aimerai que systématiquement, la partie droit de mon bouton qui fini en arrondi mais sans flèche ce coup-ci, se colle automatiquement à la fin pour "finir" le fond.
Car actuellement avec la technique que tu m' as proposée, j' ai ceci, le fon se coupe brutalement

avec un lien comme ceci :
 
<a href="op"><span>Telec....</span></a>
 
Tu peux tout faire, alors réfléchi, un peu et op  :
indice :
Sur a tu applique le grand background
sur span tu mets ton bord arrondi...voilà

je n' arrive pas à obtenir le bon résultat.
effectivement la partie droite de l' image s' affiche avant "télécharger" mais si je mets un margin-left ou padding-left, le "télécharger" se décale aussi.

Montre ton code

alors le code du lien est celui-ci:

 
et la partie en html est celle-ci:

 
et la partie droite de l' image que j' aimerai ajouter s' appelle test.png
merci pour ton aide.

Bon je te fais un exemple demain en soirée...donc tu l'auras Mardi pour toi

merci, c' est sympa !

http://free-riders.fr/site/inlinebutton/
 
crédit : Gatsu35

le bouton là au niveau CSS est à chier (oui je sais meme si j'en suis l'auteur c'est de la merde en baton).

Après un an de travaux et d'essais, j'en suis arrivé à ceci :
HTML :

CSS :

Je savais qu'une version à jour existait....Mais je mettais plus la main dessus
 
J'update dés que je peux.

Ok merci xtof, j' essaierai, j' ai pas trop le temps en ce moment.
Je te dirai si c' est OK.
merci !

Bonjour,
je me suis enfin penché sur le problème.
j' ai fait plusieurs essais et j' avoue que je ne comprends pas bien le code.
Je peux en effacer certaines partie sans que celà change quoi que ce soit ( je les laisse qund même au cas où ).
Le meilleur résultat que j' obtiends pour ce fameux bouton est celui-ci:
http://chrisllers.free.fr/essai.html
Il y a 2 bugs.
- l' écriture est trop basse, comment la faire remonter ?
- il y a un surlignement rouge que je n' arrive pas à faire partir même avec text-decoration: none;
Comment faire pour régler ces deux bugs ?
merci de votre aide

UP ! SVP

Tu veux un bouton ? Pourquoi ne pas utiliser "<button>" ?

<html>
<head>
    <style>
        button
        {
            border:solid 1px red;
            background:black;
            width:150px;
        }
        span
        {
            color:white;
        }
    </style>
</head>
<body>

    <button>
        <span>Téléchargez ici</span>
    </button>

</body>
</html>

Je n'ai pas mis d'image, mais tu peux en mettre une dans les propriété CSS de "button". Tu vois bien, avec ce code, que tu peux choisir la taille de ton bouton sans problème. Ce code doit au moins fonctionner sous IE>=6, Opera>=9 et FF>=1.5.
 
Edit: ouais, heu, en fait, visuellement, stop, mais conceptuellement, spa terrible. A oublier !
 
Edit 2 : si ton soucis, c'est juste que les moteurs de recherche reconnaissent le texte du lien, et rien de plus, AMHA un title sur le lien et/ou l'image est amplement suffisant !

<a href="#" title="Téléchargez truc"><img src=".jpg" alt="image" title="Téléchargez truc" /></a>

Salut, oui mais ce que je veux surtout que la taille du bouton  s' adapte en fonction de ce que je tape.
Je ne crois pas que ce que tu me proposes puisse le faire, est-ce que je me trompe ?

Effectivement, non.

D' ailleurs le code que j' ai essayé ne fonctionne pas sur opera
help !!