Préciser la police et la taille

Préciser la police et la taille - HTML/CSS - Programmation

Marsh Posté le 15-11-2009 à 14:38:02    

Bonjour,

 

Voilà j'ai recuperé ce script qui affiche l'heure et la date en temps réel :http://www.supportduweb.com/script [...] -reel.html
Tout marche nickel mais apparemment le navigateur utilise la police par défaut. Comment puis-je la préciser, par exemple arial, verdana, ... et la taille ?

 

Merci d'avance

 

Edit: pendant ma recherche j'ai trouvé quelques pistes: faut-il utiliser la balise div ?

 

<DIV style="font-family:Arial" style="font-size:10px"></DIV>


Message édité par mlmoracle le 15-11-2009 à 15:12:47

---------------
-- FeedBack Vente / Achat --
Reply

Marsh Posté le 15-11-2009 à 14:38:02   

Reply

Marsh Posté le 15-11-2009 à 14:46:59    

Si tu as respecté le script, tu peux mettre ton style dans span#date_heure et faire le lien avec ta css
 
span#date_heure {font-family:Arial;font-size:10px}

Reply

Marsh Posté le 15-11-2009 à 14:51:01    

Donc concrêtement je devrai insérer la ligne  
span#date_heure {font-family:Arial;font-size:10px}
dans le body ?
 
Désolé je ne suis pas doué en javascript :)


---------------
-- FeedBack Vente / Achat --
Reply

Marsh Posté le 15-11-2009 à 14:54:53    

Non, c'est du css.
Tu devrais avoir dans ta page html un lien vers ta feuille de style externe qui contiendrait cette ligne
 
http://htmlhelp.com/reference/css/style-html.html

Reply

Marsh Posté le 15-11-2009 à 15:02:32    

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>Afficher la date et l'heure en temps réel en javascript</title>
  6.         <script type="text/javascript" src="date_heure.js"></script>
  7.     </head>
  8.     <body>
  9.             <span id="date_heure"></span>
  10.             <script type="text/javascript">window.onload = date_heure('date_heure');</script>
  11.     </body>
  12. </html>


Voici le code de la page html en question
 
Et la ligne qui indique la feuille de style externe est apparemment : <script type=\"text/javascript\" src=\"date_heure.js\"></script>
 
 
Et voici le fichier js :
 

Code :
  1. function date_heure(id)
  2. {
  3.         date = new Date;
  4.         annee = date.getFullYear();
  5.         moi = date.getMonth();
  6.         mois = new Array('Janvier', 'F&eacute;vrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Ao&ucirc;t', 'Septembre', 'Octobre', 'Novembre', 'D&eacute;cembre');
  7.         j = date.getDate();
  8.         jour = date.getDay();
  9.         jours = new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi');
  10.         h = date.getHours();
  11.         if(h<10)
  12.         {
  13.                 h = \"0\"+h;
  14.         }
  15.         m = date.getMinutes();
  16.         if(m<10)
  17.         {
  18.                 m = \"0\"+m;
  19.         }
  20.         s = date.getSeconds();
  21.         if(s<10)
  22.         {
  23.                 s = \"0\"+s;
  24.         }
  25.         resultat = 'Nous sommes le '+jours[jour]+' '+j+' '+mois[moi]+' '+annee+' il est '+h+':'+m+':'+s;
  26.         document.getElementById(id).innerHTML = resultat;
  27.         setTimeout('date_heure(\"'+id+'\";','1000');
  28.         return true;
  29. }


Je viens de jeter un coup d'œil sur ton site, mais je ne vois toujours pas comment m'y prendre ...


Message édité par mlmoracle le 15-11-2009 à 15:04:58

---------------
-- FeedBack Vente / Achat --
Reply

Marsh Posté le 15-11-2009 à 15:20:10    

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>Afficher la date et l'heure en temps réel en javascript</title>
  6. <style="text/css" media="screen">
  7. span#date_heure {font-family:Arial;font-size:10px}
  8. </style>
  9.         <script type="text/javascript" src="date_heure.js"></script>
  10.     </head>
  11.     <body>
  12.             <span id="date_heure"></span>
  13.             <script type="text/javascript">window.onload = date_heure('date_heure');</script>
  14.     </body>
  15. </html>


 
J'ai rajouté le style dans un balise en ligne.
Mais c'est mieux de faire un lien vers un fichier externe.

Reply

Marsh Posté le 15-11-2009 à 15:27:16    

Je viens d'essayer ça me donne :
 
span#date_heure {font-family:Arial;font-size:10px}  Nous sommes le Dimanche ...


---------------
-- FeedBack Vente / Achat --
Reply

Marsh Posté le 15-11-2009 à 17:05:48    

Pour préciser ce qu'indique David Boring :
 
Tu crées un répertoire script à la racine de ton site.
 
Dans ce répertoire script, tu crées le fichier style.css, qui contient :
 
Ce fichier va contenir le code suivant :
 


span#date_heure {
  font-family:Arial;
  font-size:10px;
}

Reply

Marsh Posté le 15-11-2009 à 18:36:29    

Ok merci à tous les 2.
Je viens de créer le répertoire ainsi que le fichier css contenant span#date_heure
 
Comment dois-je procéder dans mon cas afin d'appeler ce fichier style ?


---------------
-- FeedBack Vente / Achat --
Reply

Marsh Posté le 15-11-2009 à 18:58:10    

pourquoi t'as fais une liste avec les mois et les jours ???, javascript gere internationalisation, ta pas besion de ca


Message édité par stealth35 le 15-11-2009 à 21:47:44
Reply

Marsh Posté le 15-11-2009 à 18:58:10   

Reply

Marsh Posté le 15-11-2009 à 19:43:41    

Ouais j'ai oublié

 

Dans la balise HEAD tu rajoutes :

 

<link href="./script/style.css" rel="stylesheet" type="text/css" />


Message édité par Fred999 le 15-11-2009 à 19:43:51
Reply

Marsh Posté le 15-11-2009 à 19:50:08    

Ça marche nickel Fred merci pour tout :D


---------------
-- FeedBack Vente / Achat --
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed