Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Menu vertical flottant

13 views
Skip to first unread message

Guy Gruais

unread,
Feb 25, 2009, 10:31:41 AM2/25/09
to
Bonjour,

On m'a demandé de préparer un menu flottant sur les pages du site en
signature.
J'ai trouvé sur le web un script qui donnerait ceci :

http://paysderetz.free.fr/test/menuflotvert.html
(ne pas tenir compte des couleurs qui seront sans doute changées)

Mon problème est que cette solution nécessite un écran d'au moins 970 px de
large pénalisant ainsi très fortement les 5% d'internautes qui ne disposent
pas mieux qu'un écran 800 x 600.
Le script JS pompé *ajoute* à la largeur de la page (minimum de 760 px ==>
largeur du bandeau) la largeur de la colonne "menu".

N'y a-t-il pas moyen d'*inclure* cette largeur au lieu de l'ajouter pour
pouvoir rester en-deçà des 800 px ?

Merci.

P.S. : Il y a la possibilité de diminuer la largeur du bandeau mais je ne
m'y résoudrais que si je ne trouve pas d'autre solution.

--
Cordialement

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

Pascale

unread,
Feb 25, 2009, 10:59:46 AM2/25/09
to
"Guy Gruais" <guy.s...@free.invalid> écrivait
news:go3o8u$25hb$1...@obelix.gegeweb.org:

> Le script JS pompé *ajoute* à la largeur de la page (minimum de 760 px
> ==> largeur du bandeau) la largeur de la colonne "menu".

Il me paraît comme qui dirait légèrement superflu, le Javascript en
question...

--
Pascale

Pierre Goiffon

unread,
Feb 25, 2009, 11:41:32 AM2/25/09
to
Guy Gruais wrote:
> On m'a demandé de préparer un menu flottant sur les pages du site en
> signature.
> J'ai trouvé sur le web un script qui donnerait ceci :
>
> http://paysderetz.free.fr/test/menuflotvert.html
> (ne pas tenir compte des couleurs qui seront sans doute changées)

Ce type de fonctionnement existe en CSS, il s'agit de position:fixed.
C'est supporté par IE7 je crois me rappeler (et ça semble confirmé par
une recherche rapide). Pour IE6 il existe de nombreux hacks, vous aurez
assez de facilité à en trouver ! Il y avait par exemple dans le temps le
Dean Edward's IE7 (http://dean.edwards.name/IE7/ - la solution pour le
position:fixed pouvait être utilisée de manière modulaire, sans charger
tout le reste) mais la librairie a subit plusieurs changements
d'importance que je n'ai pas suivi (?)

Guy Gruais

unread,
Feb 25, 2009, 11:43:19 AM2/25/09
to
Bonjour,

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


> Il me paraît comme qui dirait légèrement superflu, le Javascript en
> question...

Possible :-?
Mais comment y remédier ?
En CSS ? Pas évident pour moi d'obtenir un tel menu flottant

Guy Gruais

unread,
Feb 25, 2009, 11:50:42 AM2/25/09
to
Bonjour,

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


> Ce type de fonctionnement existe en CSS, il s'agit de position:fixed.
> C'est supporté par IE7 je crois me rappeler

J'avais effectivement trouvé sur le web cette solution.
Mais il était indiqué que cela ne fonctionnait pas avec IE7.
J'ai vérifié. Effectivement IE7 n'en veut pas alors que Firefox et Opera
s'en accommodent très bien.

SAM

unread,
Feb 25, 2009, 2:21:17 PM2/25/09
to
Le 2/25/09 4:31 PM, Guy Gruais a écrit :

> Bonjour,
>
> On m'a demandé de préparer un menu flottant sur les pages du site en
> signature.

Pour Firefox et autres c'est très facile :
il suffit qu'il soit en position fixed
et que le contenu après le bandeau lui laisse la place à gauche
(marge gauche)

Pour IE (au moins <7) il devra être en absolute
et un JS devra le glisser lors du scroll vertical

> J'ai trouvé sur le web un script qui donnerait ceci :
>
> http://paysderetz.free.fr/test/menuflotvert.html

Je trouve qu'il y a beaucoup de scripts sur cette page.
De plus ils sont un peu éparpillés partout.

Et comment se fait-ce qu'on ait un div dans le head ?

> (ne pas tenir compte des couleurs qui seront sans doute changées)

C'est à mon idée un peu compliqué, puisqu'on n'a besoin que du scroll
vertical.

> Mon problème est que cette solution nécessite un écran d'au moins 970 px
> de large pénalisant ainsi très fortement les 5% d'internautes qui ne
> disposent pas mieux qu'un écran 800 x 600.
> Le script JS pompé *ajoute* à la largeur de la page (minimum de 760 px
> ==> largeur du bandeau) la largeur de la colonne "menu".

Il doit suffire d'intégrer le menu au div conteneur principal après le
bandeau

Ha! pas d'bol ...
y a ni conteneur pour le bandeau,
ni, surtout, de conteneur pour le contenu.

> N'y a-t-il pas moyen d'*inclure* cette largeur au lieu de l'ajouter pour
> pouvoir rester en-deçà des 800 px ?

body { margin-left: 120px; }
h1 { margin-left: -120px; }

et régler le positionnement du menu

Par exemple ?

--
sm

Pierre Goiffon

unread,
Feb 26, 2009, 4:18:58 AM2/26/09
to
Guy Gruais wrote:
>> Ce type de fonctionnement existe en CSS, il s'agit de position:fixed.
>> C'est supporté par IE7 je crois me rappeler
>
> J'avais effectivement trouvé sur le web cette solution.
> Mais il était indiqué que cela ne fonctionnait pas avec IE7.
> J'ai vérifié. Effectivement IE7 n'en veut pas alors que Firefox et Opera
> s'en accommodent très bien.

Est-ce que vous auriez votre essai en ligne ?

Sur le blog officiel ça indique bien être supporté :
http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx
on lit : "Fixed positioning support"

Patrick 'Zener' Brunet

unread,
Feb 26, 2009, 8:31:14 AM2/26/09
to
Bonjour.

"Guy Gruais" <guy.s...@free.invalid> a écrit dans le message
de news go3o8u$25hb$1...@obelix.gegeweb.org


> Bonjour,
>
> On m'a demandé de préparer un menu flottant sur les pages du site en
> signature.
> J'ai trouvé sur le web un script qui donnerait ceci :
>
> http://paysderetz.free.fr/test/menuflotvert.html
> (ne pas tenir compte des couleurs qui seront sans doute changées)
>

Il sautille pas mal... Comme c'est sur mon Firefox, ça doit être dû au
Javascript.
Dommage parce que sur Firefox le position:fixed; fonctionne bien tout seul.

Sur IE 6 (toujours très répandu donc a priori incontournable) il faut monter
un composant HTC pour avoir l'équivalent. Il y a aussi un hack dans la CSS
(le background) pour éviter le sautillement.

> Mon problème est que cette solution nécessite un écran d'au moins
> 970 px de large pénalisant ainsi très fortement les 5%
> d'internautes qui ne disposent pas mieux qu'un écran 800 x 600.
> Le script JS pompé *ajoute* à la largeur de la page (minimum de 760
> px ==> largeur du bandeau) la largeur de la colonne "menu".
>
> N'y a-t-il pas moyen d'*inclure* cette largeur au lieu de l'ajouter
> pour pouvoir rester en-deçà des 800 px ?
>

J'ai travaillé la question sur mes sites et j'ai trouvé une solution: rendre
le menu escamotable.

Evidemment ça implique sur IE un autre HTC pour gérer le :hover sur un DIV.
Il faut prévoir une solution dégradée pour le cas sans Javascript (et même
une autre pour le cas avec mais sur un vieux navigateur, pas vrai SAM?).

Bref c'est un peu complexe mais c'est très possible, sous une forme
compatible avec la plupart des navigateurs et qui valide à 100%.

> Merci.
>
> P.S. : Il y a la possibilité de diminuer la largeur du bandeau mais
> je ne m'y résoudrais que si je ne trouve pas d'autre solution.

C'est un gros dilemme:
* Déjà dans le principe, réserver une cheminée bien large parce que le menu
va en occuper une partie en hauteur, c'est un peu dommage,
* Et ensuite, les items de menu multilignes c'est pas forcément terrible non
plus, et ça peut conduire à déborder par le bas, rendant les derniers
inaccessibles (notamment si le visiteur grossit le texte).
Si ça vous intéresse, ce point est un peu discuté sur la page des réglages
d'accessibilité...

Cordialement.

--
Cordialement.

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

Guy Gruais

unread,
Feb 26, 2009, 10:46:27 AM2/26/09
to
Bonjour,

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


> Je trouve qu'il y a beaucoup de scripts sur cette page.
> De plus ils sont un peu éparpillés partout.

Eeeeeeeeeuuuuuuuhhhhhhhhhhhhhh, pas tout compris, là !
A ma connaissance, seuls 3 scripts apparaissent :
1 - le script du menu flottant qui se trouve dans le fichier smbar.js
2 - le script de Xiti
3 - les boutons du menu
4 - l'ancien menu qui va donc disparaître

> Et comment se fait-ce qu'on ait un div dans le head ?

Effectivement, j'ai été très surpris de ceci.
Mais ne connaissant rien au JS, je me suis bien gardé de déplacer ce
<div>...</div>
La preuve de ce que je dis :

http://files.codes-sources.com/fichier.aspx?id=32399&f=exemple.htm

depuis, je l'ai déplacé pour le mettre dans le <body> et cela fonctionne
très bien.

> Ha! pas d'bol ...
> y a ni conteneur pour le bandeau,
> ni, surtout, de conteneur pour le contenu.

J'ai donc créé un <div> pour y placer bandeau et coordonnées de la société

> body { margin-left: 120px; }
> h1 { margin-left: -120px; }

Effectivement en jouant sur ces paramètres, on obtient quelque chose de
satisfaisant en mettant <div id= conteneur du bandeau+coordonnées> à la
place de <h1>
Il me reste à diminuer la hauteur du menu si je veux rester dans les 640px
de hauteur d'un écran 800 x 600.

Merci Sam

Guy Gruais

unread,
Feb 26, 2009, 11:03:49 AM2/26/09
to
Bonjour,

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

> Est-ce que vous auriez votre essai en ligne ?

Je viens de le reconstituer :

http://paysderetz.free.fr/test/menuflotvert2.html

Parfait sous Firefox et Opera (pas le moindre sautillement) mais non
opérationnel sous IE5 et IE7

Guy Gruais

unread,
Feb 26, 2009, 1:04:14 PM2/26/09
to
Bonjour,

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


> Il sautille pas mal... Comme c'est sur mon Firefox, ça doit être dû au
> Javascript.

sans doute

> J'ai travaillé la question sur mes sites et j'ai trouvé une solution:
> rendre le menu escamotable.
>
> Evidemment ça implique sur IE un autre HTC pour gérer le :hover sur
> un DIV. Il faut prévoir une solution dégradée pour le cas sans
> Javascript (et même une autre pour le cas avec mais sur un vieux
> navigateur, pas vrai SAM?).

Pffffffffiiiiiiiiiiiiiiiiiiiiiiiiioooooooooouuuuuuuu, sûrement pas dans mes
compétences

> Si ça vous intéresse, ce point est un peu discuté sur la page des
> réglages d'accessibilité...

Et où trouve-t-on cette page ?

Merci

Pierre Goiffon

unread,
Feb 27, 2009, 4:01:33 AM2/27/09
to
Guy Gruais wrote:
> Je viens de le reconstituer :
>
> http://paysderetz.free.fr/test/menuflotvert2.html
>
> Parfait sous Firefox et Opera (pas le moindre sautillement) mais non
> opérationnel sous IE5 et IE7

Votre page n'a pas de doctype !
Essayez d'en ajouter un avec URL pour que IE7 lise la page en mode de
rendu standard...

Pierre Goiffon

unread,
Feb 27, 2009, 4:27:43 AM2/27/09
to
Guy Gruais wrote:
>> J'ai travaillé la question sur mes sites et j'ai trouvé une solution:
>> rendre le menu escamotable.
>>
>> Evidemment ça implique sur IE un autre HTC pour gérer le :hover sur
>> un DIV. Il faut prévoir une solution dégradée pour le cas sans
>> Javascript (et même une autre pour le cas avec mais sur un vieux
>> navigateur, pas vrai SAM?).
>
> Pffffffffiiiiiiiiiiiiiiiiiiiiiiiiioooooooooouuuuuuuu, sûrement pas dans
> mes compétences

L'intégration d'un HTC uniquement pour gérer le position:fixed est
cependant très simple.
Une recherche Google sur "position:fixed ie htc" ramène quelques
résultats mais nécessite de fouiller un peu, je viens d'y passer
quelques minutes mais il faudrait y passer plus de temps

Guy Gruais

unread,
Feb 27, 2009, 5:30:02 AM2/27/09
to
Bonjour,

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

> Votre page n'a pas de doctype !

Effectivement le doctype avait disparu au cours de mes différentes
tentatives
Remis en place : même chose.
En relisant votre message, j'ai vu que j'avais oublié

> ... avec URL pour que IE7 lise la page en mode de
> rendu standard...

Et là, ça fonctionne après avoir cherché avec Google quelle URL indiquer.

Merci.
Encore une fois, je vais me coucher un peu moins stupide ce soir.

Pierre Goiffon

unread,
Feb 27, 2009, 6:22:00 AM2/27/09
to
Guy Gruais wrote:
>> Votre page n'a pas de doctype !
>
> Effectivement le doctype avait disparu au cours de mes différentes
> tentatives
> Remis en place : même chose.
> En relisant votre message, j'ai vu que j'avais oublié
>
>> ... avec URL pour que IE7 lise la page en mode de
>> rendu standard...
>
> Et là, ça fonctionne après avoir cherché avec Google quelle URL indiquer.

Le W3C propose un document avec une liste de doctype, je l'ai toujours
sous le coude :
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Guy Gruais

unread,
Feb 27, 2009, 6:28:07 AM2/27/09
to
Bonjour,

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

> Le W3C propose un document avec une liste de doctype, je l'ai toujours

Je suis malheureusement fâché à vie avec la langue de Shakespeare (trop tard
maintenant).
Beaucoup plus familiarisé avec celle de Molière, j'avais trouvé :

http://www.pompage.net/pompe/doctype/

Olivier Miakinen

unread,
Feb 27, 2009, 7:18:00 AM2/27/09
to
Le 27/02/2009 12:28, Guy Gruais a écrit :
>
>> Le W3C propose un document avec une liste de doctype, je l'ai toujours
>> sous le coude :
>> http://www.w3.org/QA/2002/04/valid-dtd-list.html
>
> Je suis malheureusement fâché à vie avec la langue de Shakespeare (trop tard
> maintenant).
> Beaucoup plus familiarisé avec celle de Molière, j'avais trouvé :
>
> http://www.pompage.net/pompe/doctype/

Avantage supplémentaire, il se limite aux sept premiers de la liste du
W3C, qui sont largement suffisants pour la plupart des auteurs. Il est
inutile par exemple d'aller chercher le doctype de HTML 2.0, quant à
ceux qui utilisent MathML et SVG je ne considère pas qu'il s'agisse de
« la plupart des auteurs ».

En fait, en dehors des pages avec frames qui se font heureusement de
plus en plus rares, je pense que trois DTD devraient couvrir la plupart
des besoins :
- HTML 4.01 Strict (mon choix de prédilection) ;
- HTML 4.01 Transitional (point de passage pour ceux qui migrent un
vieux site vers les standards) ;
- XHTML 1.0 Strict (pour ceux qui veulent préparer l'avenir).

J'en exclus volontairement le XHTML 1.0 Transitional.

Guy Gruais

unread,
Feb 28, 2009, 6:21:09 AM2/28/09
to
Bonjour,

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

> L'intégration d'un HTC uniquement pour gérer le position:fixed est
> cependant très simple.
> Une recherche Google ... ...

Merci Pierre et Google.
J'espère avoir trouvé
En tout cas semble compatible avec IE7, IE6, Opera 8.54, Opera 9.63, Firefox
3.06 et Firefox 2.0.0.20 pour tous formats 800 x 600 et plus

http://paysderetz.free.fr/test/menuflotvert7_1.html

Pierre Goiffon

unread,
Mar 2, 2009, 8:22:32 AM3/2/09
to
Guy Gruais wrote:
> Merci Pierre et Google.
> J'espère avoir trouvé
> En tout cas semble compatible avec IE7, IE6, Opera 8.54, Opera 9.63,
> Firefox 3.06 et Firefox 2.0.0.20 pour tous formats 800 x 600 et plus
>
> http://paysderetz.free.fr/test/menuflotvert7_1.html

Bravo ! C'est ok sur mon IE7 et Fx3 Windows.
Attention, j'ai une image en tout début de page qui est cassée...

Patrick 'Zener' Brunet

unread,
Mar 3, 2009, 2:13:22 AM3/3/09
to
Bonjour.

"Pierre Goiffon" <pgoi...@free.fr.invalid> a écrit dans le message
de news 49abdd98$0$24002$426a...@news.free.fr

Bien ! Maintenant, améliorations possibles:

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.

Ensuite, il faut considérer le grossissement de la police de base (Ctrl +
molette): le texte du menu suit mais pas son enveloppe. C'est possible si
vous la dimensionnez plutôt en ex (ainsi que la cheminée dans la page).
C'est compatible avec le HTC de base si vous laissez le positionnement top
en px. 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
(lien valide 21 jours).
A votre guise bien entendu.

Je crains que votre page ne passe pas la validation CSS.
C'est possible en utilisant les commentaires spécifiques de IE pour ajouter
les correctifs et hacks à une CSS par ailleurs conforme. Ca marche très bien
(en fait je recommande de les isoler dans une CSS additionnelle liée de
cette manière).
Sur mes sites je l'insère en PHP parce que j'ai une détection complète de IE
et d'autres choses, mais ca marchait comme ça il y a quelques mois encore.

SAM

unread,
Mar 3, 2009, 4:35:26 AM3/3/09
to
Le 3/3/09 8:13 AM, Patrick 'Zener' Brunet a écrit :

> Bonjour.
>
> "Pierre Goiffon" <pgoi...@free.fr.invalid> a écrit dans le message
> de news 49abdd98$0$24002$426a...@news.free.fr
>> Guy Gruais wrote:
>>> Merci Pierre et Google.
>>> J'espère avoir trouvé
>>> En tout cas semble compatible avec IE7, IE6, Opera 8.54, Opera
>>> 9.63, Firefox 3.06 et Firefox 2.0.0.20 pour tous formats 800 x 600
>>> et plus
>>>
>>> http://paysderetz.free.fr/test/menuflotvert7_1.html
>> Bravo ! C'est ok sur mon IE7 et Fx3 Windows.
>> Attention, j'ai une image en tout début de page qui est cassée...

Ça a dû être réparé ?
Cache désactivé, je pense que tout y est, sauf l'image du soldat.
JS désactivé : ça marche bien avec mon Fx.
OK avec mon Safari.3

> Bien ! Maintenant, améliorations possibles:
>
> Chez moi le défilement (molette de la souris) est très saccadé sur Firefox 2

Je n'ai pas ce pb avec mon Fx.3
(je crois que je l'ai réglé pour un défilement "doux" ?)
(ha! non ! alors c'est la molette qui a dû l'être ?)

> (donc normalement sans artifice), avec en plus un curieux effet sur les
> lettres de l'extrémité gauche du texte principal.

sur le "contenu" ?
Non, je ne vois pas ça.

> Ensuite, il faut considérer le grossissement de la police de base (Ctrl +
> molette): le texte du menu suit mais pas son enveloppe.

Heu ... oui ...
Mébon : on prend de + en + l'habitude de ce désagrément :-(

Au moins ici en "normal" c'est lisible chez moi (contrairement à
certains sites qui veulent avoir des menus en 7px tandis que je
n'accepte rien en-dessous de 10px, par exemple)

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

Ce serait peut-être bien d'en profiter pour obtenir une certaine
réactivité au survol du menu ?

--
sm

Guy Gruais

unread,
Mar 3, 2009, 4:42:46 AM3/3/09
to
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.

SAM

unread,
Mar 3, 2009, 5:18:20 AM3/3/09
to
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

unread,
Mar 3, 2009, 12:49:48 PM3/3/09
to
Bonsoir.

"Guy Gruais" <guy.s...@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).

Guy Gruais

unread,
Mar 4, 2009, 10:06:53 AM3/4/09
to
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.

Guy Gruais

unread,
Mar 4, 2009, 10:08:35 AM3/4/09
to
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

0 new messages