police taille fixe

**revline** · 30/09/2006, 12h05

Bonjour,
Je suis vraiment débutante en javascript.
Je n'arrive pas à comprendre comment formater un texte en lui donnant une taille fixe, exemple du verdana 9, comme le permet un style ccs. Peut-on utiliser une feuille de style externe ?
Cela fait des jours que j'essaie d'écrire : document.write avec un style de police que l'on ne peut pas agrandir si l'utilisateur choisit une taille d'affichage plus grande.
Merci beaucoup de votre aide.

Marie-Line

**lalouve** · 30/09/2006, 12h57

Salut, je pense qu'il s'agit plus d'un problème de CSS que de javascript, même si tu utilises document.write().
Je te conseille de mettre ton texte dans une balise <p></p> à laquelle tu ajoute une classe qui met ton texte en forme.

Code :

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

1
2
 
document.write("<p class=\"texteNormal\">Ton texte</p>");

et le style CSS dans le <head> de ta page (ou dans une feuille de style séparée si tu ne veux pqs recopier ce code sur chaqune des pages qui utiliseront ce type de mise en forme pour du texte).

Code :

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

1
2
3
4
5
6
 
<style type=text/css">
.texteNormal{
  font-family:"Verdana", "Arial";
  font-size:9px}
</style>

**revline** · 30/09/2006, 18h32

Merci de m'avoir donné une réponse si rapidement, mais ce n'est pas vraiment ce que je veux faire.
Je m'explique : je veux écrire sur ma page un menu qui sera sur une feuille externe .js (parce que je lui ajoute une ligne par jour, et que je ne veux pas tous les jours modifier les 30 pages du mois)
Le mieux est peut-être que je donne l'adresse des pages en question : http://linepassions.free.fr/Photo-du-jour/10/10-01.html
Il s'agit du tableau à gauche, demain j'ajouterai une feuille nommée 10-02 + le nom de la photo, et je voudrais que ça s'ajoute sur les feuilles 10-01 et 10-02, donc un fichier externe javascript me semble indispensable.
J'ai par ailleurs une feuille de style .css.
Puis-je m'en servir sur la feuille .js ou pas ? et si oui, ce que j'espère, je ne sais pas comment faire ?
Merci encore.
Marie-Line

**lalouve** · 01/10/2006, 13h25

Re,

Ok j'ai compris.
En utilisant les codes ci-après, pour ajouter une nouvelle page au menu de gauche tu n'auras qu'à modifier la ligne correspondante dans le tableau "pages" de la page tapage.js

tapage.js :

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
43
44
 
<!--
function drawTable(){
var pages = [
	["Mûres sauvages", "10-01.html"], // format : ["titre", "adresse page"],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""],
	["", ""]];
 
var table = '<table border="0" cellpadding="0" cellspacing="0" width="159"><tbody>'
for(var i=0; i<pages.length; i++){
	table += '<tr><td class="MiniSt"><a href="'+pages[i][1]+'">'+(i+1)+'. '+pages[i][0]+'</a></td></tr>';
}
table += '</tbody></table>';
document.getElementById("pagesList").innerHTML = table;
}
//-->

et dans chacune de tes pages tu ajoutes à la fin du head :

Code :

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

1
2
3
4
5
 
<script type="text/javascript" src="tapage.js"></script>
<script type="text/javascript">
onload = function(){ drawTable(); };
</script>

ensuite tu modifies la table où se trouve les liens pour celle-ci :

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
 
<table align="center" border="0" cellpadding="0" cellspacing="0" width="159">
  <tbody>
  <tr>
    <td class="MiniSt" width="159">
      <table border="0" cellpadding="0" cellspacing="1" width="100%">
        <tbody>
        <tr> 
          <td height="24" width="20"><div class="MenuBoutonFleches"><a href="../09/09-01.html">«</a></div></td>
          <td><div class="MenuBoutonMois"><font color="#999999">Octobre 2006</font></div></td>
          <td width="20"><div class="MenuBoutonFleches"><a href="../11/11-01.html">»</a></div></td>
        </tr>
        </tbody>
      </table>
    </td>
  </tr>
  <tr>
    <td><div id="pagesList"></div></td> <!-- Cette ligne remplace toutes les autres du menu -->
  </tr>
  </tbody>
</table>

Tu peux si tu le souhaites utiliser une feuille de style pour modifier l'apparence des liens car ceux-ci sont inclus dans des td auxquels la classe MiniSt a été attribuée.
ex pour changer la couleur des liens ajoutes aux styles de ta page :

Code :

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

1
2
3
 
/*change la couleur des liens*/
.MiniSt a{color:#f00}

@+

**revline** · 01/10/2006, 19h57

Et ça marche !
Merci mille fois, la Louve !
Je n'en attendais pas tant !
et je m'étonne chaque fois de la gentillesse de tous ceux qui font le web !!! L'entr'aide est étonnante.
Je vais bien entendu décortiquer le code, car j'adore apprendre.
Bonne soirée à tous.

**lalouve** · 02/10/2006, 03h16

de rien revline, tant d'enthousiasme vaut largement ce petit coup de pouce!
Si tu as d'autres questions n'hésites pas, ce forum est là pour ça.

++

police taille fixe

JavaScript

Vue hybride

Discussions similaires

Partager

Partager