High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

Changer police dans mode select html

Dernière réponse le 13 mar 2008 à 00:33:14 jguy, le 11 mar 2008 à 03:17:37 
 Signaler ce message aux modérateurs

Bonjour,

J'essaie de modifier les polices de caractères ppour chacune des lignes dans l.option select en html

Voici un exemple


<SELECT name="m_os0">
<OPTION value="Arial">Arial
<OPTION value="Calibri">Calibri
<OPTION value="Courier New">Courier New
<OPTION value="Helvetica">Helvetica
<OPTION value="Times New">Times New
<OPTION value="Papyrus">Papyrus
<OPTION value="Trebuchet MS">Trébuchet MS
<OPTION value="Autres par courriel">Autres par courriel
</SELECT>

Pour chacune des loptions je voudrais que Arial soit écrit en caractère Arial, Calibri écrit en caractère Calibri etc...

J'ai essayé de différentes façon de modifier avec <font face="Arial"> Arial </font>
et positionné de différentes façon mais je ne trouve pas la façon.

si quelqu'un peut m'aider.

Merci en avance pour le coup de pouce

Configuration: Windows XP
Internet Explorer 7.0

Meilleures réponses pour « changer police dans mode select html » dans :
[Word] Suivi des modifications VoirMicrosoft Word possède un outil très astucieux : le suivi des modifications. Il se peut que des personnes viennent corriger, modifier un document que vous venez de créer. Cependant, vous désirez savoir ce qu'ils ont modifié dans votre...
[Firefox] Personnaliser les pages web avec Greasemonkey VoirC'est quoi, GreaseMonkey ? Exemple 1 Exemple 2 XPath Fonctions utilitaires removeElement() removeAttributeOfElement() setAttributeOfElement() injectCSS() Exemple 3 Liens C'est quoi, GreaseMonkey ? GreaseMonkey est une extension...
Changer l'icône d'un dossier ou d'un raccourci VoirVous voulez changer l'icône d'un dossier sur votre bureau habituellement affiché comme ceci:   Commencez par un clic droit sur le Nouveau dossier. Allez ensuite dans Propriétés puis Personnaliser. Allez ensuite dans Changer...
Posez votre question Répondre

1

faboons, le 11 mar 2008 à 04:32:07
  • +1

Bonsoir, 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#arial {font-family: Arial;}
#calibri{ font-family: Calibri;}
#courrier {font-family: Courrier new;}
#helvetica {font-family: Helvetica;}
#times {font-family: Times New Roman;}
#papyrus {font-family: Papyrus;}
#trebuchet {font-family: Trebuchet MS;}
</style>
</head>

<body>
<select name="m_os0"> 
<option value="arial" id="arial">arial</option>
<option value="calibri" id="calibri">calibri</option>
<option value="courier new" id="courrier">courier new </option>
<option value="helvetica" id="helvetica">helvetica </option>
<option value="times new" id="times">times new </option>
<option value="papyrus" id="papyrus">papyrus </option>
<option value="trebuchet ms" id="trebuchet">tr&eacute;buchet ms </option> 
<option value="autres par courriel">autres par courriel </option>
</select>
</body>
</html>


Il faut que tu penses à fermer tes balises toutes les <options> étaient restées ouvertes.
Comme tu le vois la solution est xhtml / css.
Dans ce cas j'aiattribué un id unique à chaque option.
@ pluche.
P.S. : les lettres accentuées sont des caractères spéciaux et si tu les écris tels quels ils risquent de mal s'afficher.
Le é par exemple c'est é.
Voili voilà voilu!!!

   
Répondre à faboons

2

jguy, le 11 mar 2008 à 05:37:37

Merci pour la réponse

Je suis débutant et j'ai essayé ce que tu m'a envoyé et ça ne fonctionne pas.

J'ai inséré style dans mon head et dans body j'ai placé select .... en fermant mes balises et en y incluant les id.

Qu'est-ce je n'ai pas de correct?

Merci

   
Répondre à jguy

3

faboons, le 11 mar 2008 à 10:26:30

Salut,

je ne sais pas quoi te dire quand je copie/colle le code chez moi tout fonctionne très bien, les polices s'affichent, poste ton code pour voir stp, car si tu as fait tout ce que tu as dit il n'y a pas de raison que ça ne marche pas.

   
Répondre à faboons

4

jguy, le 11 mar 2008 à 11:56:12

Voici le script au complet

il est fonctionnelmais je dois finir de compléter mes fonctions et c'est pourquoi que dans certaine validation il manque des informations mais rien pour affecter le roullement

<HTML>



<HEAD>
<TITLE>Traitement du formulaire</TITLE>


<style>
#arial {font-family: Arial;}
#calibri{ font-family: Calibri;}
#courrier {font-family: Courrier new;}
#helvetica {font-family: Helvetica;}
#times {font-family: Times New Roman;}
#papyrus {font-family: Papyrus;}
#trebuchet {font-family: Trebuchet MS;}
</style>




</HEAD>

<SCRIPT language="javascript">
<!--


var toucheDesac=255; //la touche 255 est inusitée ; touche enter = 13
var focusSuivant="nom"; // le premier champ de formulaire ou n'importe quel id
var gk=window.Event?1:0;

function toucheenter(e) {
var touche=gk?e.which:window.event.keyCode; //pour compatibilité FF IE
if (touche == toucheDesac){
document.getElementById(focusSuivant).focus();
return false;
}
}
document.onkeydown = toucheenter;



function valide_quantite() {

var m_vente_total=0.00;
var m_prix_unitaire=0;
var m_qty_vente=0;

if (document.form1.m_quantity.value < 100 )
{
alert ("Quantités minimum requise est de 100");
document.form1.m_quantity.value="";

}
else if (document.form1.m_quantity.value >= 100 && document.form1.m_quantity.value < 250)
{
m_prix_unitaire=1.25;
m_qty_vente=document.form1.m_quantity.value;
m_vente_total=(m_prix_unitaire*m_qty_vente);

if (confirm("Voulez-vous poursuivre votre commande \n Total de la vente $"+ m_vente_total+""))
{
document.form1.amount.value=1.25;
document.form1.quantity.value=document.form1.m_quantity.value;
document.form1.os0.value=document.form1.m_os0.value;
document.form1.os1.value=document.form1.m_os1.value;

alert ("Votre commande sera finalisée \n sur le site sécurisé \n Paypal");

document.form1.method='post';
document.form1.action='https://www.paypal.com/cgi-bin/webscr';
document.form1.submit();
document.form1.enctype='text/plain';
document.form1.method='post';
document.form1.action='mailto:jg.com?subject=commande';
document.form1.submit();
}
else
{
alert("Commande non complétée \n Merci!");
document.form1.m_quantity.value="";
}

}

else if (document.form1.m_quantity.value >= 250 && document.form1.m_quantity.value < 500)
{
document.form1.amount.value="1.15";
document.form1.quantity.value=document.form1.m_quantity.value;
document.form1.os0.value=document.form1.os0.m_value;
document.form1.os1.value=document.form1.os1.m_value;

alert ("Prix unitaire du crayon sera\n\n $1,15");
document.form1.submit();
}

else if (document.form1.m_quantity.value >= 500 && document.form1.m_quantity.value < 750)
{
document.form1.amount.value="1.05";
document.form1.quantity.value=document.form1.m_quantity.value;
document.form1.os0.value=document.form1.m_os0.value;
document.form1.os1.value=document.form1.m_os1.value;

alert ("Prix unitaire du crayon sera\n\n $1,05");
document.form1.submit();
}
else if (document.form1.m_quantity.value >= 750 && document.form1.m_quantity.value < 1000)
{
document.form1.amount.value="1.00";
document.form1.quantity.value=document.form1.m_quantity.value;
document.form1.os0.value=document.form1.m_os0.value;
document.form1.os1.value=document.form1.m_os1.value;

alert ("Prix unitaire du crayon sera\n\n $1,00");
document.form1.submit();
}
else if (document.form1.m_quantity.value >= 1000)
{
document.form1.amount.value="0.95";
document.form1.quantity.value=document.form1.m_quantity.value;
document.form1.os0.value=document.form1.m_os0.value;
document.form1.os1.value=document.form1.m_os1.value;

alert ("Prix unitaire du crayon sera\n\n $,95");
document.form1.submit();
}
}
//-->
</SCRIPT>

<BODY>
<FORM name="form1">


<TABLE border="2" bordercolordark="#966E46" bordercolorlight="#EDDCB3">
<CAPTION><H3><FONT color="#966e46">CHOIX DES OPTIONS </FONT> </H3></CAPTION>
<TR>
<TD ROWSPAN=5>

<TD><FONT color="#966e46">Quantités : </FONT>
<TD COLSPAN=2> <input type="text" name="m_quantity" id="m_quantity"
onFocus= "toucheDesac='13';focusSuivant='m_os0';" onBlur="toucheDesac='255';"
size="6"> </TR>
<TR>



<input type="hidden" name="item_name" value="Le Tendance">

<input type="hidden" name="quantity" value="" >
<input type="hidden" name="amount" value="">
<input type="hidden" name="on0" value="Police" >
<input type="hidden" name="os0" value="" >
<input type="hidden" name="on1" value="Couleur d'impression">
<input type="hidden" name="os1" value="">

<input type="hidden" name="no_shipping" value="0">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="CAD">
<input type="hidden" name="lc" value="CA">
<input type="hidden" name="bn" value="PP-BuyNowBF">



<TD> <FONT color="#966e46">Police de caractères : </FONT>
<TD align=left>

<select name="m_os0">
<option value="arial" id="arial">arial</option>
<option value="calibri" id="calibri">calibri</option>
<option value="courier new" id="courrier">courier new </option>
<option value="helvetica" id="helvetica">helvetica </option>
<option value="times new" id="times">times new </option>
<option value="papyrus" id="papyrus">papyrus </option>
<option value="trebuchet ms" id="trebuchet">trébuchet ms </option>
<option value="autres par courriel">autres par courriel </option>
</select>


</TR>
<TR>
<TD><FONT color="#966e46"> Couleur d'impression : </FONT>
<TD align=left>
<SELECT name="m_os1">
<OPTION value="Blanc">Blanc</option>
<OPTION value="Noir">Noir</option>
<OPTION value="Rouge">Rouge</option>
<OPTION value="Or">Or</option>
<OPTION value="Bleu">Bleu</option>
<OPTION value="Orange">Orange</option>
</SELECT>
</TR>
<TR><TR><TR>
<TD align=left>
<TD><FONT color="#966e46">3 lignes maximum</FONT><br>
<FONT color="#966e46"> 15 caractères par ligne </FONT><TD></br>
<TEXTAREA type="text" name="descriptions" rows=3 cols=15>
Entrez ici votre inscription ...
</TEXTAREA>
</TR>
<TR><TR>
<TD align="center" colspan=4>
<INPUT type="button" Value="Commander" name="valider" title="Faite votre paiement avec Paypal -c'est rapide , gratuit et sécuritaire" onClick="valide_quantite (this.form)"> <INPUT type="reset" value="Rétablir" name="raz">
</TD>
</TR>



</TABLE>
</form>


</BODY>



Merci de ton aide

   
Répondre à jguy

5

faboons, le 11 mar 2008 à 21:11:34

Re,

en fait sur firefox ça marche très bien mais sur IE ça ne marche pas.
Tu peux spécifier une couleur et un arrière-plan mais je t'avoue que là je sèche pour la police.

[url=http://img225.imageshack.us/my.php?image=sanstitre1on7.­jpg][img=http://img225.imageshack.us/img225/4873/sanstitre1o­n7.th.jpg]/url

selon moi, IE n'est pas (encore?!) capable d'interpréter ce style de police dans la balise <option>.

@ pluche.

   
Répondre à faboons

6

jguy, le 12 mar 2008 à 00:27:05

Merci de ton aide mais est-ce j'avais bien inscrit les informations de ton script?


Je vais essayer ton script mais pour les couleurs car j'ai aussi un choix de couleur.


Si tu as encore de bonne idées je suis à l'écoute


Encore une fois merci

   
Répondre à jguy

7

magichit, le 12 mar 2008 à 00:51:52

à la place de
<style>

mettre :

<style type="text/css" rel="stylesheet" >

et ça devrait marcher. Par contre il risuqe d'avoir des problèmes si l'internaute n'a pas la police indiquée sur son ordinateur et qui risque de ne rien afficher du tout. Ajouter une police de remplacement peut être utile en général mais dans ton cas ça dénature un peu le contenu.

   
Répondre à magichit

8

jguy, le 12 mar 2008 à 02:07:38

Merci

J'ai remplacé <STYLE> par <style type="text/css" rel="stylesheet" > et sur firefox cela fonctionne mais pas IE

C'est vraiment un problème avec IE.

Merci encore une fois . si tu as d'autres suggestions ne te gêne surtout pas.

   
Répondre à jguy

9

Alain_42, le 12 mar 2008 à 10:28:47

Bonjour,

Lorsque le nom de la police est sur plusieurs mots il faut mettre des " 


Font-Family: "Times New Roman", Serif;


Vas voir le site:

http://stylescss.free.fr/font-family.php

Et tu peux mettre aussi en deuxième position pour chacun une police "de secours" identique pour toutes, si l'internaute n'a pas la police 1 il aura au moins qq chose d'affiché.

   
Répondre à Alain_42

11

jguy, le 13 mar 2008 à 00:28:56

Bonjour,

Merci de l'information et du lien mais malgré tout cela ne fonctionne pas sur internet explorer contrairement a firefox

Il y a surement une façon de faire mais je cherche encore


si tu as d'autres suggestions ne te gêne surtout pas

merci

   
Répondre à jguy

10

faboons, le 12 mar 2008 à 12:31:39

Salut,

pour les couleurs de police ne refais pas toute la manip : 

<style  type="text/css" rel="stylesheet" > 
#arial {font-family: Arial; background-color:codedetacouleur; color:couleurdetapolice;} 
...
...
</style>


Et après tu fais pareil pour chacun.
@ pluche.

   
Répondre à faboons

12

 jguy, le 13 mar 2008 à 00:33:14

Merci pour l'infirmation.

Concernant les polices de carartères cela ne fonctionne sur IE mais dans mon script j'ai aussi un select pour le choix de couleur et pour la couleur de la police avec un ID cela fonctionne très sur ID



Merci

   
Répondre à jguy
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net