Heritage CSS oui mais pas trop

FoxLeRenard · 17/02/2009, 14h39

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 :

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
 
* {
 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

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

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

**Macmillenium** · 17/02/2009, 15h04

Bonjour,

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

C'est pour cette raison qu'il faut savoir gérer ses font size

Voir cet article

FoxLeRenard · 17/02/2009, 15h23

Merci de ta réponse je files voir ça

Houps je réédites, bien sur je connais cette page depuis longtemps, mais elle ne régle en rien ma question

**GihefBey** · 17/02/2009, 15h50

Bonjour,

Le

Code css :

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

1
2
3
* {
  font-size: 100%;
  }

est-il utile ?

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

-

FoxLeRenard · 17/02/2009, 16h04

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 :

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

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

, qu'en penses tu ?

Code :

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

1
2
3
4
 
* {
  font-size: 100%;
  }

**Macmillenium** · 17/02/2009, 16h32

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

, 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.

FoxLeRenard · 17/02/2009, 17h51

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 :

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

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>

**GihefBey** · 17/02/2009, 18h55

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 html :

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
      <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.

-

**Erwan31** · 17/02/2009, 19h43

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?

FoxLeRenard · 17/02/2009, 20h00

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 !!

FoxLeRenard · 17/02/2009, 20h03

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 :

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

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

**Erwan31** · 17/02/2009, 23h01

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

FoxLeRenard · 17/02/2009, 23h56

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 :

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

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>

**Erwan31** · 18/02/2009, 00h20

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

FoxLeRenard · 18/02/2009, 02h07

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 :

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
<!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 :

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
* {
 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

Ne hurlez pas, ça doit pas étre trés strict comme écriture, mais surtout corrigez moi

FoxLeRenard · 19/02/2009, 17h28

up

**Erwan31** · 19/02/2009, 18h44

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.

FoxLeRenard · 19/02/2009, 19h09

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

Heritage CSS oui mais pas trop

CSS

Discussions similaires

Partager

Partager