[web]les vilains bouton tout gris ^^

Assuran · 11/07/2003, 22h00

voilà je me pose la question y'a-t-il un moyen de remplacer les vilains bouton de formulaire web

"<input type=submit value=XXX>"

le top ça serait de pouvoir les rendre transparent et remplacer par une "zone de click" et pouvoir mettre une jolie image par dessus ou en dessous j'ai essayé avec mes -10 de connaissance en CSS "<style visibility: hidden>" mais sa m'enlève la zone de click.

Furiouss · 11/07/2003, 22h05

tu peux te debrouiller avec un lien normal (image texte ...)
Ou en cible tu mets un truc du style :
Javascript:document.form.nomduForm.submit()
Ou un truc comme ça je me souviens plus exactement et j'ai la flemme de chercher le nom exact

Nijel · 11/07/2003, 22h06

<input type="submit" value="XXX" id="bouton" style="width: x px; height: y px; background-image : url("urldel'image"); background-color : #couleur ( couleur tant que l'image n'est pas chargé) ;" />

ou dans les styles

#bouton
{
width: x px ( ou em );
height: y px ( ou em );
background-image : url("urldel'image") ;
background-color : #couleur ( couleur tant que l'image n'est pas chargé ) ;
}

et ça doit être bon ?

Manaloup · 11/07/2003, 22h22

si tu n'a pas envie de te prendre la tête avec un id pour chaque bouton tu peut définir le style sur tous les objets input

dans ton <input name.......> tu ne change rien

et dans ton head (ou un fichier css externe) tu met toutes les bêtises css ..
un exemple ..

input {
color:#000000; =>Tu aura un texte noir ..
background-color : #FFFFFF; => couleur du fond ..
border-size: border: 1px solid #000000;
}

bon après tu met ce que tu veut ..une image..change la police, met tu gras écrit en petit met un padding, etc ..

Il y a aussi le class='toto' (a définir ds ton input)

et un
.toto {
proprietes...
}

pour ton exemple

<input name='send' type='submit' id='send' value='OK'>

input {
color:#000000; => La même couleur que ton texte normal
background-color : #FFFFFF; => La même couleur que ton background-color normal
border-size: border: 0px; => Pas de bordures, comme ca on voit pas que c'est un "bouton"
}

ou juste #send { ...}

une page qui explique toutes les propriétés CSS1
http://www.htmlhelp.com/reference/css/properties.html

Il y a des tas de sites qui expliquent les CSS sinon ..une bonne initiation est de lire les sources des autres aussi

Assuran · 11/07/2003, 22h24

thx

(edit suite à réponse)

Marine · 11/07/2003, 22h33

C'est fou ça. J'essai de lire ce que vous écrivez, mais je comprend absolument rien. J'ai l'impression que vous parlez Japonais et que je n'ai pas télécharger la bonne Police de caractère.

Si c'est comme ça qu'on fait un site net, je réalise que je ne serais donc jamais capable d'en faire.

Assuran · 11/07/2003, 22h40

<joke>
[Japonais On]
</joke>

j'ai testé les solutions y'a toujours un problème même avec un border de 0 px il reste un bord :/

<em sors sont sabre en arcanium chatoyant runique et découpe sont pc

>

Tann · 11/07/2003, 22h41

C'est pourtant très simple à apprendre. Il suffit de se pencher dessus pendant une après-midi et hop tu fais ça (nécessite un browser plus évolué qu'IE pour s'afficher correctement

).

Tann - Qui place sa pub discrétos.

Manaloup · 11/07/2003, 22h50

Désolé d'écrire du chinois pour les non initiés mais l'informatique c'est toujours ca

Ta page web c'est ?

PS :
http://www.tribal.firstream.net/divers/bidon.html correspond a ce que tu veut faire ? ..

Assuran · 11/07/2003, 22h58

Citation :

Provient du message de Manaloup
Ta page web c'est ?en construction

PS :
http://www.tribal.firstream.net/divers/bidon.html correspond a ce que tu veut faire ? .. à peux près

en tout cas merci du coup de m1

Nijel · 11/07/2003, 23h21

Manaloup, ta méthode fait ça pour chaque input par contre

Donc en fait vaut mieux créer une classe bouton ( si t'as plusieurs boutons ) ou tu met un id si t'as un seul bouton, parce que si jamais tu mets un <input type="text" ... ( un champ text ), et bien il sera joli mais peut-être pas ce que tu veux

.

Sinon tu peux aussi utiliser une image-bouton

tout bêtement et en fait beaucoup plus simple ( mais bon je m'en suis souvenu après coup

) :

<input type="image" src="lien" border="0" alt="envoyer" />

Assuran · 11/07/2003, 23h23

ça marche à merveille merci beaucoup

<vas pouvoir dormir cette nuit

>

Serj Tankian · 12/07/2003, 05h22

Citation :

Provient du message de Tann Skaya
C'est pourtant très simple à apprendre. Il suffit de se pencher dessus pendant une après-midi et hop tu fais ça (nécessite un browser plus évolué qu'IE pour s'afficher correctement ).

Tann - Qui place sa pub discrétos.

On s'en fout de ta vie

Maarek · 12/07/2003, 11h53

Oula jamais dma vie jpourrais faire un site ^^
Ps j'adore ste photo la sur le site de tann :

http://www.galanodel.org/images/photo15.jpg

Assuran · 12/07/2003, 12h10

y à plus simple pour faire un site que se taper du code

Front page, Dreamveawer <= dsl pas sur du nom et plein d'autre truc du genre... on peut même en faire sous word

Pouype · 12/07/2003, 12h23

Citation :

Provient du message de Boitedeconserve_Magi
<joke>
[Japonais On]
</joke>

j'ai testé les solutions y'a toujours un problème même avec un border de 0 px il reste un bord :/

<em sors sont sabre en arcanium chatoyant runique et découpe sont pc >

[quote]
input {
color:#000000; =>Tu aura un texte noir ..
background-color : #FFFFFF; => couleur du fond ..
border-size: border: 1px solid #000000;
}
[\quote]

en fait ça c'est un raccourci permi s par Internet Explorer mais c'est pas tres jolie jolie par rapport a la norme : /
donc il vaut mieux (et en plus ça marche mieux

) faite comme suit (en decoupant les differetnes propriétés):

input {
color:#000000; =>Tu aura un texte noir ..
background-color : #FFFFFF; => couleur du fond ..
border-width: 1px; =>(ou 0 dans ton cas) c'est la largeur de la bordure
border-style: solid; => il en existe beaucoup des bordure possible, peut-etre tu en veut une autre...
border-color: #000000; => et la la couleur...
}

bon sinon pour les gens qui veulent apprendre les base, un site fait pas le World Wide Web consortium (les gens qui ercirve les norme pour le web

)
http://www.w3schools.org
bon certain trouveraont que c'est limité mais ça au moins c'est officiel, et donc ça fonctinone en principe sous tout les navigateur qui sont aux dernieres normes...
@Boitedeconserve_Magi regarde la partie css, et tu trouveras des exemple des différentes bordure et effet de style sur a peu pres tout les elements de style

vabroi · 12/07/2003, 12h30

Euh je suis un vrai nb en html, mais pourquoi pas un truc de ce genre ? :

<img src=tonbouton.jpg alt=tontexted'aide width=talargeur height=tahauter onclick=tafonction(tesparametres)>

Pouype · 12/07/2003, 15h11

Citation :

Provient du message de vabroi
Euh je suis un vrai nb en html, mais pourquoi pas un truc de ce genre ? :

<img src=tonbouton.jpg alt=tontexted'aide width=talargeur height=tahauter onclick=tafonction(tesparametres)>

je dirais meme plus (parce que ça c'est bien) mais tu peut aussi faire:

<a href="tonlien"><img src=tonbouton.jpg alt=tontexted'aide width=talargeur height=tahauter ></a>

ça marche aussi nickel

Assuran [BerK] Alpha & Oméga	voilà je me pose la question y'a-t-il un moyen de remplacer les vilains bouton de formulaire web "<input type=submit value=XXX>" le top ça serait de pouvoir les rendre transparent et remplacer par une "zone de click" et pouvoir mettre une jolie image par dessus ou en dessous j'ai essayé avec mes -10 de connaissance en CSS "<style visibility: hidden>" mais sa m'enlève la zone de click.
11/07/2003, 22h00

Furiouss Alpha & Oméga	tu peux te debrouiller avec un lien normal (image texte ...) Ou en cible tu mets un truc du style : Javascript:document.form.nomduForm.submit() Ou un truc comme ça je me souviens plus exactement et j'ai la flemme de chercher le nom exact
11/07/2003, 22h05

Assuran [BerK] Alpha & Oméga	thx (edit suite à réponse)
11/07/2003, 22h24

Marine [-I-] Alpha & Oméga	C'est fou ça. J'essai de lire ce que vous écrivez, mais je comprend absolument rien. J'ai l'impression que vous parlez Japonais et que je n'ai pas télécharger la bonne Police de caractère. Si c'est comme ça qu'on fait un site net, je réalise que je ne serais donc jamais capable d'en faire.
11/07/2003, 22h33

Assuran [BerK] Alpha & Oméga	<joke> [Japonais On] </joke> j'ai testé les solutions y'a toujours un problème même avec un border de 0 px il reste un bord :/ <em sors sont sabre en arcanium chatoyant runique et découpe sont pc >
11/07/2003, 22h40

Tann Alpha & Oméga	C'est pourtant très simple à apprendre. Il suffit de se pencher dessus pendant une après-midi et hop tu fais ça (nécessite un browser plus évolué qu'IE pour s'afficher correctement ). Tann - Qui place sa pub discrétos.
11/07/2003, 22h41

Manaloup Alpha & Oméga	Désolé d'écrire du chinois pour les non initiés mais l'informatique c'est toujours ca Ta page web c'est ? PS : http://www.tribal.firstream.net/divers/bidon.html correspond a ce que tu veut faire ? ..
11/07/2003, 22h50

Assuran [BerK] Alpha & Oméga	Citation : Provient du message de Manaloup Ta page web c'est ?en construction PS : http://www.tribal.firstream.net/divers/bidon.html correspond a ce que tu veut faire ? .. à peux près en tout cas merci du coup de m1
11/07/2003, 22h58

Assuran [BerK] Alpha & Oméga	ça marche à merveille merci beaucoup <vas pouvoir dormir cette nuit >
11/07/2003, 23h23

Serj Tankian Bagnard	Citation : Provient du message de Tann Skaya C'est pourtant très simple à apprendre. Il suffit de se pencher dessus pendant une après-midi et hop tu fais ça (nécessite un browser plus évolué qu'IE pour s'afficher correctement ). Tann - Qui place sa pub discrétos. On s'en fout de ta vie
12/07/2003, 05h22

Maarek Alpha & Oméga	Oula jamais dma vie jpourrais faire un site ^^ Ps j'adore ste photo la sur le site de tann : http://www.galanodel.org/images/photo15.jpg
12/07/2003, 11h53

Assuran [BerK] Alpha & Oméga	y à plus simple pour faire un site que se taper du code Front page, Dreamveawer <= dsl pas sur du nom et plein d'autre truc du genre... on peut même en faire sous word
12/07/2003, 12h10

vabroi Alpha & Oméga	Euh je suis un vrai nb en html, mais pourquoi pas un truc de ce genre ? : <img src=tonbouton.jpg alt=tontexted'aide width=talargeur height=tahauter onclick=tafonction(tesparametres)>
12/07/2003, 12h30

[web]les vilains bouton tout gris ^^

Connectés sur ce fil