Forum SELFHTML Archives du forum 2005 avril| Forum SELFHTML Archives du forum 2005 avril |
 |
Forum SELFHTML: Archives: |
 |
|
 |
|
Le message suivant est de: beweb, 17. 04. 2005, 13:02
bonjour,
je tourne en rond pour mettre une image pour un bouton dans un form
tout en gardant sa fonction submit, j'en suis là l'image
s'affiche
mais aussi le text du bouton par dessus et puis plus de fonction :-(
Au fait, mon form est dans un tableau car je m'en suis pas sortie
rien qu'en CSS pour aligner comme je voulais.
css:
#boutonvalider{
height: 40px;
width: 88px;
background-image:url(img/bout_envoie.gif);
}
span.formw {
text-align: left;
}
html:
<form><table>
(...)
<tr>
<td >
<span class="formw"><input name="Submit" type="submit"
id="boutonvalider" value="envoyer"
border="bordure" alt="valider le formulaire">
</span></td>
<td ><span class="formw"><input name="Submit2" type="submit"
id="boutonefface" value="effacer"
border="bordure" alt="recommencer le formulaire">
</span></td>
</tr>
</table>
</form>
 |
Le message suivant est de: Patrick Andrieu, 17. 04. 2005, 16:36
http://actuel.fr.selfhtml.org/equipe/patrick.htm
Bonjour!
Si tu es d'accord, je vais commencer par des généralités sur les CSS...
Préfère les class aux id (voir ma réponse à terse ?t=497&m=1929 un peu plus bas.
Donc, à moins que tu n'aies besoin de manipuler le bouton utilisant le DOM, faire plutôt une classe au lieu d'un format indépendant:
.boutonvalider {
mentions
mentions
}
Celà présente l'avantage que si tu as d'autres formulaires sur ta page, tu pourras faire appel à cette classe: <input name="submit_du_xieme_formulaire" class="boutonvalider" ...>. Si en revanche, tu travailles avec les ID, tu es obligé de donner à chaque élément une ID différente.
»» span.formw {
»» text-align: left;
»» }
Ici aussi, tu peux simplifier en n'écrivant que soit:
.formw {
mention
}
et à ce moment-là, tu peux utiliser cette classe pour d'autres éléments ou soit:
span {
mention
}
et ainsi, ta où tes mentions CSS s'appliquent à tous les éléments <span>, et tu n'as pas besoin de mentionner class="..." dans ton repère <span>. Cependant, la solution .formw est la meilleure, au cas où, dans ton fichier, tu as d'autres éléments span que tu désirerais formater différamment.
»» j'en suis là l'image s'affiche mais aussi le text du bouton par dessus et puis plus de fonction
Avec IE 6, rien ne s'affiche (IE 6 construit le bouton style Windows par dessus), la fonction submit est préservée. Avec Mozilla, tout marche... seulement, le texte s'affiche par dessus car:
background-image:url(...)
est une _image de fond_ (background), il est donc clair que le bouton se construira dessus (et avec IE cachera l'image). Je te renvoie donc au chaptitre de SELFHTML sur les formulaires traitant des boutons à envoyer: http://fr.selfhtml.org/html/formulaires/boutonsformulaires.htm#graphiques...
Une erreur au passage dans ton code...:
<input name="Submit2" type="submit" id="boutonefface" value="effacer" border="bordure" alt="recommencer le formulaire">
un bouton pour effacer les données entrées est un bouton du type "reset" et non "submit". Et quelle est cette mention border="bordure" ??? À virer, STP!
Et maintenant, pourquoi ne parviens-tu bas à aligner sans tableau? Il faudrait d'abord, que tes boutons reset (Effacer) et submit (Envoyer) aient la même taille, si tu veux les placer côte à côte, ce sera plus joli. Ensuite, utilise <br> pour passer à la ligne dans les champs type texte. Les boutons pour envoyer et effacer (ne pas oublier: reset [;)]) sont notés simplement sur la même ligne.
Seulement, dû au fait qu'un bouton est une image et l'autre non, il y aura un petit décalage: le bouton "normal" apparait légèrement plus bas. Mais il existe suffisamment de mentions CSS pour palier à ce genre de chose, donc essayer!
Et voici un exemple:
<html>
<head><title>Test</title>
<style type="text/css">
.formcss {
width : 505px;
font-family : Verdana, sans-serif;
font-size : 12px;
color : #000080;
background-color : #ffffff;
border : 1px solid #ffce9c;
}
.textarea {
width : 505px;
height : 100px;
font-family : Verdana, sans-serif;
font-size : 12px;
color : #000080;
background-color : #ffffff;
border : 1px solid #ffce9c;
}
.bouton {
height : 40px;
width : 88px;
}
</style>
</head>
<body>
<form name="impressum" method="post" action="un_formmailer.pl">
<p>Name:<br>
<input type="text" name="realname" size="20" class="formcss"><br>
E-Mail:<br>
<input type="text" name="email" size="20" class="formcss"><br>
Mitteilung:<br>
<textarea class="textarea" cols="20" rows="5" name="Kommentare"></textarea><br><br>
<input type="image" src="bout_envoie.gif" class="bouton" value="Absenden"> <input type="reset" class="bouton" value="Effacer"></p>
</form>
</body>
</html>
Meilleures salutations de Francfort sur le Main,
Patrick
--
_ au delà du délire _
| |
Le message suivant est de: beweb, 17. 04. 2005, 17:14
»» Bonjour!
Ben merci pour ces tuyaux-explications nombreuses et claires, achement sympa !
»» Préfère les class aux id (voir ma réponse à terse
Oui j'ai déjà corrigé ça pour maintenant mais en fait c'est qu'au début j'avais tout fait en css sans tab et je réutilsais la class pour les autres champs..
En tous cas je vais aller voir ce que c'est Mention ça à l'air bien en effet. par contre je sais pas ce que c'est DOM et là je dis pffuuu ça fait beaucoup.. :)
»»
»» Avec IE 6, rien ne s'affiche (IE 6 construit le bouton style Windows par dessus), la fonction submit est préservée. Avec Mozilla, tout marche... seulement, le texte s'affiche par dessus car:
»»
»» background-image:url(...)
»» est une _image de fond_ (background), il est donc clair que le bouton se construira dessus (et avec IE cachera l'image). Je te renvoie donc au chaptitre de SELFHTML sur les formulaires traitant des boutons à envoyer: http://fr.selfhtml.org/html/formulaires/boutonsformulaires.htm#graphiques...
Mais là aussi j'y suis allé ! et j'ai essayé : super au niveau affichage en effet mais plus de fonction, peut-être je devais pas etre loin, mais j'ai cru qu'on utilisait ça pour faire autre chose du coup... :((
»» Une erreur au passage dans ton code...:
oui à force de faire et défaire je manque de méthode et voilà des erreurs qui n'y sont pas avant et qu'arrivent pour bien brouiller les pistes arrh
»» Et maintenant, pourquoi ne parviens-tu bas à aligner sans tableau?
Non en fait ya tjrs eu deux boutons j'avais pensé alléger les échanges en ne parlant que d'un seul, en fait je voulais faire un css mais le form est grand et parfois 3 textes suivi de leur 3puces respectives etc j'avais du mal à aligner le tout ça faisait des paquets de div...
j'ai lu pas mal d'échanges, et j'étais assez d'accord (peut-être parce que je débute) pour ne pas compliquer quand finalement pour une fois les tab pourraient se justifier, y parait que trop de div tue les div ...alors que penser?
De plus j'essaie de mettre du codage pour l'Accessibilité, les label, les fieldset...
Ben merci beaucoup je vais regarder ça de plus près, mais apparement ya carrément des Value que j'ai jamais vu <value="Absenden"> c'est ça qui met la fonction sur l'image ??
Bon je vais tester
Encore merci
bé
»» Et voici un exemple:
»» <body>
»»
»» <form name="impressum" method="post" action="un_formmailer.pl">
»» <p>Name:<br>
»» <input type="text" name="realname" size="20" class="formcss"><br>
»» E-Mail:<br>
»» <input type="text" name="email" size="20" class="formcss"><br>
»» Mitteilung:<br>
»» <textarea class="textarea" cols="20" rows="5" name="Kommentare"></textarea><br><br>
»» <input type="image" src="bout_envoie.gif" class="bouton" value="Absenden"> <input type="reset" class="bouton" value="Effacer"></p>
»» </form>
| |
Le message suivant est de: Patrick Andrieu, 17. 04. 2005, 17:52
http://actuel.fr.selfhtml.org/equipe/patrick.htm
Rebonjour!
»» En tous cas je vais aller voir ce que c'est Mention ça à l'air bien en effet.
;) Comme tu as remarqué, il n'y pas de mention "mention". Je mets ça à titre d'exemple quand j'ai la flemme. Ca veut simplement dire: "ici vient une mention CSS" :)
»» par contre je sais pas ce que c'est DOM et là je dis pffuuu ça fait beaucoup.. :)
Le DOM (document object model) est - beaucoup simplifié - une interfonction entre JavaScript et CSS. Tu peux modifier par l'intermédiare de JavaScript des mentions CSS définies dans tes feuilles de style. Tu trouveras toutes les explications au chapitre JavaScrit/DOM de SELFHTML: http://fr.selfhtml.org/javascript/index.htm.
»» oui à force de faire et défaire je manque de méthode et voilà des erreurs qui n'y sont pas avant et qu'arrivent pour bien brouiller les pistes arrh
Ce sont des choses qui arrivent et les erreurs les plus simples, on les voit jamais...
»» Ben merci beaucoup je vais regarder ça de plus près, mais apparement ya carrément des Value que j'ai jamais vu <value="Absenden"> c'est ça qui met la fonction sur l'image ??
Absenden, c'est de l'allemand :) J'ai pas vu en copiant/collant, c'est tout... ;) Il y a aussi "Name" pour "Nom" et "Mitteilung" pour "Message" dans mon exemple ;)
Ce n'est pas la valeur de l'attribut value qui est responsable de l'envoi ou non. Sur un bouton non-image, le texte indiqué dans value="..." est affiché sur le bouton, c'est tout. Tu peux mettre ce que tu veux dans value. Mais comme tu utilise une image, tu peux te passser de l'attribut value dans ton repère pour le bouton d'envoi.
»» y parait que trop de div tue les div ...alors que penser
Disons qu'il est assez difficile d'y voir clair quand on en a beaucoup. Mais je ne pense pas que ce soit plus compliqué à "administrer" que des tableaux imbriqués ou non composés de beaucoup de cellules ou lignes.
Meilleures salutations de Francfort sur le Main,
Patrick
--
_ au delà du délire _
| |
Le message suivant est de: be web, 17. 04. 2005, 20:58
»» Rebonjour!
Tu trouveras toutes les explications au chapitre JavaScrit/DOM de SELFHTML: http://fr.selfhtml.org/javascript/index.htm.
quand j'aurais digere oui, j'en profite pour dire que selfHTML c'est vraiment super !!
»» Absenden, c'est de l'allemand :) J'ai pas vu en copiant/collant, c'est tout... ;) Il y a aussi "Name" pour "Nom" et "Mitteilung" pour "Message" dans mon exemple ;)
Arzo j'ai fini par comprendre après..:))
»» Ce n'est pas la valeur de l'attribut value qui est responsable de l'envoi ou non.
C'est ce qu'il me semblait mais en tous cas maintenant mon bouton submit fonctionne maintenant mais le reset (qui est une image aussi et de meme taille) fais aussi un submit ?! alors que je l'ai corrigé ! je me permet de remettre où j'en suis mais si t'en a marre je comprendrais tout à fait. tu m'as deja beaucoup aide MERCI
HTML
<span class="formw"><input type="image" src="img/bout_envoie.gif" class="boutvalider" value="submit" alt="valider le formulaire"></span>
<span class="formw"><input type="image" src="img/bout_efface.gif" class="boutonefface" value="reset" alt="recommencer le formulaire"></span>
excellentes salutations de Bé de Brest,
| |
Le message suivant est de: Patrick Andrieu, 17. 04. 2005, 22:02
http://actuel.fr.selfhtml.org/equipe/patrick.htm
Bonjour Bé!
»» excellentes salutations de Bé de Brest
Tonnerre de Brest, une Bretonne :) Ou s'agit-il de Brest en Ex-Union Soviétique? :)
»» quand j'aurais digere oui, j'en profite pour dire que selfHTML c'est vraiment super !!
Oui, commence petit... :) D'abord maitriser HTML, puis CSS... ensuite on peut s'attaquer au JavaScript et ensuite à PHP ou Perl :)
»» »» Absenden, c'est de l'allemand :) J'ai pas vu en copiant/collant, c'est tout... ;) Il y a aussi "Name" pour "Nom" et "Mitteilung" pour "Message" dans mon exemple ;)
»» Arzo j'ai fini par comprendre après..:))
Ach so :)
»» C'est ce qu'il me semblait mais en tous cas maintenant mon bouton submit fonctionne maintenant mais le reset (qui est une image aussi et de meme taille) fais aussi un submit ?! alors que je l'ai corrigé ! je me permet de remettre où j'en suis mais si t'en a marre je comprendrais tout à fait. tu m'as deja beaucoup aide MERCI
Il n'y a rien mentionné d'autre sur SELFHTML, mais mon test a prouvé que tu ne peux faire qu'un bouton image pour envoyer. Donc, pas de chance de faire un bouton image "Effacer", vu qu'il lui faudra l'attribut type="reset" - et là, c'est le système d'exploitation (dans 99% des cas, ce sera Windows) qui prends le dessus et affichera "son" bouton. Donc, pas possible au premier abord de faire deux boutons type image côte à côte, sauf utilisation de JavaScript pour vider les champs de formulaire, mais je crois que tu n'en est pas encore là :)
»» <span class="formw"><input type="image" src="img/bout_envoie.gif" class="boutvalider" value="submit" alt="valider le formulaire"></span>
»»
»» <span class="formw"><input type="image" src="img/bout_efface.gif" class="boutonefface" value="reset" alt="recommencer le formulaire"></span>
Hmm, tu veux avoir les boutons côte à côte ou en dessous les uns des autres? Si tu veux côte à côte, tu les mets sur la même ligne de code (avec un espace entre) et tu n'as pas besoi de les enfermer dans un <span>... Si tu les veux en-dessous, non plus, vu que l'alignement à gauche est par défaut...
C'est vrai que les Breton(ne)s sont têtu(e)s ;)
Meilleures salutations de Francfort sur le Main,
Patrick
--
_ au delà du délire _
| |
Le message suivant est de: be web, 18. 04. 2005, 09:33
»» Bonjour Bé!
Bonjour Patrick
»»
»»
»» Tonnerre de Brest, une Bretonne :) Ou s'agit-il de Brest en Ex-Union Soviétique? :)
Heu c'est bien le finistère :)
»»
»» Ach so :)
ich can nicht dutch sprichen, sorry et encore moins lecrire ;-)
»»
»» Il n'y a rien mentionné d'autre sur SELFHTML, mais mon test a prouvé que tu ne peux faire qu'un bouton image pour envoyer. Donc, pas de chance de faire un bouton image "Effacer", vu qu'il lui faudra l'attribut type="reset" - et là, c'est le système d'exploitation (dans 99% des cas, ce sera Windows) qui prends le dessus et affichera "son" bouton. Donc, pas possible au premier abord de faire deux boutons type image côte à côte,
Ah ben ça me rassure qd meme cote comprehension je me sens moins nulle tout d'un coup..enfin bon pour ça en tous cas:/
sauf utilisation de JavaScript pour vider les champs de formulaire, mais je crois que tu n'en est pas encore là :)
En effet on va faire simple pour l'instant
»»
»» Hmm, tu veux avoir les boutons côte à côte ou en dessous les uns des autres? Si tu veux côte à côte, tu les mets sur la même ligne de code (avec un espace entre) et tu n'as pas besoi de les enfermer dans un <span>... Si tu les veux en-dessous, non plus, vu que l'alignement à gauche est par défaut...
Ah oui c'est vrai je vais arranger ça et refaire en css seul !, aussi mais + tard
»» C'est vrai que les Breton(ne)s sont têtu(e)s ;)
je suis pas tout à fait bretonne mais je suis pire ;)
»»
Kenavo et encore MERCI ! bé
| |
Le message suivant est de: beweb, 17. 04. 2005, 17:20
re,
Quiproquo sur les classes et les id en fait c'est bien des classes que j'avais avant et là je venais de réessayer en id ça au cas où
Et ma remarque sur "Mention" j'ai cru que c'était encore autre chose, un truc nouveau que je ne connaissais pas.
mille excuses
bé
|
| Forum SELFHTML Archives du forum 2005 avril |
© 1998-2004 
selfhtml@fr.selfhtml.org
(CSS)