taille des polices et css

[Dinostrate]

Bonsoir,

Je me suis lancé récemment dans les CSS. Tant que faire, j'essaie tout de suite de me lancer dans la relativité (pas celle d'Einstein, celle de la présentation des pages )

A cette occasion, je m'aperçois que Ie est assez en retrait par rapport aux autres navigateurs (Netscape, opéra et Mozilla), et bien mieux que je ne pouvais le constater en tant qu'utilisateur. Certaines fonctions qui m'intéressent existent chez les autres et pas chez Ie

Déjà, je suis géné par la manière dont Ie interprête la taille des polices. Chez Ie 6 et Opéra, x-small par exemple, correspond plutôt selon moi à un small. Par contre, chez Mozilla et Netsc. j'ai bien un vrai x-small.

Bon, ce n'est pas la catastrophe, mais si quelqu'un a une idée ou une solution ?

J'en profite pour poser une deuxième question : est il possible de manière simple de ne sauter qu'une 1/2 ligne au lieu d'une lors d'un retour de chariot </p> quoi... ?

Dinostrate

[Fight]

Bonjour,

oui quand on utilise les x-small etc. c'est le navigateur qui décide de la taille à laquelle ça correspond (il me semble d'ailleurs que dans la doc du W3C les préconisations ont changé). Il faut utiliser les px si tu veux une taille défini...

Pour les paragraphes il suffit de définir la margge dans tes styles :

P {

margin: 0;

}

par exemple.

[Fruge]

Bonsoir,

J'avais trouvé un truc qui permettait de corriger ca, et ca ressemble à ca :

body {  font-size: 12px; }

body #Cont {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body #Cont {
  font-size: small;
}

L'idée étant de fixer la police à x-small dans certain navigateurs, et à small dans d'autres....

Le seul problème, c'est que je n'arrive plus à retrouver le site qui présentait en détail (avec toutes les explications )...

Je vais re-chercher !

Fruge.

[Monique]

Bonjour ,

Justement, j'ai donné la référence vers un bon article à ce sujet dans la discussion sur Les critères d'accessibilité d'un site.

Les unités proportionnelles se détachent de tous les défauts et laissant la responsabilité à l'élément parent d'avoir une taille réaliste. La taille référence pour le premier élément étant déterminée dans la configuration du navigateur. Ça serait une solution idéale si ces configurations étaient bien faites. En pratique si les mal-voyants pensent à la modifier, l'essentiel des gens laissent la configuration par défaut. Le problème est que ces configurations par défaut ne sont pas toujours adaptées, celle du navigateur le plus répandue contient par exemple une taille référence exagérément grande, ce qui fausse tout le jeu.

... et s'il n'y avait que cela que le navigateur le plus répandu fait de travers

Pour modifier l'espacement entre les paragraphes, je propose plutôt de ne modifier que la marge du bas. Par exemple

p {
	margin-bottom: -1.2em;
	font-size: 0.8em;
}

En modifiant margin, on agit sur les 4 côtés et cela pourrait créer de mauvaises surprises.

[Dinostrate]

OK merci pour vos réponses. Je vais essayer vos suggestions.

Fight > Si j'utilise px, le problème, c'est que je perds la proportionalité.

Cette question de proportionalité, ce n'est pas tout simple avec ces incompatibilités entre navigateurs.

Je n'ai pas non plus trouvé le moyen de disposer correctement plusieurs images en conservant la relativité de leur emplacement les unes par rapport aux autres compte tenu de la dimension de la fenêtre du navigateur. Mais je reviendrai plus précisément sur cette question.

Dino

[Dan]

Fight > Si j'utilise px, le problème, c'est que je perds la proportionalité.

Salut Dino,

Fais ce que Monique te conseille et définis les tailles de caractères en "em" .... tu garderas la proportionalité dans ce cas.

Dan

PS pour Fruge: le "truc" auquel tu fais allusion et qui permet des css selon les navigateurs est en fait le "Tantek Celik's hack" que l'on trouve sur tantek.com : http://www.tantek.com/CSS/Examples/boxmodelhack.html

Il y a un lien en bas de page vers une traduction française.

[Monique]

Il est même possible d'utiliser les valeurs en em pour les images.

A voir et à tester, cette page surprenante : Elastic Design Demonstration

Ce style est appliqué à la photo du paragraphe "Elastic image"

.image {
	width: 30em;
	height: 15em;
	margin: 0 2em 1em 2em;
	border: 1px solid #ccc;
}

[Fruge]

Le seul problème, c'est que je n'arrive plus à retrouver le site qui présentait en détail (avec toutes les explications   )...

Je vais re-chercher !

Yo !

Je viens de trouver, c'est là :

http://docs.mandragor.org/files/Web_standa..._fr/day_26.html

--> le code, plus les explications détaillées...

Fruge

[Dinostrate]

OK !

Pour la réduction d'interligne "post p" c'est limpide et ça roule.

Pour les images, le positionnement relatif est aisé à obtenir et ça fonctionne effectivement très bien avec "em" mais dommage qu'IE n'accepte pas l'instruction "min-width".

Je n'ai pas encore essayé le tuyau de Fruge, mais les explications sur le lien qu'il nous donne me semblent très bien formulées.

Merci et à+

Dino

[Beatnykk]

moi je n'ai pas utilisé les em encore, et le texte des sites (de ma signature par ex.) ne sont pas proportionnés. par contre le design et les images le sont (et ce n'est pas une mince affaire).

il faudra que j'essaie ces réglages em pour voir, en soulignant comme le dit monique que l'interlignage est plus gérable en "après seul" (à la façon d'une feuille quarkxpress).

qu'on se le dise, l'avenir est proportionnel !