Différences et avantages/inconvénients : px, em, %, etc ?

[Ricardo]

Tout est à peu près ds le titre.
Je comprends assez bien pour la différence entre % et px mais que veut dire em et quel est son rapport avec % ?
Mezrci

[calimo]

Em c'est une taille relative "par rapport à l'élément parent", donc si tu mets h1{font-size:1em;}, comme l'élément parent c'est body et si tu n'a rien défini d'autre pour body ou html, tes h1 auront une taille comme les paragraphes, donc ils ne seront pas plus grand.
Pour les textes % fonctionne de la même manière (sauf bien sûr qu'il faut mettre 100).

Par contre pour les largeurs c'est un peu différent.
Si tu mets 80%, c'est 80% de l'écran.
Si tu mets 0.8 em, c'est tout petit, c'est 8/10 de la hauteur du texte...

Je me rends compte que j'utilise assez peu les % , je ne sais pas si ça vient de là.
En tous cas, si tu veux que tes feuilles s'adaptent à ta largeur, tu mets #feuilles{width:100%} et ce sera automatiquement ajusté quelque soit la résolution.
Je ne crois pas que tu puisse faire pareil avec la hauteur malheureusement.

[Ricardo]

Merci Calimo, j'y vois un peu plus clair.
Je vais charger ma page d'accueil sur le net mais j'ai encore qq petits problèmes de positionnement qui viennent certainement de là.
De ttes façons, maintenant, c'est visible ds les deux résolutions de façon satisfaisante avec MF et un peu moins avec IE mais je m'en fout, c'est de leur faute
Amitiés
http://ricardo.free.fr

[calimo]

Ta page d'accueil sort très bien, même avec IE (je ne vois quasiment pas de différence).
Les images tu peux leur laisser une taille fixe, parce que l'agrandissement n'est pas super Par exemple tu peux mettre :

Code : Tout sélectionner

<img class="cadrevalid" src="images/validcss.gif" alt="ValideCSS" height="28" width="125" />
<img class="mozilla" src="images/mozilla.gif" alt="Mozilla" height="34" width="34" />

Je crois que c'est une des seule balise sur laquelle tu peux mettre height et width. D'ailleurs je ne sais plus où j'ai lu que c'était conseillé (le navigateur l'affiche plus vite puisqu'il n'a pas besoin de calculer la taille).

[calimo]

Je viens de voir le nouveau design de ton site, je vois que tu as bien utilisé les CSS, j'aime particulièrement le cadre du titre qui s'adapte parfaitement à la résolution
C'est peut-être un poil flash pour la lecture mais bon...

Par contre je n'ai pas encore saisi comment tu as fait disparaitre les images sous IE
Je n'ai pas vu de display:none dans ton css

[Ricardo]

J'aimerais bien le savoir aussi car je n'ai rien fait pour
Avec IE, le chargement est très long et les photos n'ont pas l'air de venir.
Je vais étudier ça et p e recharger le fichier photos.
A+

[Ricardo]

J’ai trouvé l’erreur de ma page « etabli »:
J’avais créé un troisième cadre (cadrereste) pour positionner la partie bla-bla (1er cadre = titre, 2eme = menu).

Sans ce troisième cadre, le texte commence en haut, sous les deux premiers cadres.
Sous MF, pas de problème, la page est d’ailleurs bien validée.
Par contre, IE n’aime pas et le texte passe sur l’image en cachant celle-ci.
J’ai corrigé (mais la manière ne me semble pas très jolie) avec des <br /> en nombre suffisant.
Existe-t-il un moyen de positionner du texte d’une autre façon, plus propre

[SB]

J'aime beaucoup le

Toutefois, si vous n'utilisez pas encore un navigateur moderne (Ex. Mozilla Firefox) vous ne pourrez pas profiter de cet avantage. Désolé !

[calimo]

Avec IE, le chargement est très long

C'est normal non ? La différence c'est que maintenant tu est habitué à la vitesse de FF

Plutôt que les br, essaye de placer cadrereste en "position:relative" plutôt que absolute;-)

Pour les images, essaye plutôt de commencer par voir sans la feuille de style si l'erreur est toujours là. Ça permettra de centrer les recherches.

[Ricardo]

Erreur cernée :
J’y ai mis du tps car rien ne me semblait anormal et tt s’affichait bien sous MFF.
Le problème vient seulement du fait que IE ne reconnaît pas les ‘%’ pour la hauteur mais les ‘em’, ce qui fait que, pour lui, la hauteur était nulle donc image invisible.
Malheureusement, si on change de résolution, les photos sont légèrement plus aplaties.
L’important est qu’avec le « meilleur » des navigateurs : MFF, tout soit impeccable et que la page soit ……
This Page Is Valid XHTML 1.0 Strict!
Résultats du Validateur CSS du W3C concernant http://ricardo.free.fr/etabli/etabli.html
Félicitations

[calimo]

IE est vraiment bizarre
Encore un petit truc :

Code : Tout sélectionner

.fondfeuilles {width: 103%;}

Pourquoi 103 ?
Ça fait apparaîre la barre de défilement horizontal, pourquoi ne mets-tu pas simplement 100% ?

Toutefois, si vous n'utilisez pas encore un navigateur moderne (Ex. Mozilla Firefox)

Mets le lien vers Frenchmozilla ou Mozilla-europe

[Ricardo]

Ok, je vais voir ça

[Ricardo]

Ok, je vais mettre un lien mais il y en a déjà un en page d'accueuil.
Pour les 103 % c'était pour éviter une marge à droite sur IE mais je vais rétablir 100%.
D'ailleurs, je vais étudier de façon plus approfondie la différence d'affichage des boîtes entre MFF et IE. Il y a un article à ce sujet ds Openweb : "dimensions_boîtes_CSS"