[HTML] guerre des boutons

**lodan** · 29/10/2006, 15h37

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

**Joe-La-Boule** · 29/10/2006, 15h45

Tu a essayé plutot avec CSS ?

**lodan** · 29/10/2006, 16h03

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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

Selon moi faut faire ca avec CSS + Javascript sachant que je pourrait plus vraiment t'aider car JavaScript et moi ca fait deux !

**lodan** · 29/10/2006, 16h20

Merci de m'avoir aiguillé vers le CSS, je creuse de ce côté là.

**Bisûnûrs** · 29/10/2006, 16h36

Tu as mal recopié ton code où est-il vraiment comme ça :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

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

Possibilité :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<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.

**lodan** · 29/10/2006, 17h14

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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.

**Joe-La-Boule** · 29/10/2006, 17h21

Javascript pourra surement t'aider combiné avec CSS

Enfin selon moi .....

**CR_Gio** · 30/10/2006, 03h42

salut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Oui suis-je bete en utilisantun lien en tant que bouton ca fonctionne trés bien !

bien vu

**lodan** · 30/10/2006, 15h00

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 ?

**Joe-La-Boule** · 30/10/2006, 16h41

Essaye de definir une taille au boutons

**CR_Gio** · 30/10/2006, 22h50

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

**lodan** · 31/10/2006, 08h22

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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à.

[HTML] guerre des boutons

HTML

Discussions similaires

Partager

Partager