OVH Cloud OVH Cloud

Menu vertical flottant

25 réponses
Avatar
Guy Gruais
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.siaurg@free.invalid (inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/

10 réponses

1 2 3
Avatar
Pierre Goiffon
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...
Avatar
Pierre Goiffon
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
Avatar
Guy Gruais
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.

--
Cordialement

(inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/
Avatar
Pierre Goiffon
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
Avatar
Guy Gruais
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
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/

--
Cordialement

(inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/
Avatar
Olivier Miakinen
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.
Avatar
Guy Gruais
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


--
Cordialement

(inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/
Avatar
Pierre Goiffon
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...
Avatar
Patrick 'Zener' Brunet
Bonjour.

"Pierre Goiffon" a écrit dans le message
de news 49abdd98$0$24002$
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...



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.

--
Cordialement.

* Patrick BRUNET www.ipzb.fr www.ipzb-pro.com
* E-mail: lien sur http://zener131.eu/ContactMe
Avatar
SAM
Le 3/3/09 8:13 AM, Patrick 'Zener' Brunet a écrit :
Bonjour.

"Pierre Goiffon" a écrit dans le message
de news 49abdd98$0$24002$
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
1 2 3