Menu vertical flottant

Guy Gruais

03/03/2009 à 10:42

Bonjour,

Vous allez être infiniment heureux d'apprendre que Patrick 'Zener' Brunet
vient d'écrire :

Chez moi le défilement (molette de la souris) est très saccadé sur
Firefox 2 (donc normalement sans artifice), avec en plus un curieux
effet sur les lettres de l'extrémité gauche du texte principal.

J'ai effectivement ces défauts chez moi aussi mais uniquement avec la
version 2 de Firefox.
Je n'y avais pas attaché d'importance du fait que les autres essais étaient
tous satisfaisants et avait attribué l'effet sur les lettres (à gauche du
texte principal) au fait que les différents navigateurs n'interprètent pas
tous, les marges (padding ou margin) de la même manière.

Ensuite, il faut considérer le grossissement de la police de base
(Ctrl + molette)

Manip que j'ignorais totalement jusqu'à ce jour :-?

le texte du menu suit mais pas son enveloppe.

Effectivement mais là encore uniquement avec Firefox 2

C'est
possible si vous la dimensionnez plutôt en ex (ainsi que la cheminée
dans la page).

Pas du tout familiarisé avec ces "ex".
Il me semble que cette unité s'applique à la hauteur des lettres.
En quoi cela peut-il résoudre le problème rencontré avec Firefox2 et cela
va-t-il avoir une conséquence sur les autres versions ou navigateurs ?

... Pour mes sites, j'ai créé ma propre
implémentation qui accepte un positionnement en ex ou en %.
Vous la trouverez ici: http://cjoint.com/?dfh2JAJMiy

Sauvegardé sur mon DD mais je dois dire que je suis complètement dépassé à
ce sujet.

Je crains que votre page ne passe pas la validation CSS.

J'avais l'intention de le faire de toute façon avant de mettre la page en
ligne (beaucoup d'autres pages vont être modifiées).
Je n'avais que 7 erreurs ou avertissements tous bénins et qui ne
concernaient que des "alt"oubliés et mon menu ... ... de bas de page qui,
donc, va disparaître.
Affaire réglée pour ce point.

Merci pour l'aide.

--
Cordialement

(inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/

Bonjour,

Vous allez être infiniment heureux d'apprendre que Patrick 'Zener' Brunet
vient d'écrire :

Chez moi le défilement (molette de la souris) est très saccadé sur
Firefox 2 (donc normalement sans artifice), avec en plus un curieux
effet sur les lettres de l'extrémité gauche du texte principal.

J'ai effectivement ces défauts chez moi aussi mais uniquement avec la
version 2 de Firefox.
Je n'y avais pas attaché d'importance du fait que les autres essais étaient
tous satisfaisants et avait attribué l'effet sur les lettres (à gauche du
texte principal) au fait que les différents navigateurs n'interprètent pas
tous, les marges (padding ou margin) de la même manière.

Ensuite, il faut considérer le grossissement de la police de base
(Ctrl + molette)

Manip que j'ignorais totalement jusqu'à ce jour :-?

le texte du menu suit mais pas son enveloppe.

Effectivement mais là encore uniquement avec Firefox 2

C'est
possible si vous la dimensionnez plutôt en ex (ainsi que la cheminée
dans la page).

Pas du tout familiarisé avec ces "ex".
Il me semble que cette unité s'applique à la hauteur des lettres.
En quoi cela peut-il résoudre le problème rencontré avec Firefox2 et cela
va-t-il avoir une conséquence sur les autres versions ou navigateurs ?

... Pour mes sites, j'ai créé ma propre
implémentation qui accepte un positionnement en ex ou en %.
Vous la trouverez ici: http://cjoint.com/?dfh2JAJMiy

Sauvegardé sur mon DD mais je dois dire que je suis complètement dépassé à
ce sujet.

Je crains que votre page ne passe pas la validation CSS.

J'avais l'intention de le faire de toute façon avant de mettre la page en
ligne (beaucoup d'autres pages vont être modifiées).
Je n'avais que 7 erreurs ou avertissements tous bénins et qui ne
concernaient que des "alt"oubliés et mon menu ... ... de bas de page qui,
donc, va disparaître.
Affaire réglée pour ce point.

Merci pour l'aide.

--
Cordialement

guy.siaurg@free.invalid (inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/

Vous avez filtré cet utilisateur ! Consultez son message

SAM

03/03/2009 à 11:18

Le 3/3/09 10:42 AM, Guy Gruais a écrit :

Bonjour,

Vous allez être infiniment heureux d'apprendre que Patrick 'Zener'
Brunet vient d'écrire :

Ensuite, il faut considérer le grossissement de la police de base
(Ctrl + molette)

Sur mon Fx.3 (comme je l'ai réglé (par défaut?)) ça grossit *aussi* les
images !

Manip que j'ignorais totalement jusqu'à ce jour :-?

Mitou, mais il y a aussi un menu ou les raccourcis : Ctrl[+]/Ctrl[-]
pour faire de même.

le texte du menu suit mais pas son enveloppe.

Effectivement mais là encore uniquement avec Firefox 2

N'absolument pas !
Le grossissement des caractères cache ceux qui ne peuvent entrer dans le
cadre du menu (et ce, qque soit le brouteur).
D'ailleurs ce "zoom" fout en l'air la quasi totalité de la mise en page
(les nouveaux brouteurs agrandissant *aussi* les images)

C'est possible si vous la dimensionnez plutôt en ex
(ainsi que la cheminée dans la page).

Pas du tout familiarisé avec ces "ex".

ex ou em ou même %
brefle, en unités dites "proportionnelles".

Il me semble que cette unité s'applique à la hauteur des lettres.
En quoi cela peut-il résoudre le problème rencontré avec Firefox2 et

en appliquant *aussi* cette unité à tout le reste ?
(largeur-hauteur-position-marges de tout élément stylé)

cela va-t-il avoir une conséquence sur les autres versions ou
navigateurs ?

Il y a d'enooooormes chances que oui ;-)

--
sm

Patrick 'Zener' Brunet

03/03/2009 à 18:49

Bonsoir.

"Guy Gruais" a écrit dans le message
de news goiu2n$5go$

Vous allez être infiniment heureux d'apprendre que Patrick 'Zener'
Brunet vient d'écrire :

Chez moi le défilement (molette de la souris) est très saccadé sur
Firefox 2 (donc normalement sans artifice), avec en plus un curieux
effet sur les lettres de l'extrémité gauche du texte principal.

J'ai effectivement ces défauts chez moi aussi mais uniquement avec
la version 2 de Firefox.
Je n'y avais pas attaché d'importance du fait que les autres essais
étaient tous satisfaisants et avait attribué l'effet sur les
lettres (à gauche du texte principal) au fait que les différents
navigateurs n'interprètent pas tous, les marges (padding ou margin)
de la même manière.

Je n'ai pas réussi à faire une capture, malgré de nombreux essais. On dirait
vraiment que c'est un délai de rafraichissement de la partie du texte qui
entoure le menu.

Ensuite, il faut considérer le grossissement de la police de base
(Ctrl + molette)

Manip que j'ignorais totalement jusqu'à ce jour :-?

Ca modifie la taille de la police de base de la page. Donc si le site est
entièrement conçu pour ça:
- toutes les polices doivent être taillées en % (des parentes),
- toutes les coordonnées et dimensions qui ont une raison de rester
synchrones avec du texte doivent être en ex ou em,
Alors tout le layout se redimensionne à volonté selon les choix du visiteur,
et ceci dans une large plage. C'est de l'accessibilité.

Ce n'est pas incompatible avec le fait de laisser en px ou % certaines
tailles et coordonnées (celles qui relèvent du positionnement global ou qui
sont en rapport avec des tailles d'images).

Essayez sur mes sites, vous allez voir...

Mais comme presque personne ne le fait, les versions plus récentes: IE 7 (et
donc semble-t-il Firefox 3 ?) imposent le zoom global de toute la page telle
une image, ce qui en fait casse complètement l'accessibilité visuelle des
sites qui étaient conçus comme ci-dessus, et je ne suis pas sûr du tout que
ça rende les autres plus accessibles. Une option eût été la bienvenue :-(

Mais bon, on avait déjà l'habitude des sites qui se forcent à tenir sur une
bande de 800px de large centrée au milieu d'un grand écran parce que ça
facilite la conception du kit graphique :-@

Pas du tout familiarisé avec ces "ex".
Il me semble que cette unité s'applique à la hauteur des lettres.

Normalement, le ex représente la dimension sur l'axe considéré de la lettre
x minuscule (sans les espaces autour), donc c'est une unité a priori
isotrope visuellement (les pixels ne sont pas forcément carrés, mais un
carré en ex devrait en avoir l'air, sauf avec une police bizarre comme
référence).
Le em utilise de même la lettre M majuscule, donc il représente a priori
l'encombrement maximum d'un caractère (pour un cadre à texte dynamiquement
variable...).

Donc si les dimensions de votre menu sont en ex ou em, les proportions
seront conservées lorsqu'il grossira en même temps que ses textes, ce qui
est très bon pour l'ergonomie. La marge gauche du texte principal doit aussi
être proportionnelle.

En quoi cela peut-il résoudre le problème rencontré avec Firefox2

Sans relation, c'était ma croisade perso pour l'accessibilité à moindre
coût.

Je ne comprends pas ce sautillement qui serait donc dû à un délai de
retraçage. Ca saccade comme ça même en engageant le défilement doux, comme
si le fait de scroller d'une unité causait un recalcul de toute la page.
C'est louche.
Il faudrait tester en enlevant des bouts un par un pour cerner ce qui cause
ça: des Javascripts, des bouts de CSS, du contenu, etc.

et cela va-t-il avoir une conséquence sur les autres versions ou
navigateurs ?

Les ex ? Mes sites passent très bien partout, en tout cas relativement à ce
détail, et leur design est entièrement élastique.
N'oubliez pas que près de 52% de vos visiteurs auront IE 6, même pas le 7
qui d'ailleurs n'a rien d'une panacée :-/

D'ailleurs sur le site pro, j'ai toujours un gag avec le titre de page:
- en mode menu fixe, le menu vient s'empiler à gauche au-dessus du sommaire,
- dans le flot de code, le titre se trouve entre les deux, donc je dois le
positionner sur le bandeau, ce qui se passe très bien a priori,
- mais avec IE6 uniquement, au-delà d'un certain grossissement, il se
débrouille pour replonger entre les deux :-@
C'est une sombre histoire de marge fantôme qui ne devrait pas exister, et je
n'ai pas pu trouver de solution.

... Pour mes sites, j'ai créé ma propre
implémentation qui accepte un positionnement en ex ou en %.
Vous la trouverez ici: http://cjoint.com/?dfh2JAJMiy

Sauvegardé sur mon DD mais je dois dire que je suis complètement
dépassé à ce sujet.

La notice est à l'intérieur, c'est pas trop compliqué.
Mais bon, par rapport à l'autre, son intérêt est de gérer les ex et autres
%, donc de ne pas imposer les px.

Je crains que votre page ne passe pas la validation CSS.

J'avais l'intention de le faire de toute façon avant de mettre la
page en ligne (beaucoup d'autres pages vont être modifiées).
Je n'avais que 7 erreurs ou avertissements tous bénins et qui ne
concernaient que des "alt" oubliés et mon menu ... ... de bas de
page qui, donc, va disparaître.
Affaire réglée pour ce point.

Je parle de la validation CSS, pas du code HTML. le behavior par exemple est
une spécificité IE qui vous empêchera d'arborer le logo W3C même si le reste
est parfait.
D'où l'intérêt de virer ces .erdes dans une CSS séparée avec inclusion
conditionnelle (les commentaires IE, exemple dans mon cssfixed.htc).

--
Cordialement.

* Patrick BRUNET www.ipzb.fr www.ipzb-pro.com
* E-mail: lien sur http://zener131.eu/ContactMe

Bonsoir.

"Guy Gruais" <guy.siaurg@free.invalid> a écrit dans le message
de news goiu2n$5go$1@obelix.gegeweb.org

Vous allez être infiniment heureux d'apprendre que Patrick 'Zener'
Brunet vient d'écrire :

Chez moi le défilement (molette de la souris) est très saccadé sur
Firefox 2 (donc normalement sans artifice), avec en plus un curieux
effet sur les lettres de l'extrémité gauche du texte principal.

J'ai effectivement ces défauts chez moi aussi mais uniquement avec
la version 2 de Firefox.
Je n'y avais pas attaché d'importance du fait que les autres essais
étaient tous satisfaisants et avait attribué l'effet sur les
lettres (à gauche du texte principal) au fait que les différents
navigateurs n'interprètent pas tous, les marges (padding ou margin)
de la même manière.

Je n'ai pas réussi à faire une capture, malgré de nombreux essais. On dirait
vraiment que c'est un délai de rafraichissement de la partie du texte qui
entoure le menu.

Ensuite, il faut considérer le grossissement de la police de base
(Ctrl + molette)

Manip que j'ignorais totalement jusqu'à ce jour :-?

Ca modifie la taille de la police de base de la page. Donc si le site est
entièrement conçu pour ça:
- toutes les polices doivent être taillées en % (des parentes),
- toutes les coordonnées et dimensions qui ont une raison de rester
synchrones avec du texte doivent être en ex ou em,
Alors tout le layout se redimensionne à volonté selon les choix du visiteur,
et ceci dans une large plage. C'est de l'accessibilité.

Ce n'est pas incompatible avec le fait de laisser en px ou % certaines
tailles et coordonnées (celles qui relèvent du positionnement global ou qui
sont en rapport avec des tailles d'images).

Essayez sur mes sites, vous allez voir...

Mais comme presque personne ne le fait, les versions plus récentes: IE 7 (et
donc semble-t-il Firefox 3 ?) imposent le zoom global de toute la page telle
une image, ce qui en fait casse complètement l'accessibilité visuelle des
sites qui étaient conçus comme ci-dessus, et je ne suis pas sûr du tout que
ça rende les autres plus accessibles. Une option eût été la bienvenue :-(

Mais bon, on avait déjà l'habitude des sites qui se forcent à tenir sur une
bande de 800px de large centrée au milieu d'un grand écran parce que ça
facilite la conception du kit graphique :-@

Pas du tout familiarisé avec ces "ex".
Il me semble que cette unité s'applique à la hauteur des lettres.

Normalement, le ex représente la dimension sur l'axe considéré de la lettre
x minuscule (sans les espaces autour), donc c'est une unité a priori
isotrope visuellement (les pixels ne sont pas forcément carrés, mais un
carré en ex devrait en avoir l'air, sauf avec une police bizarre comme
référence).
Le em utilise de même la lettre M majuscule, donc il représente a priori
l'encombrement maximum d'un caractère (pour un cadre à texte dynamiquement
variable...).

Donc si les dimensions de votre menu sont en ex ou em, les proportions
seront conservées lorsqu'il grossira en même temps que ses textes, ce qui
est très bon pour l'ergonomie. La marge gauche du texte principal doit aussi
être proportionnelle.

En quoi cela peut-il résoudre le problème rencontré avec Firefox2

Sans relation, c'était ma croisade perso pour l'accessibilité à moindre
coût.

Je ne comprends pas ce sautillement qui serait donc dû à un délai de
retraçage. Ca saccade comme ça même en engageant le défilement doux, comme
si le fait de scroller d'une unité causait un recalcul de toute la page.
C'est louche.
Il faudrait tester en enlevant des bouts un par un pour cerner ce qui cause
ça: des Javascripts, des bouts de CSS, du contenu, etc.

et cela va-t-il avoir une conséquence sur les autres versions ou
navigateurs ?

Les ex ? Mes sites passent très bien partout, en tout cas relativement à ce
détail, et leur design est entièrement élastique.
N'oubliez pas que près de 52% de vos visiteurs auront IE 6, même pas le 7
qui d'ailleurs n'a rien d'une panacée :-/

D'ailleurs sur le site pro, j'ai toujours un gag avec le titre de page:
- en mode menu fixe, le menu vient s'empiler à gauche au-dessus du sommaire,
- dans le flot de code, le titre se trouve entre les deux, donc je dois le
positionner sur le bandeau, ce qui se passe très bien a priori,
- mais avec IE6 uniquement, au-delà d'un certain grossissement, il se
débrouille pour replonger entre les deux :-@
C'est une sombre histoire de marge fantôme qui ne devrait pas exister, et je
n'ai pas pu trouver de solution.

... Pour mes sites, j'ai créé ma propre
implémentation qui accepte un positionnement en ex ou en %.
Vous la trouverez ici: http://cjoint.com/?dfh2JAJMiy

Sauvegardé sur mon DD mais je dois dire que je suis complètement
dépassé à ce sujet.

La notice est à l'intérieur, c'est pas trop compliqué.
Mais bon, par rapport à l'autre, son intérêt est de gérer les ex et autres
%, donc de ne pas imposer les px.

Je crains que votre page ne passe pas la validation CSS.

J'avais l'intention de le faire de toute façon avant de mettre la
page en ligne (beaucoup d'autres pages vont être modifiées).
Je n'avais que 7 erreurs ou avertissements tous bénins et qui ne
concernaient que des "alt" oubliés et mon menu ... ... de bas de
page qui, donc, va disparaître.
Affaire réglée pour ce point.

Je parle de la validation CSS, pas du code HTML. le behavior par exemple est
une spécificité IE qui vous empêchera d'arborer le logo W3C même si le reste
est parfait.
D'où l'intérêt de virer ces .erdes dans une CSS séparée avec inclusion
conditionnelle (les commentaires IE, exemple dans mon cssfixed.htc).

--
Cordialement.

* Patrick BRUNET www.ipzb.fr www.ipzb-pro.com
* E-mail: lien sur http://zener131.eu/ContactMe

Vous avez filtré cet utilisateur ! Consultez son message

Bonsoir.

"Guy Gruais" a écrit dans le message
de news goiu2n$5go$

Vous allez être infiniment heureux d'apprendre que Patrick 'Zener'
Brunet vient d'écrire :

Chez moi le défilement (molette de la souris) est très saccadé sur
Firefox 2 (donc normalement sans artifice), avec en plus un curieux
effet sur les lettres de l'extrémité gauche du texte principal.

J'ai effectivement ces défauts chez moi aussi mais uniquement avec
la version 2 de Firefox.
Je n'y avais pas attaché d'importance du fait que les autres essais
étaient tous satisfaisants et avait attribué l'effet sur les
lettres (à gauche du texte principal) au fait que les différents
navigateurs n'interprètent pas tous, les marges (padding ou margin)
de la même manière.

Je n'ai pas réussi à faire une capture, malgré de nombreux essais. On dirait
vraiment que c'est un délai de rafraichissement de la partie du texte qui
entoure le menu.

Ensuite, il faut considérer le grossissement de la police de base
(Ctrl + molette)

Manip que j'ignorais totalement jusqu'à ce jour :-?

Ca modifie la taille de la police de base de la page. Donc si le site est
entièrement conçu pour ça:
- toutes les polices doivent être taillées en % (des parentes),
- toutes les coordonnées et dimensions qui ont une raison de rester
synchrones avec du texte doivent être en ex ou em,
Alors tout le layout se redimensionne à volonté selon les choix du visiteur,
et ceci dans une large plage. C'est de l'accessibilité.

Ce n'est pas incompatible avec le fait de laisser en px ou % certaines
tailles et coordonnées (celles qui relèvent du positionnement global ou qui
sont en rapport avec des tailles d'images).

Essayez sur mes sites, vous allez voir...

Mais comme presque personne ne le fait, les versions plus récentes: IE 7 (et
donc semble-t-il Firefox 3 ?) imposent le zoom global de toute la page telle
une image, ce qui en fait casse complètement l'accessibilité visuelle des
sites qui étaient conçus comme ci-dessus, et je ne suis pas sûr du tout que
ça rende les autres plus accessibles. Une option eût été la bienvenue :-(

Mais bon, on avait déjà l'habitude des sites qui se forcent à tenir sur une
bande de 800px de large centrée au milieu d'un grand écran parce que ça
facilite la conception du kit graphique :-@

Pas du tout familiarisé avec ces "ex".
Il me semble que cette unité s'applique à la hauteur des lettres.

Normalement, le ex représente la dimension sur l'axe considéré de la lettre
x minuscule (sans les espaces autour), donc c'est une unité a priori
isotrope visuellement (les pixels ne sont pas forcément carrés, mais un
carré en ex devrait en avoir l'air, sauf avec une police bizarre comme
référence).
Le em utilise de même la lettre M majuscule, donc il représente a priori
l'encombrement maximum d'un caractère (pour un cadre à texte dynamiquement
variable...).

Donc si les dimensions de votre menu sont en ex ou em, les proportions
seront conservées lorsqu'il grossira en même temps que ses textes, ce qui
est très bon pour l'ergonomie. La marge gauche du texte principal doit aussi
être proportionnelle.

En quoi cela peut-il résoudre le problème rencontré avec Firefox2

Sans relation, c'était ma croisade perso pour l'accessibilité à moindre
coût.

Je ne comprends pas ce sautillement qui serait donc dû à un délai de
retraçage. Ca saccade comme ça même en engageant le défilement doux, comme
si le fait de scroller d'une unité causait un recalcul de toute la page.
C'est louche.
Il faudrait tester en enlevant des bouts un par un pour cerner ce qui cause
ça: des Javascripts, des bouts de CSS, du contenu, etc.

et cela va-t-il avoir une conséquence sur les autres versions ou
navigateurs ?

Les ex ? Mes sites passent très bien partout, en tout cas relativement à ce
détail, et leur design est entièrement élastique.
N'oubliez pas que près de 52% de vos visiteurs auront IE 6, même pas le 7
qui d'ailleurs n'a rien d'une panacée :-/

D'ailleurs sur le site pro, j'ai toujours un gag avec le titre de page:
- en mode menu fixe, le menu vient s'empiler à gauche au-dessus du sommaire,
- dans le flot de code, le titre se trouve entre les deux, donc je dois le
positionner sur le bandeau, ce qui se passe très bien a priori,
- mais avec IE6 uniquement, au-delà d'un certain grossissement, il se
débrouille pour replonger entre les deux :-@
C'est une sombre histoire de marge fantôme qui ne devrait pas exister, et je
n'ai pas pu trouver de solution.

... Pour mes sites, j'ai créé ma propre
implémentation qui accepte un positionnement en ex ou en %.
Vous la trouverez ici: http://cjoint.com/?dfh2JAJMiy

Sauvegardé sur mon DD mais je dois dire que je suis complètement
dépassé à ce sujet.

La notice est à l'intérieur, c'est pas trop compliqué.
Mais bon, par rapport à l'autre, son intérêt est de gérer les ex et autres
%, donc de ne pas imposer les px.

Je crains que votre page ne passe pas la validation CSS.

J'avais l'intention de le faire de toute façon avant de mettre la
page en ligne (beaucoup d'autres pages vont être modifiées).
Je n'avais que 7 erreurs ou avertissements tous bénins et qui ne
concernaient que des "alt" oubliés et mon menu ... ... de bas de
page qui, donc, va disparaître.
Affaire réglée pour ce point.

Je parle de la validation CSS, pas du code HTML. le behavior par exemple est
une spécificité IE qui vous empêchera d'arborer le logo W3C même si le reste
est parfait.
D'où l'intérêt de virer ces .erdes dans une CSS séparée avec inclusion
conditionnelle (les commentaires IE, exemple dans mon cssfixed.htc).

--
Cordialement.

* Patrick BRUNET www.ipzb.fr www.ipzb-pro.com
* E-mail: lien sur http://zener131.eu/ContactMe

Guy Gruais

04/03/2009 à 16:06

Bonjour,

Vous allez être infiniment heureux d'apprendre que Patrick 'Zener' Brunet
vient d'écrire :

... ...bien des considérations dont certaines demeurent encore un peu
ténébreuses pour moi.
Je vais examiner tout cela un peu plus profondément.
Mais dans un premier temps, on m'a demandé de revoir la page d'accueil
suivant certains nouveaux critères.
Elle devient prioritaire.

Merci pour l'aide.
De toute façon, n'ayez crainte, il faudra que je revienne sur la page que
vous avez vue.

--
Cordialement

(inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/

Guy Gruais

04/03/2009 à 16:08

Bonjour,

Vous allez être infiniment heureux d'apprendre que SAM vient d'écrire :

en appliquant *aussi* cette unité à tout le reste ?

OK, je vais voir mais en attendant ... ... voir la réponse à Patrick 'Zener'
Brunet

--
Cordialement

(inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/

Menu vertical flottant

5 réponses

Veuillez sélectionner un problème