28221 sujets
En fait, c'est un peu plus complexe que cela : "px" est officiellement une unité relative, en fonction de l'appareil de visualisation.
http://perso.wanadoo.fr/coin.des.experts/reponses/faq9_49/taille.html
Voici la source : http://www.yoyodesign.org/doc/w3c/css2/syndata.html#length-units
Autre source : http://fr.selfhtml.org/css/formats/affectationvaleur.htm
J'en profite pour rappeler l'un des Principes Fondamentaux du webmaster :
http://perso.wanadoo.fr/coin.des.experts/reponses/faq9_49/taille.html
a écrit :
# Les unités absolues sont le point (pt), le pica (pc), le centimètre (cm), le millimètre (mm) et le pouce (in). Toutes ces unités sont équivalentes parce que proportionnelles entre elles (1 in = 2,54 cm = 25,4 mm = 72 pt = 6 pc). Or, d'après le texte même du W3C, ces unités ne sont utiles que si les propriétés physiques du média de sortie sont connues... et ce n'est jamais le cas pour les écrans qui nous servent généralement à surfer sur le web. En pratique, ces unités n'ont de sens que sur une impression sur papier. On devrait donc éviter de s'en servir pour les sites qui ne sont conçus que pour des écrans d'ordinateur et, notamment, on ne devrait jamais y utiliser des «points».
# Les unités relatives sont le «em» (em), le «ex» (ex) et le pixel (px). Ce dernier est évidemment le pixel d'écran tandis que les deux autres sont relatives à la police de référence : 1 em est égal à la taille de cette police, tandis que 1 ex est la hauteur du «x» dans cette police, c.à.d. celle d'une lettre sans jambage (le rapport em/ex dépend donc de la police utilisée).
Voici la source : http://www.yoyodesign.org/doc/w3c/css2/syndata.html#length-units
a écrit :
Voici les unités relatives :
* em : la valeur de 'font-size' pour la police concernée
* ex : la valeur de 'x-height' pour la police concernée
* px : une quantité de pixels, en fonction de l'appareil de visualisation.
Autre source : http://fr.selfhtml.org/css/formats/affectationvaleur.htm
J'en profite pour rappeler l'un des Principes Fondamentaux du webmaster :
a écrit :
Principe général : ne jamais imposer une manière de surfer.
Ne pas fixer la taille de police. N'oublions pas que certains utilisateurs mal-voyants ont besoin d'augmenter la taille de police.
Nota : il faut savoir que tous les navigateurs respectueux des Standards (en fait, tous sauf IE) permettent toujours le redimensionnement de la police : il n'est pas possible de la fixer pour eux.
Ne pas ouvrir de nouvelle fenêtre ou de popup sans prévenir l'utilisateur
Ne pas imposer de la musique, un affichage plein écran, un plugin, etc...
Dans tous les cas et en règle générale, il est vivement déconseillé d'imposer une manière de surfer à l'utilisateur. Sachez que tous les internautes sont différents, ils ont tous des goûts, des habitudes, des connaissances différentes du monde internet. Ne croyez jamais qu'ils vous ressemblent et ont les même besoins que vous.
Il est dit ici :
http://fr.selfhtml.org/css/formats/affectationvaleur.htm
Je ne suis donc pas totalement dans l'erreur !
http://fr.selfhtml.org/css/formats/affectationvaleur.htm
a écrit :
px absolue/relative Signifie pixel. Dépend de la densité en pixels du mode de sortie, relative donc d'un mode de sortie à l'autre, absolue par contre par rapport à un seul et unique mode de sortie.
Je ne suis donc pas totalement dans l'erreur !
Non, IE ne considère pas qu'il s'agit d'un unité fixe. IE a un bug qui l'empèche de modifier la taille d'affichage des polices si celle-ci est exprimée en pixel. Par contre, que la taille soit fixe ou relative ne devrait rien changer au fait que l'utilisateur devrait pouvoir modifier la taille d'affichage.
gizmo a écrit :
Non, IE ne considère pas qu'il s'agit d'un unité fixe. IE a un bug qui l'empèche de modifier la taille d'affichage des polices si celle-ci est exprimée en pixel. Par contre, que la taille soit fixe ou relative ne devrait rien changer au fait que l'utilisateur devrait pouvoir modifier la taille d'affichage.
Tu as raison, je me suis mal exprimé : "fixe" ne signifie pas "qui ne peut pas être modifié par l'utilisateur".
J'aurais dû dire "figé".
"fixe" / "relatif" signifie simplement que la taille est dépendante ou non d'un parent (ou d'un support, media, etc.)... et n'a rien à voir avec ce que l'utilisateur doit pouvoir faire avec cette taille.
Je viens de sauter le pas et j'ai modifier toutes mes mesures je viens de passer du px au em
Après ce changement j'ai eu un problème de compatibilité d'OS
Plus précisément j'ai repris un menu proposer dans un tutoriel par Olivier(alias el moustiko)
Je développe sous Linux Mandrake 10.1et j'ai comme navigateur Firefox
et la tout ce passe bien les sous menus sont collés au menu principal.
J'ai voulu regardé le résultat coté windows 98 SEet la est apparu un espace non-négligeable entre le menu principale et les sous menus
avec comme navigateur Firefox, Mozilla 1.6 et IE6
Je ne comprends pas la raison j'ai soupconné un problème de police ou de résolution
la page de test est http://matthieu.jobelin.free.fr/ul2.html
La partie du CSS qui doit etre responsable est
Si vous avez déja rencontré ce problème ou si vous avez des suggestions sur les causes de ce disfonctionnement.
Je serais heureux d'en dicuter
Après ce changement j'ai eu un problème de compatibilité d'OS
Plus précisément j'ai repris un menu proposer dans un tutoriel par Olivier(alias el moustiko)
Je développe sous Linux Mandrake 10.1et j'ai comme navigateur Firefox
et la tout ce passe bien les sous menus sont collés au menu principal.
J'ai voulu regardé le résultat coté windows 98 SEet la est apparu un espace non-négligeable entre le menu principale et les sous menus
avec comme navigateur Firefox, Mozilla 1.6 et IE6
Je ne comprends pas la raison j'ai soupconné un problème de police ou de résolution
la page de test est http://matthieu.jobelin.free.fr/ul2.html
La partie du CSS qui doit etre responsable est
ul#menu{
position:absolute;
display: block;
z-index: 2000;
top:3.8em;
left:1.1em;
margin:0;
padding:0;
list-style:none;
width:100%;
background:#FCCCCC;
float:left;
font-size:1.1em;
color:#4444ce;
}
ul#menu ul{
position:absolute;
background:#FCCCCC;
list-style:none;
margin:0;
padding:0;
top:2.em;
width:20em;
z-index:1;
}
@media screen{
body>div#menuH{
position:fixed;
}
}
Si vous avez déja rencontré ce problème ou si vous avez des suggestions sur les causes de ce disfonctionnement.
Je serais heureux d'en dicuter
Bonjour,
Ton problème viens de l'affectation des marges sur les sous-menus.
Tu n'à pas besoin de les définir, en utilisant :
Tu résoud ton problème d'affichage et tu donnes la possiblité à l'event onmouseover de ne pas "décrocher" du parent ul#menu.
En passant le contener ul#menu n'à pas besoin d'être en position absolute et la propriété display:block est redondante un element ul étant un element de type block.
Je suppose que tu à cette necessité pour gérer par le javascript la propriété display, mais c'est une mauvaise idée (voir ci-après)...
Tu n'à pas besoin de tester document.all sur ton script, c'est une très mauvaise idée, d'abord parce que document.all n'est pas une specification ecmascript valide et ensuite parceque tu teste une méthode que tu n'utilise pas...
Si tu à besoin de tester la compatibilité avec le DOM, il vaut mieux tester la méthode get.ElementById qui indique généralement la prise en charge du DOM 2, ou mieux encore getElementsByTagName, qui est la méthode critique de ton script.
Le choix du traitement javascript pour créer tes effets de roll-over pose des problèmes de conception et d'accessibilité (Si cela fait partie de tes objectifs évidemment).
Tel que tu l'à écris ton menu n'est utilisable que SI javascript est activé chez le client pour les navigateur ne supportant pas la propriété CSS hover sur des element UL, ce qui est le cas de IE.
Dans le cas contraire tes sous-rubiques n'existent simplement pas.
Il y à un principe de conception de script javascript auquel tu dois absolument te plier si tu veux produire des traitements efficaces et "conforme":
Il faut que tu t'assures que les informations dont l'affichage ou le traitement seront pris en charge par javascript restent utilisables si javascript n'est pas activé OU que tu fournisses une méthode alternative.
Concretement cela veut dire que ton menu devrait être "déplié" par défaut et que ton script devrait comporter une routine de "repliement", appellée au chargement de la page.
De tel sorte que si la prise en charge de javascript fait défaut l'ensemble de tes sous-menus reste utilisable.
Evidemment cela te reserve quelques passionnantes réflexions sur le design avec le menu "déplié".
Une piste que tu pourrais explorer serait de l'afficher en flottant sur la gauche et en affichage vertical puis de créer une routine javascript pour le replier en position horizontale... (Bienvenue dans le monde merveilleux de l'adaptation des traitements EcmaScript ..
)
L'autre principe est ne jamais restreindre un traitement javascript à un event exclusif.
Dans ton cas le seul moyen de déclencher le roll_over est l'evenement "mouse", ce qui fait que tes sous-menus sont totalement innacessibles à la navigation tabulaire.
Il te faut donc doubler ta gestion des events onmouseover/out par une gestion des events onfocus/blur.
Ces deux principes de base sont valables pour tous les traitements javascripts, particulièrement pour la navigation et les formulaires.
Dans le cas où cela n'est pas possible, tu dois produire des alternatives crédibles et utilisables.
Par exemple tu pourrais décider de ne pas faire apparaitre ton menu déplié par défaut, mais alors cela implique d'afficher, sur chaque page de ton menu principal son sous-menu en clair, afin de le rendres utilisable à la navigation tabulaire et à ceux qui n'utilisent pas javascript.
l'autre solution est de séquencer la navigation avec un genre de barre de navigation 'page suivante/prec",.
Quoiqu'il en soit, il faut que le lien "Nos bateaux" par exemple soit d'une manière ou d'un autre accessible à la navigation tabulaire et en cas de défaut de support de javascript.
Enfin, tu utilise la propriété display:none pour cacher tes sous-menus, cette propriété est à manier avec beaucoup de précaution, car, comme pour sa petite soeur visibility:hidden, elle est interprétée par les lecteurs d'écrans, ce qui pose pas mal de problèmes d'accessibilité des contenus affectés de ces propriétés.
Il existe des méthodes alternatives pour remplacer l'usage d'un display:none, l'une d'elle propose de placer les éléments à cacher "en dehors" da la zone de display par l'utilisation de grandes valeurs de marge négatives.
Par exemple la méthode de paul Bonhnam : http://www.webaim.org/techniques/articles/hiddentext , semble donner de bon résultats.
De cette manière tu t'assures que le contenu "caché" restent au moins accessible pour les screen readers.
Evidemment tu vas vite comprendre que les implications sur ton design de ces principes vont être compliqués à gérer...
La mise en place de menu roll-over, si tant est que l'on veuille faire le job correctement, est toujours très compliqué et demande des scripts bien plus audacieux que le simple mouseover/out que tu utilises.
Si j'ai un conseil à te donner, c'est d'éviter de "réinventer" la roue et de tenter d'adapter des modules scriptés déjà écrits et testés dans cette perspective.
Tu peut par exemple t'inspirer de ce dispositif : http://iubito.free.fr/prog/menu.php qui, bien qu'il ne soit pas totalement satisfaisant, constitue une bonne base de départ...
JP
Ps: pour Raphael, ce serait pas possible d'agrandir le text-area pour les bavards dans mon genre ??
Modifié le 16 Jan 2005 - 12:33
Ton problème viens de l'affectation des marges sur les sous-menus.
Tu n'à pas besoin de les définir, en utilisant :
ul#menu ul{
position:absolute;
background:#FCCCCC;
list-style:none;
}Tu résoud ton problème d'affichage et tu donnes la possiblité à l'event onmouseover de ne pas "décrocher" du parent ul#menu.
En passant le contener ul#menu n'à pas besoin d'être en position absolute et la propriété display:block est redondante un element ul étant un element de type block.
Je suppose que tu à cette necessité pour gérer par le javascript la propriété display, mais c'est une mauvaise idée (voir ci-après)...
Tu n'à pas besoin de tester document.all sur ton script, c'est une très mauvaise idée, d'abord parce que document.all n'est pas une specification ecmascript valide et ensuite parceque tu teste une méthode que tu n'utilise pas...
Si tu à besoin de tester la compatibilité avec le DOM, il vaut mieux tester la méthode get.ElementById qui indique généralement la prise en charge du DOM 2, ou mieux encore getElementsByTagName, qui est la méthode critique de ton script.
Le choix du traitement javascript pour créer tes effets de roll-over pose des problèmes de conception et d'accessibilité (Si cela fait partie de tes objectifs évidemment).
Tel que tu l'à écris ton menu n'est utilisable que SI javascript est activé chez le client pour les navigateur ne supportant pas la propriété CSS hover sur des element UL, ce qui est le cas de IE.
Dans le cas contraire tes sous-rubiques n'existent simplement pas.
Il y à un principe de conception de script javascript auquel tu dois absolument te plier si tu veux produire des traitements efficaces et "conforme":
Il faut que tu t'assures que les informations dont l'affichage ou le traitement seront pris en charge par javascript restent utilisables si javascript n'est pas activé OU que tu fournisses une méthode alternative.
Concretement cela veut dire que ton menu devrait être "déplié" par défaut et que ton script devrait comporter une routine de "repliement", appellée au chargement de la page.
De tel sorte que si la prise en charge de javascript fait défaut l'ensemble de tes sous-menus reste utilisable.
Evidemment cela te reserve quelques passionnantes réflexions sur le design avec le menu "déplié".
Une piste que tu pourrais explorer serait de l'afficher en flottant sur la gauche et en affichage vertical puis de créer une routine javascript pour le replier en position horizontale... (Bienvenue dans le monde merveilleux de l'adaptation des traitements EcmaScript ..
)L'autre principe est ne jamais restreindre un traitement javascript à un event exclusif.
Dans ton cas le seul moyen de déclencher le roll_over est l'evenement "mouse", ce qui fait que tes sous-menus sont totalement innacessibles à la navigation tabulaire.
Il te faut donc doubler ta gestion des events onmouseover/out par une gestion des events onfocus/blur.
Ces deux principes de base sont valables pour tous les traitements javascripts, particulièrement pour la navigation et les formulaires.
Dans le cas où cela n'est pas possible, tu dois produire des alternatives crédibles et utilisables.
Par exemple tu pourrais décider de ne pas faire apparaitre ton menu déplié par défaut, mais alors cela implique d'afficher, sur chaque page de ton menu principal son sous-menu en clair, afin de le rendres utilisable à la navigation tabulaire et à ceux qui n'utilisent pas javascript.
l'autre solution est de séquencer la navigation avec un genre de barre de navigation 'page suivante/prec",.
Quoiqu'il en soit, il faut que le lien "Nos bateaux" par exemple soit d'une manière ou d'un autre accessible à la navigation tabulaire et en cas de défaut de support de javascript.
Enfin, tu utilise la propriété display:none pour cacher tes sous-menus, cette propriété est à manier avec beaucoup de précaution, car, comme pour sa petite soeur visibility:hidden, elle est interprétée par les lecteurs d'écrans, ce qui pose pas mal de problèmes d'accessibilité des contenus affectés de ces propriétés.
Il existe des méthodes alternatives pour remplacer l'usage d'un display:none, l'une d'elle propose de placer les éléments à cacher "en dehors" da la zone de display par l'utilisation de grandes valeurs de marge négatives.
Par exemple la méthode de paul Bonhnam : http://www.webaim.org/techniques/articles/hiddentext , semble donner de bon résultats.
De cette manière tu t'assures que le contenu "caché" restent au moins accessible pour les screen readers.
Evidemment tu vas vite comprendre que les implications sur ton design de ces principes vont être compliqués à gérer...
La mise en place de menu roll-over, si tant est que l'on veuille faire le job correctement, est toujours très compliqué et demande des scripts bien plus audacieux que le simple mouseover/out que tu utilises.
Si j'ai un conseil à te donner, c'est d'éviter de "réinventer" la roue et de tenter d'adapter des modules scriptés déjà écrits et testés dans cette perspective.
Tu peut par exemple t'inspirer de ce dispositif : http://iubito.free.fr/prog/menu.php qui, bien qu'il ne soit pas totalement satisfaisant, constitue une bonne base de départ...
JP
Ps: pour Raphael, ce serait pas possible d'agrandir le text-area pour les bavards dans mon genre ??
Modifié le 16 Jan 2005 - 12:33
Merci jpv pour tes réponses très complètes.
Pour ce type de demande, il y a un topic Ergonomie Forum Alsa.
En attendant, les bavards dans ton genre peuvent toujours rédiger leur réponse dans leur traitement de texte favori et faire un copier-coller dans le textarea par la suite.
Modifié le 15 Jan 2005 - 17:33
jpv a écrit :
Ps: pour Raphael, ce serait pas possible d'agrandir le text-area pour les bavards dans mon genre ??
Pour ce type de demande, il y a un topic Ergonomie Forum Alsa.
En attendant, les bavards dans ton genre peuvent toujours rédiger leur réponse dans leur traitement de texte favori et faire un copier-coller dans le textarea par la suite.
Modifié le 15 Jan 2005 - 17:33
Raphael a écrit :
En fait, c'est un peu plus complexe que cela : "px" est officiellement une unité relative, en fonction de l'appareil de visualisation.
http://perso.wanadoo.fr/coin.des.experts/reponses/faq9_49/taille.html
# Les unités absolues sont le point (pt), le pica (pc), le centimètre (cm), le millimètre (mm) et le pouce (in). Toutes ces unités sont équivalentes parce que proportionnelles entre elles (1 in = 2,54 cm = 25,4 mm = 72 pt = 6 pc). Or, d'après le texte même du W3C, ces unités ne sont utiles que si les propriétés physiques du média de sortie sont connues... et ce n'est jamais le cas pour les écrans qui nous servent généralement à surfer sur le web. En pratique, ces unités n'ont de sens que sur une impression sur papier. On devrait donc éviter de s'en servir pour les sites qui ne sont conçus que pour des écrans d'ordinateur et, notamment, on ne devrait jamais y utiliser des «points».
# Les unités relatives sont le «em» (em), le «ex» (ex) et le pixel (px). Ce dernier est évidemment le pixel d'écran tandis que les deux autres sont relatives à la police de référence : 1 em est égal à la taille de cette police, tandis que 1 ex est la hauteur du «x» dans cette police, c.à.d. celle d'une lettre sans jambage (le rapport em/ex dépend donc de la police utilisée).
Voici la source : http://www.yoyodesign.org/doc/w3c/css2/syndata.html#length-units
a écrit :
Voici les unités relatives :
* em : la valeur de 'font-size' pour la police concernée
* ex : la valeur de 'x-height' pour la police concernée
* px : une quantité de pixels, en fonction de l'appareil de visualisation.
Autre source : http://fr.selfhtml.org/css/formats/affectationvaleur.htm
J'en profite pour rappeler l'un des Principes Fondamentaux du webmaster :
a écrit :
Principe général : ne jamais imposer une manière de surfer.
Ne pas fixer la taille de police. N'oublions pas que certains utilisateurs mal-voyants ont besoin d'augmenter la taille de police.
Nota : il faut savoir que tous les navigateurs respectueux des Standards (en fait, tous sauf IE) permettent toujours le redimensionnement de la police : il n'est pas possible de la fixer pour eux.
Ne pas ouvrir de nouvelle fenêtre ou de popup sans prévenir l'utilisateur
Ne pas imposer de la musique, un affichage plein écran, un plugin, etc...
Dans tous les cas et en règle générale, il est vivement déconseillé d'imposer une manière de surfer à l'utilisateur. Sachez que tous les internautes sont différents, ils ont tous des goûts, des habitudes, des connaissances différentes du monde internet. Ne croyez jamais qu'ils vous ressemblent et ont les même besoins que vous.
Stephan a écrit :
(...)
En attendant, les bavards dans ton genre peuvent toujours rédiger leur réponse dans leur traitement de texte favori et faire un copier-coller dans le textarea par la suite.
... Ou se mettre sous Firefox 1.0, notre mignon petit panda et se renseigner sur comment agrandir la textarea du forum
@+, HoPHP