[HTML] guerre des boutons

Version imprimable

29/10/2006, 15h37
lodan

[HTML] guerre des boutons

Bonjour,

J'ai déceloppé mon appli en mettant partout des boutons sous la forme :

Code:

<input type="button" name="Miseajour" onclick='envoi(this, this.form.id);' value="Mise à jour">

Je voudrais mettre un image, alors j'ai fait comme ceci :

Code:

<input type="image" src="{#prefixe_site#}images/Bouton 3.png" name="Miseajour" onclick='envoi(this, this.form.id);' value="Mise à jour">

J'ai bien mon bouton, mais je n'ai plus le texte "Mise à jour" dedans.

Dois-je faire autant d'image de bouton que j'ai de texte différent ?

Merci d'avance
29/10/2006, 15h45
Joe-La-Boule

Tu a essayé plutot avec CSS ? :)

Heu c'est intéressant, je penses même hachement mieux que ce que je voulais faire. Donc du genre :

Code:

1
2
3
4
5
<div id="piedForm">
<ul>
<li><input type="????" name="Retour" onclick='envoi(this, this.form.id);' value="Retour"<span>Retour</span></a></li>
</ul>
</div>

Css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#piedForm {
      display:inline;
      margin:0;
      padding:0;
}
    #piedForm a {
      float:left;
      background:url("../images/tableftH.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #piedForm a span {
      float:left;
      display:block;
      background:url("../images/tabrightH.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:grey;

Mais là je calle pour la partie "input" de mon bouton.

29/10/2006, 16h07
Joe-La-Boule

Desolé :(

Selon moi faut faire ca avec CSS + Javascript sachant que je pourrait plus vraiment t'aider car JavaScript et moi ca fait deux ! :aie:
29/10/2006, 16h20
lodan

Merci de m'avoir aiguillé vers le CSS, je creuse de ce côté là.
29/10/2006, 16h36
Bisûnûrs
Tu as mal recopié ton code où est-il vraiment comme ça :
Code:

1 2 3 4 5 <div id="piedForm"> <ul> <li><input type="????" name="Retour" onclick='envoi(this, this.form.id);' value="Retour"<span>Retour</span></a></li> </ul> </div>
:question:

Parce que ton input n'est pas fermé ...

Possibilité :

Code:

<input type="button" name="Miseajour" onclick='envoi(this, this.form.id);' value="Mise à jour" style="background:url(adressedetonimage);width:largeurdetonimage;height:hauteurdetonimage;">

Mais l'image n'est pas affichée sous Safari.
29/10/2006, 17h14
lodan

C'est dans mon copier coller que j'ai fait une erreur pour le input.

Je ne fonctionne que sur firefox et les users aussi (intranet).

J'ai fait comme ceci :

Code:

<input type="button" name="Initialiser" onclick='envoi(this, this.form.id);' value="Initialiser" style="background:url({#prefixe_site#}images/Bouton_3.png);">

Pour les dimension, je verrai après.

L'exemple que tu me donnes, c'est avec une image dans un bouton, moi ce que je cherche à faire, c'est une image quelle quel soit qui est un bouton, donc j'ai un prob_me avec le type="button" qui me fait un bouton restangulaire.
29/10/2006, 17h21
Joe-La-Boule

Javascript pourra surement t'aider combiné avec CSS ;)
Enfin selon moi .....:roll:

salut
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <body> <style> .my_btn{ background-image:url('design/btn/out.gif'); background-repeat:repeat-x; border:none; text-decoration:none; width:100px; height:24px; } .my_btn:hover{ background-image:url('design/btn/over.gif'); text-decoration:underline overline; width:100px; height:24px; } </style> <form><input type="submit" name="envoi1" value="dsfsdfaction1" class="my_btn"></form> </body>
Si tu ne veux pas utiliser le type submit c'est que tu t'es gouré!
Et dans ce ca, je te conseil de fair un lien en gise de bouton

30/10/2006, 09h35
Joe-La-Boule

Oui suis-je bete en utilisantun lien en tant que bouton ca fonctionne trés bien ! :D bien vu ;)
30/10/2006, 15h00
lodan

J'ai essayé. Ce qui est super c'est que je n'ai avec le CSS que la classe à rajouter.

Par contre, il ne me prend pas l'image ou si elle est trop petite il me la repdoduit plusieurs fois. Il me fait un bouton carré.

Ce qui veux dire, que la forme est imposé à moi de créer un fond ?
30/10/2006, 16h41
Joe-La-Boule

Essaye de definir une taille au boutons ;)
30/10/2006, 22h50
CR_Gio

Citation:

Essaye de definir une taille au boutons

Au contraire!Il faut penser flexibilité. Tu peut Imbrique des span par exemple (moi c'est ce que je fais). Tout depand de ton boutton

Oui, oui, je préfère garder la flexibilité. Pas question de faire un bouton fixe.

Je souhaite définir un dessin qui prendra la taille voulu en fonction du texte qui est dedans.

Code:

1
2
3
4
5
<div id="bouton">
	<ul>
		<li><input type="button" name="Valider" onclick='envoi(this, this.form.id);' <span>Valider</span></a></li>
	</ul>
</div>

Et mon CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#bouton {
      float:left;
      width:100%;
      font-size:93%;
      line-height:normal;
      margin:0;
      padding:0;
      font: bold 11px/1.5em Verdana;
}
#tabsH ul {
        margin:0;
        padding:10px 10px 30px 0;
        list-style:none;
}
#bouton li {
      display:inline;
      margin:0;
      padding:0;
}
    #bouton a {
      float:left;
      background: url("../images/fond_menu_off.gif") repeat-x top left;
      margin:1;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #bouton a span {
      float:left;
      display:block;
      padding:5px 15px 4px 6px;
      color:grey;
      }
 
    #bouton a:hover span {
      color:#FFF;
      }
    #bouton a:hover {
      background-position:0% -42px;
      }
    #bouton a:hover span {
      background-position:100% -42px;
      }

Il faut que je teste un truc dans ce genre là.