28172 sujets

CSS et mise en forme, CSS3

Taille des polices, utilisation des em et rem

Bonjour,

Je viens de refaire ma feuille css en utilisant des rem, mais voici le résultat.

www.cahue.net

Je suppose que c'est du à l'utilisation successive de taille em dans des div imbriqués.
J'ai lu qu'il fallait utiliser des rem pour éviter ce problème.
Comment procéder?
Merci

/** --- RESET MINIMUM --- */

html {
	font-size: 100%; 
}

	html, body,
	h1, h2, h3, h4, h5, h6,
	p, blockquote, pre,
	dl, dt, dd,
	ul, ol, li,
	form, fieldset,th, td {
		margin: 0;
		padding: 0;
}

body {
	background-color: #e5e5e5;
	color: #444;
	font-family: Cambria, Georgia, "Times New Roman", Times, serif;	
	font-size: 0.75%; 	
} 
html>body {
	font-size: 12px; 
}
 
 p {
	font-size: 1em;
	line-height: 1.5;
	margin-top: 1.5em;
	margin-bottom: 1.5em; 
	max-width: 360px;	
}

/** ---  TITRES --- */

h1 {
	font-size: 2em;			
	line-height: 0.75 ;		
	margin-top: 0;			
	margin-bottom: 0.75em;	
}

h2 {
	font-size: 1.5em;		
	line-height: 1;		
	margin-top: 1 em;		
	margin-bottom: 1em;		
}

h3 {
	font-size: 1.1667em;	
	line-height: 1.2857;	
	margin-top: 1.2857em;	
	margin-bottom: 1.2857em;
}

h4 {
	font-size: 1em;			
	line-height: 1.5;		
	margin-top: 1.5em;		
	margin-bottom: 1.5em;	
}

h5 {
	font-size: 0.8333em;	
	line-height: 1.8;		
	margin-top: 1.8em;		
	margin-bottom: 1.8em;	
}

h6 {
	font-size: 0.6666em;	
	line-height: 2.25;		
	margin-top: 2.25em;		
	margin-bottom: 2.25em;	
}
cpalo a écrit :
Je viens de refaire ma feuille css en utilisant des rem, mais voici le résultat.
.
Vous voulez parlez de "em" au vue de votre CSS.

Sinon pour l'utilisation des "rem" il faut prendre en compte quelques contraintes : can I use rem

Vous avez créé un véritable imbroglio avec vos déclarations font-size. Sur Firefox on ne peut lire votre texte dont la taille avoisine 0,6px.
upload/42874-Capturedec.png

Avec l'extension Fontfinder (Firefox) vous pourrez savoir où vous en êtes en repartant de 0.
J'emploie des em mais j'ai vu que les pourcentages se cumulaient avec le phénomène des cascades.
D'où l'utilisation du rem éventuellement ( mais comment l'utiliser? en remplaçant toutes les écritures em par rem?)
Ou sinon comment empêcher cet héritage.
Très utile votre lien vers la page des navigateurs compatibles.
Modifié par cpalo (29 Dec 2012 - 12:55)
Merci...
Voilà enfin l'article que je cherchais et qui m'apporte les réponses qui me manquaient.
Je vais donc pouvoir avancer.
Je vous tiens au courant

Cordialement
En attendant de refaire mon css avec des rem comme décrit dans l'article ( surtout que c'est devenu relativement compatible avec l'ensemble des navigateurs), je voudrai etre sur d'avoir bien compris le problème de l'heritage:
Exemple:

<div ="content">
        <h2>Titre2</h2>
        <h3>Titre3</h3>
              <div="articles">
                   <h3>Titre3</h3>
              </div>
              <div="commentaires">
                   <h3>Titre3</h3>
              </div>
</div>
<div>


          h2 {font-size: 1.5em;	}	
          h3 {font-size: 1.17em;	}


Cela signifie que le h3 de articles est 1.17 le h3 de content.
D'où mon questionnement.
Si on englobe dans un container global afin de donner une largeur fixe et centrée au site, cela veut dire que le premier div est pareillement modifié.
Dans notre exemple le h2 de content ne correspondrait donc pas à 1.5 mais à 1. * 1.5 ?

Cordialement
Bonnes fêtes de fin d'année
la solution vers laquelle je me dirige:
A chaque création d'une nouvelle div, j'entre cette règle dans le css

/* --- supprime l'héritage --- */
	#content h1, h2, h3, h4, h5, h6 , p {
		font-size: 1em;			
		line-height: 1 ;		
		margin: 1 0;
	}
Sujet clos
Aller à