Bonjour, je souhaiterai crée un bouton perso, qui s'adapterai en focntion de la longueur du texte.
 
Cependant, pour l'instant, je n'arrive pas à faire en sorte que l'image de fond s'adapte à la taille du bouton (simulé par un div).
J'arrive à adapter la taille de l'image de fond en utilisant un <img> au lieu du "background-image". Cependant, dans ce cas, comment faire en sorte que le texte apparaisse sur l'image ?
 
Merci beaucoup !!

voici la chtite fonction :
 
function creer_bouton($texte,$action,$largeur,$hauteur)
{
    echo <<<END
     
    <div style="width:{$largeur}px; height:{$hauteur};">
         <img src="../img/button_1.gif" border="0" width="100%" height="100%"
         onmouseover="this.src='../img/button_2.gif';"
         onmousedown="this.src='../img/button_3.gif';"
         onmouseup="this.src='../img/button_2.gif';"
         onmouseout="this.src='../img/button_1.gif';"
         onclick="{$action};"
         style="cursor: pointer;">
         <div style="position: absolute;">{$texte}</div>
    </div>
 
END;
}
 
Mais le texte reste sous l'image...

http://gatsu.ftp.free.fr/html/bouton/

Merci pour ce lien, mais si j'entre un texte plus long, l'image sera-t-elle étirée ?
Car c'est le but que je souhaite atteindre.
 
Je viens d'essayer la méthode du lien que tu m'as envoyé KangOl, et en effet, je ne peux pas étirer l'image de fond à la taille souhaitée.
 
Est-il cependant possible de placer du texte par dessus une image ?

Je tiens à préciser que ce bouton est devenu obsolète et j'ai depuis un mois déjà mis au point un bouton inline infuckable qui prend la largeur du texte comme il faut et qui ne nécessite aucun hack CSS et qui fonctionne sur tous les navigateurs avec le même affichage.
Mais je le remettrait en ligne prochainement si vous voulez bien me pardonner, mais d'où je suis aujourd'hui je ne peux pas satisfaire votre demande.

Merci, Gatsu35 c'est sympa J'attend ton post avec impatience !!! 8)

c'est pas celui la ?
http://gatsu.ftp.free.fr/html/inlinebutton/
 
ps : il est peut etre devenu obsolete mais il me suffit

celui-ci est devenu obsolète :  
le nouveau code de ce bouton est simple :  
 

 
et tu peux virer les hacks qu'il y a derriere, plus besoin d'eux
 
en fait les seuls changements sont de remplacer les premiers displays de mozilla par un display:-moz-inline-box qui a le même comportement qu'un display:inline-block

mwai, j'ai pas trop le coup du <span> dans le <a>

Le soucis c'est que mon image de fond possèdes des décos de chaque coté, donc ça se voit
 
En plus, les propriétés onmouseover, etc... ça devient chaud à gérer

N'y aurait-il pas moyen de détecter la position de l'image et d'afficher un div en position: absolute dessus ?

bha pas besoin de onmouseover
suffit de jouer avec la pseudo-classe :hover

Je me suis arrangé autrement J'ai séparé mon image en 3 partie et j'ai créer un tableau. La partie centrale contient le texte et l'image milieu en fond. Les autres cases sont gauches et droite. Le résultat est nickel.
 
Merci

nickel ... graphiquement ... mais le code est vraiment pas top

Ba un tableau html, je suis sur au moins que ça marche sur tous les navigateur, ça m'évite de trop bidouiller mon css. C'est plus simple pour mon cas.

En quoi le "span" dans le "a" te gène ?
c'est un simple élément inline dans un autre élément inline. Et c'est la seule possibilité d'avoir des images avec des bords propres  et d'utiliser les portes coulissantes + un petit padding pour laisser passer le dawa.
 
Si tu trouves mieux je suis ton homme hein
 
Sinon benjones, ta solution est mega pourri avec qu'avec 2 images tu peux faire ce que tu cherches à faire facilement.
l'une des deux images faisant 600px de largeur au moins.

 
Mega pourri faut pas exagérer, je vois pas en quoi un tableau html soit méga pourri
 
Cependant, ton astuce est très interessante, je vais tout essayer de toute façon et garder ce qui correspond le mieu à mon problème.
 
Merci.

file ta maquette graphique de ton bouton et je te prouve le contraire en moins de deux
 
un tableau HTML pour foutre un lien c'est crade et pas sémantique c'est tout

 
Le lien n'est pas sur le tableau rassure toi, le tableau est contenu dans un div en block inline.
 
Je ne dit pas que ma méthode est mieu, au contraire, je dis simplement que j'ai réussi à mé débrouiller rapidement pour l'instant. Je reviendrai sur les boutons quand j'aurai plus de temps. Pour l'instant je n'ai vu aucun soucis.

ah et c'est un bouton et quand on cliques dessus ya du JS ?
fuper \o/

 
Oui il y a du JS (onmouseover, onmouseout, onmousedown, etc...)

Fuper du caca pourri \o/

J'ai essayé d'implémenter ta solution. Sous firefox le résultat est parfait, mais sous IE, l'affichage est décalé...
 
Voici mon css :
 
a.bouton
{
       display:-moz-inline-box;
       display:inline-block;  
       background:url(../img/bouton1g.gif) no-repeat left top;
       padding-left:25px;
       color:#000000;
       font-weight:bold;
       font-size:12px;  
       font-family:Verdana;  
       vertical-align:bottom;
       text-decoration:none;
       vertical-align:middle;
       white-space:nowrap;
       height:21px;
}
 
a.bouton span
{
       display:-moz-inline-box;  
       display:inline-block;  
       background:url(../img/bouton1d.gif) no-repeat right top;
       padding-right:25px;
       height:21px;
       line-height:21px;
       vertical-align:middle;
       cursor:pointer;
}
 
Donc sous IE l'image dans le span apparait plus bas que l'image du <a>.

J'ai réussi à faire afficher le bouton nickel sous les 2 navigateurs/ Voici le css
 
a.bouton
{
       display:-moz-inline-box;
       display:inline-block;  
       background:url(../img/bouton1g.gif) no-repeat left top;
       padding-left:25px;
       color:#000000;
       font-weight:bold;
       font-size:12px;  
       font-family:Verdana;  
       vertical-align:middle;
       white-space:nowrap;
       height:21px;
}
 
a.bouton div
{
       display:-moz-inline-box;  
       display:inline-block;  
       background:url(../img/bouton1d.gif) no-repeat right top;
       padding-right:25px;
       height:21px;
       padding-top:2px;
       vertical-align:middle;
       cursor:pointer;
       width:0;
}
 
Comme tu le vois, j'ai remplacer le span par un div de longueur 0 (afin qu'il s'adapete au contenu, sinon ça prend toute la largeur de contenant sous IE ). L'affichegae est nickel.
 
Merci !!

non pas de Div car le display:inline-block ne fonctionne que sur les éléments de type inline sous IE.
en plus mettre un div dans un A est n'importe quoi et pas dans les normes.
laisse le span et fais plutôt ceci dans ce cas :  
 

 
Yes ça marche, merci beaucoup.
 
Par conrte, mes hover marchent pas sous IE
 
a.bouton span:hover
{
       display:-moz-inline-box;  
       display:inline-block;  
       _display:block;
       background:url(../img/bouton1d.gif) no-repeat right top;
       padding-right:25px;
       height:21px;
       padding-top:2px;
       vertical-align:middle;
       cursor:pointer;
       _width:1%;
}

 
a.bouton:hover span
 
autant gerer le hover sur le A et styler les sous élément via cette methode (de toute manière c'est comme ça qu'il faut faire)
et puis sous IE le hover n'est géré que sur le A

 
Arf, je viens d'essayer :
 
a.bouton:hover
{
background:url(../img/bouton2g.gif) no-repeat right top;
}
 
et  
 
a.bouton:hover span
{
background:url(../img/bouton2d.gif) no-repeat right top;
}
 
Ni l'un ni l'autre ne fonctionne sous IE...

et avec ce code
si tu passes ta souris juste sur la gauche du bouton ça donne quoi ?
J'ai l'impression que le fait que le span soit dans le A block zarb kan meme
 
edit : met un zoom:1 sur le A pour voir

Toujours pas...
 
Voici mon css à l'état actuel :
 
a.bouton
{
       display:-moz-inline-box;
       display:inline-block;  
       background:url(../img/bouton1g.gif) no-repeat left top;
       padding-left:25px;
       color:#000000;
       font-weight:bold;
       font-size:12px;
       font-family:Verdana;  
       vertical-align:middle;
       white-space:nowrap;
       height:21px;
       cursor:pointer;
       zoom:1;
}
 
a.bouton span
{
       display:-moz-inline-box;
       display:inline-block;
       _display:block;
       background:url(../img/bouton1d.gif) no-repeat right top;
       padding-right:25px;
       height:21px;
       padding-top:2px;
       vertical-align:middle;
       cursor:pointer;
       _width:1%;
}
 
a.bouton:hover
{
       background:url(../img/bouton2g.gif) no-repeat left top;
       zoom:1;
}
 
a.bouton:hover span
{
       background:url(../img/bouton2d.gif) no-repeat right top;
}
 
a.bouton:active
{
       background:url(../img/bouton3g.gif) no-repeat left top;
       color:#ffffff;
       zoom:1;
}
 
a.bouton:active span
{
       background:url(../img/bouton3d.gif) no-repeat right top;
}

Et non, rien en passant la souris sur la gauche du bouton (dsl javé oublié )

ca te dirait de poster les images aussi
Je vais voir ceque je peux faire car là ca me parait très louche tout ça

Ba je sais pas comment poster des images sur ce forum et je ne pense pas que ça vienne des images
Sinon voici le code qui ajoute un bouton :
 
<a class="bouton"><span>$texte</span></a>

tu vas sur imageshack.us tu upload chaque image puis tu poste le liens pour acceder à ces images ici merci

Ok je te met bouton1g et bouton1d, les autres sont les mêmes avec un changement de couleur

[img=http://img109.imageshack.us/img109/2514/bouton1dxl7.th.gif]
 
[img=http://img49.imageshack.us/img49/7279/bouton1gdt9.gif]
 
Voila !

ca fonctionne sous IE a condition de mettre un href

/me merite des coups de fouet car il n'a même pas fait gaffe à ce malheureux petit détails (alors que je fais gaffe à ca au boulot )
Merci Kang0l

A oui en enffet c'est mieu maintenant
 
Sinon, toujours rien par contre sur la propriété active :
 
a.bouton:active
{
       background:url(../img/bouton3g.gif) no-repeat left top;
       color:#ffffff;
       zoom:1;
}
 
a.bouton:active span
{
       background:url(../img/bouton3d.gif) no-repeat right top;
       color:#ffffff;
}
 
FF ok bien sur mais pas IE
 
Merci de votre aide

Arf si sous IE "ça marche" mais simplement lors du clique sur la partie gauche du bouton
 
Sinon après le clique le bouton ne se remet pas toujours en position normale.
 
Merci !