Heritage CSS oui mais pas trop

Version imprimable

Bonjour,

Je portes pleinte pour habus d'héritage dans la taille de mes fontes,

D'abord ma feuille CSS est orgnisée avec un début comme cela,
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 * { font-size: 100%; } html { height: 100%; font-size: 100%; } BODY { background-color: #557BAC; font-family : Verdana,Geneva,Arial,Helvetica,sans-serif; font-size : 62.5%; color : #FFFFFF; margin-left: 0; margin-right: 0; } DIV { font-family : Verdana,Myranda,Myriad,sans-serif; color : #FFFFFF; }
62.5% c' est le conseil reçu ici je crois pour que mes fontes soient ensuite définies en 1.2em pour 12 pixels !!!

Alors voila ma question lorsque j'ais des balises avec des class trop imbriquées, la taille des fontes devient nimporte quoi 8O

Même en utilisant !important ça ne marche pas :aie:

Comment procédez vous et quelle aide ou conseil pour mon cas qui doit étre banal :oops:

17/02/2009, 15h04
Macmillenium

Bonjour,

Citation:

Envoyé par FoxLeRenard

Alors voila ma question lorsque j'ais des balises avec des class trop imbriquées, la taille des fontes devient nimporte quoi 8O

C'est pour cette raison qu'il faut savoir gérer ses font size ;)
Voir cet article
17/02/2009, 15h23
FoxLeRenard

Merci de ta réponse je files voir ça 8O

Houps je réédites, bien sur je connais cette page depuis longtemps, mais elle ne régle en rien ma question :oops:
17/02/2009, 15h50
GihefBey
Bonjour,

Le
Code:

1 2 3 * { font-size: 100%; }
est-il utile ?

Les class trop imbriquées redéfinissent-elles des tailles de texte ?

-
17/02/2009, 16h04
FoxLeRenard
Citation:

Envoyé par GihefBey

Bonjour,
Les class trop imbriquées redéfinissent-elles des tailles de texte ?

Merci de ta réponse.
trés peut de mes class employent font-size
quand j'en ais besoins j'utilises toujours
Code:

1 2 3 4 5 <span class=LaFonte_2_Coul1> xxxxxxxxxxxxxx </span> // AVEC DANS LE CSS span.LaFonte_2_Coul1 {color: #FFFFFF;font-size : 1.30em !important;}
Ta question sur ce point , mystére, j'ais trouvé ça dans les TOPOS qui défendaient cette théorie du TOUT EN "EM" , ils disent que ça fait une forme de reset, pour certains navigateurs 8O , qu'en penses tu ?
Code:

1 2 3 4 * { font-size: 100%; }
17/02/2009, 16h32
Macmillenium

Citation:

Envoyé par FoxLeRenard

Ta question sur ce point , mystére, j'ais trouvé ça dans les TOPOS qui défendaient cette théorie du TOUT EN "EM" , ils disent que ça fait une forme de reset, pour certains navigateurs 8O , qu'en penses tu ?

Le reset est déjà fait au niveau du 62.5% = 10px pour la quasi totalité des navigateurs, le calcul des valeurs en em se fait à partir de cette valeur.

Évite aussi d'utiliser la règle !important (qui donne la priorité à une propriété au cas d'héritage) pour rien.

Merci de ta réponse,
pour le reset, il est recommandé pour tuer la feuille de style par défault de chaque navigateur, d'aprés ce que j'ais lu,
mais bon tu as raison je vais le virer.

Pour ce qui est de !important, c' est le fond de ma question

J'ais sur de trés nombreuses pages une structure comme cela
Code:

1 2 3 4 5 6 <body> <div avec une class qui remet font-siez a 1.4em> <table class"qui a font-size : 1.2em !important "><tr><td class"qui a font-size : 1.2em !important " > // puis quand besoins <span class=LaFonte_2_Coul1> xxxxxxxxxxxxxx </span>

As-tu compris que l'héritage fonctionne que tu aies ou non utilisé un reset ?

Dans tous les cas, 1.2em de 1.2em de 1.4em représentent un pourcentage de pourcentage de la taille d'origine 1.4em.
C'est comme si tu appliquais un 120% à chaque fois.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
      <div style="font-size : 140%;">
      1,4
        <table style="font-size : 120%;">
        <tr>
        <td>1,2
        </tr>
        <tr>
        <td style="font-size : 120%;">1,2
        </tr>
        </table>
        1,4
      </div>
      <div style="font-size : 1.4em;">
      1,4
        <table style="font-size : 1.2em;">
        <tr>
        <td>1,2
        </tr>
        <tr>
        <td style="font-size : 1.2em;">1,2
        </tr>
        </table>
        1,4
      </div>

devrait rendre la même chose.

-

17/02/2009, 19h43
Erwan31

Bonjour,
pour commencer il est recommandé de ne pas descendre en dessous de 75% pour la taille initial pour éviter d'avoir des corps de texte trop petits selon la config utilisateur. Je te conseil d'utiliser la valeur précise de 77%, celle-ci évitant des différence d'arrondis selon le navigateur, en particulier Opera.

Si l'héritage n'opère pas dans ton table, c'est que tu es en mode Quirks
(absence de doctype en haut de ton doc, doctype HTML4 transitionnal incomplet...)
Est ce que c'est ton cas?
17/02/2009, 20h00
FoxLeRenard

Merci, mille fois ;)
Je comprends bien ce que tu m'explique, mais alors ça augmente considérablement mes définitions de class ....

Moi j'aurais voulu que une classe donnée dans un de mes span me donnent
toujour la même taille Pff... quelle galére cette méthode !!
17/02/2009, 20h03
FoxLeRenard
Citation:

Envoyé par Erwan31

Bonjour,
pour commencer il est recommandé de ne pas descendre en dessous de 75% pour la taille initial pour éviter d'avoir des corps de texte trop petits selon la config utilisateur. Je te conseil d'utiliser la valeur précise de 77%, celle-ci évitant des différence d'arrondis selon le navigateur, en particulier Opera.

Si l'héritage n'opère pas dans ton table, c'est que tu es en mode Quirks
(absence de doctype en haut de ton doc, doctype HTML4 transitionnal incomplet...)
Est ce que c'est ton cas?

Merci pour ton conseil des 77%

si non je suis
Code:

1 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
par contre est-ce que ma syntaxe de CSS est bonne pfff... pas sur :oops:
17/02/2009, 23h01
Erwan31

Pour commencer il faudrait que tu expliques précisément ce que tu entends par
"la taille des fontes devient nimporte quoi" ensuite dans ce cas il faudrait que tu fournisse au pire la totalité des code XHTML/CSS ;)

Citation:

Envoyé par Erwan31

Pour commencer il faudrait que tu expliques précisément ce que tu entends par
"la taille des fontes devient nimporte quoi" ensuite dans ce cas il faudrait que tu fournisse au pire la totalité des code XHTML/CSS ;)

Bien alors je veux bien faire un XHTML et son CSS qui représente bien le cas typique de ce que je décrit, mais déjas, tu comprends bien que ce qui me travailles, c'est le fait qu'en reprenant mon exemple symbolique,

les bbbbbbbbbbbbb, aaaaaaaaaaaaaa et xxxxxxxxxxxxxxxxx n'auront pas la même taille,
alors que j'avais le sentiment en 98 / 99 que c' était plus simple! on voulait une taille de fonte on créé un span avec sa classe et HOP ça marchait.
Code:

1 2 3 4 5 6 7 8 <body> <span class=LaFonte_2_Coul1> bbbbbbbbbbbbbbbb </span> <div avec une class qui remet font-siez a 1.4em> <br /><span class=LaFonte_2_Coul1> aaaaaaaaaaaaaaaaaaaa </span> <table class"qui a font-size : 1.2em !important "><tr><td class"qui a font-size : 1.2em !important " > // puis quand besoins <span class=LaFonte_2_Coul1> xxxxxxxxxxxxxx </span>

18/02/2009, 00h20
Erwan31

Désolé mais ton code et tes tentative d'éclaircissement n'aident pas beaucoup...

Citation:

Envoyé par Erwan31

Désolé mais ton code et tes tentative d'éclaircissement n'aident pas beaucoup...

Voici les codes de mon html type

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"  lang="fr">
<head>
<TITLE>Le web</TITLE>
<meta http-equiv="content-Type" content="text/html;charset=iso-8859-1">
<meta name='keywords' content=''>
<meta name='description' content=''>
<meta name="ROBOTS" content="all">
<meta http-equiv="content-language" content="fr, en">
<meta name="expires" content="never">
<meta name="rating" content="general">
<meta name="revisit-after" content="30 days">
<link rel='stylesheet' href='exemple.css' type='text/css' />
</head>
<body>
<br />  <p align=center>
<span class="LaFonte_3_Coul1"> visitez notre site pour mieux nous connaître.</span>
<br /><a href="#" class="LesA14" >visitez notre site</a><br />
</p><br /> <br /> 
<div  class='FenetreDiv'>
  <p align=center><br /> 
  <span class="LaFonte_3_Coul1"> visitez notre site pour mieux nous connaître.</span>
<br /><a href="#" class="LesA14" >visitez notre site</a><br /><br /> 
</p>
<br /> <br /> 
<table><tr><td class='FenetreDiv'>      
<p align=center>
<span class="LaFonte_3_Coul1"> visitez notre site pour mieux nous connaître.</span>
<br /><a href="#" class="LesA14" >visitez notre site</a><br />
</p>
<br />
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td></tr></table></div>
</body></html>

Et de mon CSS

Code:

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
* {
 font-size: 100%;
}
html {
 height: 100%;
 font-size: 100%;
}
BODY {
       background-color: #557BAC;
       font-family : Verdana,Myranda,Myriad,Geneva,Arial,Helvetica,sans-serif;
       font-size : 75%;
       color :  #FFFFFF; 
       margin-left: 0; 
       margin-right: 0;
}
 
DIV {
        font-family : Verdana,Myranda,Myriad,Geneva,Arial,Helvetica,sans-serif;
        color :  #FFFFFF; 
}
DIV.FenetreDiv {
       font-family : Verdana,Myranda,Myriad,Geneva,Arial,Helvetica,sans-serif;
       font-size : 1.2em ;
       color :  #FFFFFF; 
       Text-Align: justify;
}
 
td.FenetreDiv {
       font-family : Verdana,Myranda,Myriad,Geneva,Arial,Helvetica,sans-serif;
       font-size : 1.2em;       
       color :  #FFFFFF; 
       Text-Align: justify;
}
 
a.LesA14 { font-family : Verdana,Myranda,Myriad,Geneva,Arial,Helvetica,sans-serif; font-size : 1.6em; color :  #FFFFFF; text-decoration: none;}
a.LesA14:link { font-family : Verdana,Myranda,Myriad,Geneva,Arial,Helvetica,sans-serif; font-size : 1.6em; color :  #FFFFFF; text-decoration: none;}
a.LesA14:hover { font-family : Verdana,Myranda,Myriad,Geneva,Arial,Helvetica,sans-serif; font-size : 1.6em; color :  #FF9999;text-decoration: none;}
a.LesA14:visited {}
span.LaFonte_3_Coul1 {color: #FFFFFF;font-size : 1.60em ;}

Voila ce qui illustre ce que j'essayais d'expliquer :oops:
Ne hurlez pas, ça doit pas étre trés strict comme écriture, mais surtout corrigez moi :oops:

19/02/2009, 17h28
FoxLeRenard

up :oops:
19/02/2009, 18h44
Erwan31

Les 1.2em est égale à 120% de la valeur calculée du corps de la police au niveau du bloc paren, ne pas oublier que la propriété font-size est une propriété héritée.
19/02/2009, 19h09
FoxLeRenard

Citation:

Envoyé par Erwan31

Les 1.2em est égale à 120% de la valeur calculée du corps de la police au niveau du bloc paren, ne pas oublier que la propriété font-size est une propriété héritée.

OK et merci, ce qui m'embête un peut, mais je préféres rester dans les normes :D