[résolu] un menu fixe, même avec IE !

[dj.dom]

Bonjour

J'aimerai faire un menu qui reste fixe quand on fait défiler la page à l'aide de l'ascenceur. J'ai fait des recherches et je tombe toujours sur les mêmes réponses, à savoir : détacher l'élément du texte et donner à Position la valeur "fixed". Mais ça ne fonctionne pas avec IE !
Hors, je sais que c'est possible puisque je me souviens l'avoir déjà vu. J'ai d'ailleurs trouvé une page qui le fait avec un menu horizontal : http://www.keys-artworks.com/Keys-Artworks_V3.html
Je l'ai enregistré et j'ai essayé de l'éditer avec NVU pour comprendre, mais impossible... NVU l'ouvre mais ne me permet pas de changer quoi que ce soit. Donc je l'ai ouverte dans Word, et là on dirait qu'il y a comme deux pages dans une seule...

Je ne connais quasiment rien au html, donc je ne peux pas examiner le code source pour comprendre. Mais en tout cas, j'aimerai bien savoir comment c'est possible et faire la même chose avec un menu vertical.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)

[Kazé]

La page que tu cites en lien utilise des cadres, ce qui est très différent d'un menu fixe !

Je ne connais quasiment rien au html, donc je ne peux pas examiner le code source pour comprendre.

Auquel cas tu ne pourras pas faire de menu fixe sous IE. Comme pour pas mal de choses un peu "fines", il faut passer par le code HTML. On ne peut pas tout faire "à la souris" !
Si tu ne veux pas apprendre le code HTML / CSS, je te conseille de faire une mise en page plus simple...

Sur mes pages (celle-ci par exemple), j'ai fait un menu fixe pour IE avec un peu de JavaScript.
Dans mes feuilles de style, j'utilise la propriété "fixed", et dans l'en-tête de ma page il y a :

Code : Tout sélectionner

<!--[if lt IE 7]> <style> 
body { background: url(null) fixed ; } 
#sidebar { position: absolute; top:expression(documentElement.scrollTop+body.scrollTop+10); } 
</style> <![endif]-->

c'est une feuille de style spécifique qui n'est vue que par IE. Le code est à adapter à tes pages.

Fais une recherche sur le forum, tu verras d'autres solutions équivalentes. Ou pose ta question dans le forum "Développement Web".

[dj.dom]

Ah d'accord je vois. On m'a récemment donné la même solution pour faire fonctionner la transparence des png avec IE. Merci pour le code.

J'ai fait quelques recherches sur les cadres ou frames, en fait ce sont simplement des pages que l'on créé séparement et qu'on charge dans une seule page. C'est bien expliqué ici : http://www.w3.org/TR/REC-html40/present/frames.html

Je ne sais pas quoi choisir entre les deux. Quelles sont les avantages et inconvénients de chaque méthode ? Quelle méthode a le plus de chance de passer partout ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)

[Kazé]

Les frames sont très faciles à faire, mais ils sont passés de mode, et surtout ils ont pas mal d'inconvénients : accessibilité, recensement du site, ...

AMHA une rustine en javascript pour émuler sous IE les styles qu'il ne supporte pas, c'est une meilleure méthode. Un chouille plus technique à mettre en oeuvre, mais le jeu en vaut la chandelle. Accessoirement, d'un point de vue didactique, ça te permet de prendre de suite des bonnes habitudes pour la mise en page.

La référence absolue pour ce type de script, c'est Dean Edwards avec sa librairie "IE7". Rien à voir avec la prochaine version d'IE, c'est un ensemble de scripts qui permettent à IE de se comporter comme les navigateurs standard.

[Invité]

J'ai choisi la méthode avec CSS.

J'ai mis ça entre les balises HEAD :

<!--[if lt IE 7]> <style>
body { background: url(null) fixed ; }
#sidebar { position: absolute; top:expression(documentElement.scrollTop+body.scrollTop+10); }
</style> <![endif]-->

mais ça ne marche toujours pas...

Il n'y a pas un petit fichier .css à créer ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)

[dj.dom]

(oups j'ai posté en tand qu'invité)

J'ai trouvé ça sur un site : (http://www.siteduzero.com/tuto-3-6820-1-cote-css.html)

<!--[if lte IE 6]>
<style type="text/css">
#div {
position: absolute;
top: expression(documentElement.scrollTop+body.scrollTop+30);
left: expression(documentElement.scrollLeft+body.scrollLeft+30);
}
body {
background: url(null) fixed ; /* Pour éviter le sautillement sous IE */
}
</style>
<! endif -->

Je l'ai mis entre les balises HEAD mais ça ne fait rien. J'ai retiré le "#" devant "div", ça a fixé un élément mais pas le bon... Comment je fais pour lui dire quel "div" il doit fixer ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)

[Do-IT]

C'est pas malin de mettre div comme nom d'ID.
Mets plutot un nom d'ID en rapport avec le contenu, je le connais pas alors au hazard tu remplaces #div par #fixe
et dans ta page dans ta balise div tu lui assignes ton style <div id="fixe">
par exemple

[dj.dom]

Ok, ça marche. Merci beaucoup.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)

[dj.dom]

Non, finalement il y a un problème : je ne peux pas utiliser les deux....

Si je ne met que <div id="fixe"> alors ça marche avec IE mais pas les autres. Si je rajoute style="position: fixed; top: 13px; left: 1px;" alors ça marche avec les autres mais plus avec IE...

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)

[Do-IT]

Un peu de lecture sur ce sujet. N'hésite pas à repartir sur un modèle propre ce sera sûrement plus facile.

[dj.dom]

Ok, ça y'est ça fonctionne parfaitement !! J'avais fait une erreur toute bête mais difficile à trouver.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FDM)