(Problème résolu) Menu fixe, marge avec IE

[Michel Aix]

Bonjour

Je fais un site avec un menu latéral à gauche fixe et j'ai mis une marge gauche pour que le texte laisse la place au menu. Tout va bien avec mes navigateurs Mac (y compris IE5) mais pas sur PC:

- le menu n'est pas fixe dans la page, mais je l'accepte (en attendant IE7 ) Quoique si on pouvait fixer ce menu...

- mais surtout mon menu est affecté de la marge gauche et se retrouve dans le texte.

Je suppose qu'il y a un pb de définition de boite mais je n'ai pas trouvé de mode d'emploi complet de l'éditeur CSS. Et travaillant sur Mac je ne peux travailler par essai-erreur.

Le site est visible à http://michel.liger.9online.fr/index.html

N'ayant pas accès à mon profil en postant je précise ma config:
iMac Intel, OS X 10.4.6, Nvu 1.0 fr avec KaZcadeS, URLCleaner et htmlheader.


Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X; fr) AppleWebKit/418 (KHTML, like Gecko) Safari/417.9.2

[chinon37]

c'est normal, la position "fixed" n'est pas acceptée par IE / pc
un début de solution (pis-aller) ici:
http://tagsoup.com/-dev/null-/css/fixed/
Je ne l'ai pas testée

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

[Mongo Bob]

Chez moi (pc), sous IE6 le menu n'est pas dans le texte mais sous le texte, en tout cas absolument pas mélangé au texte :
Tu es sûr que la fois où tu as constaté le pb, la feuille de style était bien liée?
Tu as un mac donc tu as peut-être demandé à quelqu'un de regarder en ligne depuis son pc, est-ce que à ce moment-là, le chemin vers la feuille de style ne pointait pas vers ton disque dur (ce qui fait comme si elle était absente).
J'ai pris tout ton code et css sur mon pc et avant de lier la feuille de style, menu et texte était mélangés, je lie la feuille et ok, le menu s'est déplacé hors du texte.
Oups, c'est même plus subtil :
1/ sans feuille de style : FF : menu mélangé avec le texte, IE : menu dessous
2/ avec.......................: FF : parfait, menu bien à gauche du texte, IE : pareil menu dessous.
C'est bien curieux, comme si IE était indifférent à la feuille de style.

Je suppose qu'il y a un pb de définition de boite

A 100% d'accord.
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

[Mongo Bob]

Voilà ce que j'ai fait (sans les images...) :
http://jlwebnet.free.fr/
Si ça te convient en gros , il faudra pêcher là-dedans les éléments que tu veux garder et virer les autres, au moins, le menu latéral n'est jamais mélangé avec le texte ni bêtement en-dessous, que ce soit sous FF, sous IE, en 800x600 comme en 1280x1024 avec un pc, j'ai pas testé sous Mac.
Il faudrait imposer à FF et IE la même position de menu latéral que tu préfères, puisque tu ne peux obtenir de le fixer sous IE étant donné la défaillance de celui-ci rappelée par Chinon37 (à moins que le lien qu'il indique "fixe" -c'est le cas de le dire- le pb), que au moins il soit soit en haut soit au milieu (en bas je crois pas), dans les 2 navigateurs, et voir après d'autres navigateurs, systèmes pc ou mac (IE/mac et safari) etc... comme on fait d'habitude.
PS : Les codes css et html ne peuvent pas être recopiés tels quels, j'ai fait ça en vitesse pour que ça marche, mais tout le style devrait être en css, là, le tableau par exemple a un bout de style en html, un autre en css, tiens au fait tu peux voir le html, mais je te mets aussi un lien de la css (vu que je l'ai renommée ) :
http://jlwebnet.free.fr/qcstyle.css


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

[Michel Aix]

Merci Mongo et Chinon37

Je dois suspendre qques jours mon activité web. Je regarderai cela la semaine qui vient.

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X; fr) AppleWebKit/418 (KHTML, like Gecko) Safari/417.9.3

[Invité]

Bonjour

merci pour vos réponses et désolé pour ma réaction tardive mais une charge d'activité prof m'avait éloigné du site.

je vais maintenant tester tout ceci



Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/418 (KHTML, like Gecko) Safari/417.9.3

[Télémac]

Voilà ce que j'ai fait (sans les images...) :
http://jlwebnet.free.fr/
Si ça te convient en gros , il faudra pêcher là-dedans les éléments que tu veux garder et virer les autres, au moins, le menu latéral n'est jamais mélangé avec le texte ni bêtement en-dessous, que ce soit sous FF, sous IE, en 800x600 comme en 1280x1024 avec un pc, j'ai pas testé sous Mac.
Il faudrait imposer à FF et IE la même position de menu latéral que tu préfères, puisque tu ne peux obtenir de le fixer sous IE étant donné la défaillance de celui-ci rappelée par Chinon37 (à moins que le lien qu'il indique "fixe" -c'est le cas de le dire- le pb), que au moins il soit soit en haut soit au milieu (en bas je crois pas), dans les 2 navigateurs, et voir après d'autres navigateurs, systèmes pc ou mac (IE/mac et safari) etc... comme on fait d'habitude.
PS : Les codes css et html ne peuvent pas être recopiés tels quels, j'ai fait ça en vitesse pour que ça marche, mais tout le style devrait être en css, là, le tableau par exemple a un bout de style en html, un autre en css, tiens au fait tu peux voir le html, mais je te mets aussi un lien de la css (vu que je l'ai renommée ) :
http://jlwebnet.free.fr/qcstyle.css


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

ok je vais pêcher dans tout ceci et vais revenir vers vous le ca échéant

juste une question, ton modèle me convient le menu gauche reste en place mais pas le haut (bannière que je souhaite aussi laisser en place).
pour info le menu haut devant rester en place avec la bannière sera ma navigation générale de de tout mon site qui reste en place pour chaque page chargée

le menu gauche sera la navigation de la page
le menu droit la navigation dans la rubrique

exemple

menu haut :vidéo, audio

en cliquant sur audio resteront en place le menu haut et la bannière et seront chargées

a gauche le menu de la page chargée
au centre la page
à droite le menu de la rubrique audio: audio 1,auidio 2
etc

voici mon idée que j'esssaye de mettre en place avec NVU

merci beaucoup pour votre aide et dévouement

[Télémac]

Bonjour

merci pour vos réponses et désolé pour ma réaction tardive mais une charge d'activité prof m'avait éloigné du site.

je vais maintenant tester tout ceci



Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/418 (KHTML, like Gecko) Safari/417.9.3

et zut encore moi, bien que j'ai activé "se souvenir" de moi chaque fois il me perd et de plus je n'ai pas d'annonce de post réponse dans mon émail

[Mongo Bob]

Euh... Je crois qu'il y a une petite confusion entre les posts, Télémac, on parlait pas de ton site sur la technique Audio mais de celui de Michel Aix (assoc de consommateurs) qui a créé le sujet, remarque si tu peux trouver qqch à utiliser dans l'exemple, tant mieux! Mais je répète que les codes css et html sont un peu beaucoup fouillis et n'importe quoi, faudrait un coup de balai, je peux le faire si l'effet convient.

[Télémac]

Milles excuses tout le monde

je réponds au post de Michel croyant que c'est le mien comme j'ai un peu les mêmes problèmes



Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/418 (KHTML, like Gecko) Safari/417.9.3

[Michel Aix]

Chez moi (pc), sous IE6 le menu n'est pas dans le texte mais sous le texte, en tout cas absolument pas mélangé au texte :
Tu es sûr que la fois où tu as constaté le pb, la feuille de style était bien liée?
Tu as un mac donc tu as peut-être demandé à quelqu'un de regarder en ligne depuis son pc, est-ce que à ce moment-là, le chemin vers la feuille de style ne pointait pas vers ton disque dur (ce qui fait comme si elle était absente).
J'ai pris tout ton code et css sur mon pc et avant de lier la feuille de style, menu et texte était mélangés, je lie la feuille et ok, le menu s'est déplacé hors du texte.
Oups, c'est même plus subtil :
1/ sans feuille de style : FF : menu mélangé avec le texte, IE : menu dessous
2/ avec.......................: FF : parfait, menu bien à gauche du texte, IE : pareil menu dessous.
C'est bien curieux, comme si IE était indifférent à la feuille de style.

Je suppose qu'il y a un pb de définition de boite

A 100% d'accord.
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Bonjour Mongo Bob

Sur les autres pages, le menu est sur le texte mais de toutes façons avec la même marge que lui.
Oui, j'ai une feuille liée, depuis le début. Au fait comment vérifier qu'une feuille est liée ? Elle doit l'être puisque je n'en ai qu'une et qu'elle fonctionne avec toutes les pages.
J'ai demandé à qqu'un de regarder sur son PC, ça marche avec FF et pas avec IE6.

Pour la fixité du menu, ce n'est pas très important, je pense qu'il se mettra sur la page à l'endroit où il était au moment de l'enregistrement.
C'est surtout au menu latéral que je tiens, pour des raisons d'ergonomie.

Bon, je vais regarder ton message suivant.

[Michel Aix]

Voilà ce que j'ai fait (sans les images...) :
http://jlwebnet.free.fr/
Si ça te convient en gros , il faudra pêcher là-dedans les éléments que tu veux garder et virer les autres, au moins, le menu latéral n'est jamais mélangé avec le texte ni bêtement en-dessous, que ce soit sous FF, sous IE, en 800x600 comme en 1280x1024 avec un pc, j'ai pas testé sous Mac.
Il faudrait imposer à FF et IE la même position de menu latéral que tu préfères, puisque tu ne peux obtenir de le fixer sous IE étant donné la défaillance de celui-ci rappelée par Chinon37 (à moins que le lien qu'il indique "fixe" -c'est le cas de le dire- le pb), que au moins il soit soit en haut soit au milieu (en bas je crois pas), dans les 2 navigateurs, et voir après d'autres navigateurs, systèmes pc ou mac (IE/mac et safari) etc... comme on fait d'habitude.
PS : Les codes css et html ne peuvent pas être recopiés tels quels, j'ai fait ça en vitesse pour que ça marche, mais tout le style devrait être en css, là, le tableau par exemple a un bout de style en html, un autre en css, tiens au fait tu peux voir le html, mais je te mets aussi un lien de la css (vu que je l'ai renommée ) :
http://jlwebnet.free.fr/qcstyle.css


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Merci beaucoup, ça marche avec FF, Safari et IE5.
J'ai regardé le code pour .menu_lateral. A part des changements d'unité, il me semble que le seul changement est l'introduction de float: left. Dans ton post précédent tu disais qu'il devait y avoir un pb de boite. Je suppose que le float: left en est la solution ?

Je crois avoir trouvé la commande flottement dans l'éditeur CSS et je l'ai fixée à gauche. Je poste la feuille modifiée sur le site. Si tu peux vérifier avec IE.

J'ai regardée la suggestion de Chinon37, mais c'est trop compliqué pour moi

PS est-ce que quelqu'un sait si la béta de IE7 respecte mieux les standards que la version 6 ?

[Mongo Bob]

Dans ton post précédent tu disais qu'il devait y avoir un pb de boite. Je suppose que le float: left en est la solution ?

Exactement, float est une des propriétés de la boîte.

Mais je ne vois pas comment faire pour introduire ça dans ma css, car l'éditeur Nvu est en français et je ne vois rien qui ressemble à float

Outils>Editeur css>sélectionner la propriété>onglet "Boîte">"Flottante" (="float"), 2ème en haut à gauche

PS est-ce que quelqu'un sait si la béta de IE7 respecte mieux les standards que la version 6 ?

C'est selon :
http://www.zdnet.fr/actualites/informat ... 314,00.htm
ou :
http://www.pcinpact.com/actu/news/Inter ... ndards.htm
Si jpbardiau passe par là, il devrait je crois à ce que j'ai compris, te dire que non catégorique, il l'a installée, moi, non, j'arrive pas à l'avoir en doublé avec IE6, je l'ai jetée. Je voudrais les 2, 6 et 7, ou rien.

Je reviendrai vers toi pour clarifier un peu ce que j'ai fait, vu que y'a du fouillis...

[Michel Aix]

Mongo Bob
Entre temps, j'ai trouvé et modifié mon post !...
La css est sur le site d'essai http://michel.liger.9online.fr

Un utilisateur de PC me dit que le menu est toujours au même endroit. Il y aurait donc autre chose.
J'ai aussi ajouté une marge haute de 100 px pour mon menu pour essayer de gérer sa position verticale sous IE.

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X; fr) AppleWebKit/418 (KHTML, like Gecko) Safari/417.9.3

[Mongo Bob]

Un utilisateur de PC me dit que le menu est toujours au même endroit. Il y aurait donc autre chose.

IL Y A : la 1ère chose est que dans ma version, dans la page de code html, le div menu_lateral, apparaît juste après la ligne du body, comme tu peux le voir dans l'affichage source, ce qui permet de l'afficher tout en haut, ce qui est mieux que de l'avoir en-dessous avec IE (ou mélangé au texte).

D'autre part, j'ai mis ce div avec ces propriétés css là :

menu_lateral {
border: 3px solid #990000;
font-family: Courier New,Courier,monospace;
text-align: left ! important;
float: left;
margin-left: 0%;
width: 15%;
position: relative;
}

J'ai souligné les modifs.
Chez toi, dans la page html (en tant que code, je veux dire) le div menu_lateral apparaît en-dessous du tableau qui commence par "Qui sommes-nous?", et, dans ton css :

.menu_lateral {
border: 3px solid #990000;
font-family: Courier New,Courier,monospace;
position: fixed;
width: 6cm;
text-align: left ! important;
margin-left: 5px;
float: left;
margin-top: 100px;
}

"width=6cm", à la rigueur, je préfère "15%", c'est plus souple, "position fixed" , autant jeter ça à la poubelle si tu n'appliques pas la solution de Chinon37.
Que IE7 respecte ou non les standards et la position "fixed", de toute façon, il faut surtout considérer quels navigateurs viennent sur ton site et pour le moment, c'est surtout IE6 et FF, alors, tu es bien obligé d'en tenir compte et de laisser tomber "fixed"?
Aussi, par rapport à ce que tu voulais, "ma" solution n'est qu'un pis aller, et il faut voir à faire le ménage dans mes codes css et html si ça te plaît malgré tout.
Fais-moi signe.
Pour insister, oui, il y a bien autre chose que la position "float left" pour régler ton problème, et c'est l'ordre d'apparition des lignes de code qui concernent le div class "menu_lateral" dans la page de code html.
Au fait, qu'est-ce que "! important" après "text-align : left"? Ton doigt aurait-il glissé?
J'oubliais, chez moi, ton tableau principal est "width:75%", tu as mis "width:615px", je crois que les % sont plus souples, mais ça ne jouait pas sur ton problème.