[CSS] Petit prob avec l'attribut font-size (Résolu)

Petit prob avec l'attribut font-size (Résolu) [CSS] - HTML/CSS - Programmation

Marsh Posté le 16-09-2008 à 20:36:19    

Bonjour,
 
J'ai un fichier index.htm dans lequel un tableau à été automatiquement généré par un logiciel de découpe d'interfaces web.
 
Toutes les cellules sont de ce type là :
 

Code :
  1. <td rowspan=3 background="images/r3_c7.jpg" width=19 height=100 border=0></td>


 
Je commence mon fichier CSS par les attributs du body en mettant :
 

Code :
  1. body {
  2. color: white;
  3. background-color: #18233E;
  4. }


 
Je constate que la couleur de fond est bien prise en compte, ainsi que le texte que j'ai inséré un peu partout dans les cellules, qui s'affiche bien en [U]blanc[/U].
 
J'ajoute ensuite l'attribut font-size de la manière suivante :
 

Code :
  1. body {
  2. color: white;
  3. font-size:6px;
  4. background-color: #18233E;
  5. }


 
Mais là, rien à faire, la taille de police ne change pas.
j'ai essayer en px, en pt, en XX-small etc..., rien à faire, la taille de police reste toujours la même, la taille standard.
 
Je me dis que ça doit sûrement être un détail de #M!@#!!@ que je ne connais pas...
Quelqu'un aurait une idée ?


Message édité par Malta le 18-09-2008 à 18:50:25
Reply

Marsh Posté le 16-09-2008 à 20:36:19   

Reply

Marsh Posté le 16-09-2008 à 21:29:50    

Avec quel navigateur ?
Quel est le texte qui s'affiche? Il n'apparaît pas dans le code cité.
Quelle police ?
Les petites tailles de caractères sont-elles autorisées dans les options du navigateur ?

Reply

Marsh Posté le 16-09-2008 à 21:44:55    

Avec la dernière version de Firefox 3.0.1
Etant donné que je viens de creer les pages, le texte, c'est "bla bla bla".
 
La police est celle par défaut, je n'ai rien précisé. La seule présence de l'attribut "font" est dans le BODY du css montré ci-dessus, et qui ne fonctionne donc pas.
 
Les petites tailles autorisés ? Oui, je suppose, en tout cas je vois beaucoup de tailles différentes sur n'importe quel site que je visite...
 
Merci pour ton aide !


Message édité par Malta le 16-09-2008 à 21:45:31
Reply

Marsh Posté le 17-09-2008 à 09:26:33    

Peux-tu donner un lien vers un exemple de page qui pose problème ?

Reply

Marsh Posté le 18-09-2008 à 17:58:42    

Voici le code complet.
A titre d'info :
- la page index est quasi-vide, il n'y a qu'un tableau d'images.
- Les cellules "TDspacer" contiennent le fameux pixel transparent (1x1) nécessaire dans la découpe d'interface web.
- La balise span que je viens de rajouter pour le titre n'a aucun effet non plus...
 
La page index.htm

Code :
  1. <html>
  2. <head>
  3. <title>index.jpg</title>
  4. <link rel="stylesheet" type="text/css" href="./style.css">
  5. </head>
  7. <body>
  9. <table border=0 cellpadding=0 cellspacing=0 width=1400>
  11.   <tr>
  12.    <td class=TDspacer     width=177 height=1></td>
  13.    <td class=TDspacer     width=129 height=1></td>
  14.    <td class=TDspacer     width=140 height=1></td>
  15.    <td class=TDspacer     width=23 height=1></td>
  16.    <td class=TDspacer     width=13 height=1></td>
  17.    <td class=TDspacer     width=367 height=1></td>
  18.    <td class=TDspacer     width=19 height=1></td>
  19.    <td class=TDspacer     width=81 height=1></td>
  20.    <td class=TDspacer     width=164 height=1></td>
  21.    <td class=TDspacer     width=287 height=1></td>
  22.    <td class=TDspacer     width=1  height=1></td>
  23.   </tr>
  25.   <tr>
  26.    <td class=TDspacer rowspan=13   width=177 height=800></td>
  27.    <td      colspan=3 width=292 height=54 background="images/r1_c2.jpg"></td>
  28.    <td      colspan=2 width=380 height=54 background="images/r1_c5.jpg"></td>
  29.    <td    rowspan=2 colspan=3 width=264 height=126 background="images/r1_c7.jpg"></td>
  30.    <td class=TDspacer rowspan=13   width=287 height=800></td>
  31.    <td class=TDspacer     width=1  height=54></td>
  32.   </tr>
  34.   <tr>
  35.    <td    rowspan=3 colspan=3 width=292 height=119 background="images/r2_c2.jpg"></td>
  36.    <td   rowspan=2 colspan=2 width=380 height=108>
  38. <a href="./"><img src="images/r2_c5.jpg" border=0></a>
  40.    </td>
  41.    <td       width=1  height=72 background="images/spacer.gif"></td>
  42.   </tr>
  44.   <tr>
  45.    <td   rowspan=3   width=19 height=100 background="images/r3_c7.jpg"></td>
  46.    <td   rowspan=3 colspan=2 width=245 height=100 background="images/r3_c8.jpg" valign="top">
  48. Mon compte<br>Mon groupe<br>Info perso
  50.    </td>
  51.    <td       width=1  height=36 background="images/spacer.gif"></td>
  52.   </tr>
  54.   <tr>
  55.    <td     colspan=2 width=380 height=11 background="images/r4_c5.jpg"></td>
  56.    <td class=TDspacer     width=1  height=11></td>
  57.   </tr>
  59.   <tr>
  60.    <td     colspan=3 width=292 height=53 background="images/r5_c2.jpg"></td>
  61.    <td       width=13 height=53 background="images/r5_c5.jpg"></td>
  62.    <td       width=367 height=53 background="images/r5_c6.jpg" valign="top">
  64. <span class="title">ICI LE TITRE</span>
  66.    </td>
  67.    <td class=TDspacer     width=1  height=53></td>
  68.   </tr>
  70.   <tr>
  71.    <td   rowspan=2   width=129 height=11 background="images/r6_c2.jpg"></td>
  72.    <td   rowspan=2   width=140 height=11 background="images/r6_c3.jpg" valign="top">
  74. Menu 1<br>Menu 2
  76.    </td>
  77.    <td   rowspan=2   width=23 height=11 background="images/r6_c4.jpg"></td>
  78.    <td   rowspan=2   width=13 height=11 background="images/r6_c5.jpg"></td>
  79.    <td   rowspan=5 colspan=3 width=467 height=11 background="images/r6_c6.jpg" valign="top">
  81. Contenu : bla bla bla bla bla bla bla bla bla bla bla bla<br>bla bla bla bla bla bla bla bla bla bla bla bla<br>
  82. test<br>
  84.    </td>
  85.    <td   rowspan=5   width=164 height=11 background="images/r6_c9.jpg"></td>
  86.    <td class=TDspacer     width=1  height=11></td>
  87.   </tr>
  89.   <tr>
  90.    <td class=TDspacer     width=1  height=172></td>
  91.   </tr>
  93.   <tr>
  94.    <td       width=129 height=23 background="images/r8_c2.jpg"></td>
  95.    <td       width=140  height=23 background="images/r8_c3.jpg"></td>
  96.    <td       width=23 height=23 background="images/r8_c4.jpg"></td>
  97.    <td       width=13 height=23 background="images/r8_c5.jpg"></td>
  98.    <td class=TDspacer     width=1  height=23></td>
  99.   </tr>
  101.   <tr>
  102.    <td   rowspan=2 colspan=4 width=305 height=6 background="images/r9_c2.jpg"></td>
  103.    <td class=TDspacer     width=1  height=6></td>
  104.   </tr>
  106.   <tr>
  107.    <td class=TDspacer     width=1  height=59></td>
  108.   </tr>
  110.   <tr>
  111.    <td rowspan=2 colspan=4   width=305 height=245 background="images/r11_c2.jpg"></td>
  112.    <td   colspan=3   width=467 height=194 background="images/r11_c6.jpg"></td>
  113.    <td       width=164 height=194 background="images/r11_c9.jpg"></td>
  114.    <td class=TDspacer     width=1  height=194></td>
  115.   </tr>
  117.   <tr>
  118.    <td   colspan=3   width=467 height=51 background="images/r12_c6.jpg" valign="top" align="center">
  120. Designed & Created by Malta © in 2008
  122.    </td>
  123.    <td       width=164 height=51 background="images/r12_c9.jpg"></td>
  124.    <td class=TDspacer     width=1  height=51></td>
  125.   </tr>
  127.   <tr>
  128.    <td class=TDspacer colspan=8   width=936 height=58></td>
  129.    <td class=TDspacer     width=1  height=58></td>
  130.   </tr>
  132. </table>
  133. </body>
  134. </html>


 
Le fichier css :
 

Code :
  1. body
  2. {
  3. color: white;
  4. font-size:6px;
  5. background-color: #18233E;
  6. }
  8. TDspacer
  9. {
  10. background-image:url(images/spacer.gif);
  11. }
  13. title
  14. {
  15. font-size:14px;
  16. font-weight:bold;
  17. }
  19. a:link {
  20. text-decoration:none;
  21. color:white;
  22. }
  24. a:visited {
  25. text-decoration:none;
  26. color:white;
  27. }
  29. a:hover , a:active {
  30. text-decoration:none;
  31. color:white;
  32. }


 
Voilà, je rappelle le problème :
- Tout ce qui concerne le Font ne s'affiche pas, sauf la couleur...

Reply

Marsh Posté le 18-09-2008 à 18:39:12    

Il faut utiliser un code valide (html et css) et donc ajouter un doctype pour que ça marche.

Reply

Marsh Posté le 18-09-2008 à 18:47:37    

et ensuite éviter la mise en page en tableau. Le code que tu viens de filer date des années 1990

Reply

Marsh Posté le 18-09-2008 à 18:49:48    

euh... après un petit tour rapide sur Google, j'ai rajouter un doctype de type "transitionnal", et tout marche...
 
J'ai jamais compris à quoi servait "cette première ligne inutile qu'on voit partout"... J'ai appris quelque chose. ^^
 
Merci beaucoup Dan_A !!

Reply

Sujets relatifs:

Leave a Replay

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