Menu au centre

Bonjour,

J'ai fait un site internet (inspiré d'un autre design) et tout fonctionne bien avec les navigateurs que j'ai testés : firefox, ie6, safari, konqueror...

Le problème est que visiblement ie7 ne fonctionne pas. Alors là je tombe de haut, moi qui pensait que c'était impossible de faire pire que ie6... Mais bon, mon problème est que je ne dispose pas de ie7 pour mes tests. Et j'en suis donc réduit, après avori passé en revu ma feuille css, à faire appel aux bonnes volontés de Alsareations pour tenter d'en trouver l'explication.

Le site internet se trouve à l'adresse se trouve à l'adresse http://lespiedssurterreamap.free.fr/ et il est xhtml strict.

Voici en copie d'écran ce que ça donne avec ie7.



Merci de vos avis.

Bonsoir ploc,

Fixe ou float:left ?

div.menu {
background:#E3EBCC none repeat scroll 0%;
[#red]float:left;[/#]
font-size:1.1em;
margin-left:10px;
[#red]position:fixed;[/#]
width:200px;
}

En flottant (à gauche) tu as le même rendu que sous IE6, en position fixe, suivant la taille de la fenêtre d'affichage ton menu pourra être tronqué ce qui n'est pas top...

Re,

L'image de ton entête est réellement très grande (1398px)...pour "les petits écrans"(17' pour ma part ) ou les résolutions moyennes (1024*768 chez moi, mais qui représente environ 50% du "marché" tout de même...) cela conduit inévitablement à une réduction de cette image :
et je ne peux, en tant que défenseur du peuple Normand, te pardonner de couper une vache en deux

Pour info, ton site n'est pas centré sous IE6

Bonne continuation

Bonjour 6l20, et merci pour tes réponses.

Est-ce que tu veux dire que float:left; et position:fixed; sont exclusifs ?

En tout cas, en laissant tel quel (c'est à dire avec le float et le fixed), ie6 affiche correctement la page, mais ie7 place le menu au milieu. Allez savoir pourquoi, je n'en sais rien.

Si je laisse le fixed seulement, ie6 affiche bien le menu mais le contenu est viré en dessous, carrément par chouette. Je sais pas ce que ça donne avec ie7.

Si je laisse le float seulement, ie6 affiche presque bien la page mais je perd la fonctionnalité du menu fixed. Je ne sais pas ce que ça donne avec ie7.

En conclusion, pourquoi ie7 déconne ? Et quelles solutions s'ouvrent à moi ? Dois-je abandonner le menu fixed ? Ai-je fait une grosse erreur de conception ?

En tout cas, je sais qu'avec un menu fixed, je risque avec les petits écrans de rendre le bas du menu inaccessible mais il est fait pour être de taille réduite, donc affichable avec de petites résolutions.

En pour l'image de l'entête, c'est tout à fait volontaire que l'image soit si grande. En théorie, elle pourrait même faire 2000 pixels de large. L'important est d'afficher les vignettes à la hauteur de ce que la largeur de l'écran peut afficher (je sais pas si je suis bien clair là...).

Le fait que ce soit la vache qui soit coupée en 2 dans ton cas est le signe que tu n'es probablement pas encore assez impliqué dans le CDVN (le comité de défense de vaches normandes ).

Salut,

Soit tu positionne en flottant, soit tu positionne en fixe mais pas les deux. Là c'est comme si tu ordonnes à quelqu'un d'être debout et assis en même temps.

Le mieux est peut être encore d'utiliser les commentaires conditionnels pour traiter séparément les cas d'IE6 et d'IE7.

Bonjour ploc,

a écrit :
Est-ce que tu veux dire que float:left; et position:fixed; sont exclusifs ?

Regardes ce que donne le positionnement de ton menu en retirant le flottant à gauche tout en maintenant ta position fixe, changes les paramètres de positionnement de ta position fixe (margin-left: 600px par exemple) ou même, mets ton flottant à droite, juste pour voir...je te laisse en tirer les conclusions

a écrit :
En tout cas, en laissant tel quel (c'est à dire avec le float et le fixed), ie6 affiche correctement la page, mais ie7 place le menu au milieu. Allez savoir pourquoi, je n'en sais rien.

IE6 n'interprête pas la position fixe (sans bidouillage en tout cas ) il prend sur ta page la valeur du positionnement flottant à gauche, et n'a par conséquent pas le même rendu que sous IE7 ou Firefox...

a écrit :
Je sais pas ce que ça donne avec ie7.

Ton menu (fixe puisque IE7 prend en compte cette propriété ) est légérement décallé vers la droite, je n'ai pas le temps de regarder pourquoi ( il y a certainement une explication logique à ce comportement ) au moyen d'un commentaire conditionnel réservé à IE7 en mettant une marge à gauche négative (-210px devrait suffire...) tu obtiendras le comportement souhaité

a écrit :
Dois-je abandonner le menu fixed ?

C'est vous qui voyez...

a écrit :
En tout cas, je sais qu'avec un menu fixed, je risque avec les petits écrans de rendre le bas du menu inaccessible mais il est fait pour être de taille réduite, donc affichable avec de petites résolutions.

Je te confirme que je n'ai "pas accès" à l'ensemble de ton menu avec ma config (sous Firefox et IE7) le bouton "connexion" est à peine visible, le formulaire de recherche disparait (à moins de mettre en plein écran ou de modifier mes paramètres d'affichage, ce que "je" ne souhaite pas forcément faire )

Pour l'entête je te charrie mais en ce qui concerne mon taux d'implication au sein du CDVN, je t'informe que tu es maintenant sur liste noire et qu'une liste sera largement diffusée, appellant au boycot pur et simple de ce site

Mikachu a écrit :
Salut,
Là c'est comme si tu ordonnes à quelqu'un d'être debout et assis en même temps.

J'aime beaucoup cette image

Pfff j'écris trop lentement tu as encore été le plus rapide

6l20 a écrit :
Ton menu (fixe puisque IE7 prend en compte cette propriété ) est légérement décallé vers la droite, je n'ai pas le temps de regarder pourquoi ( il y a certainement une explication logique à ce comportement ) au moyen d'un commentaire conditionnel réservé à IE7 en mettant une marge à gauche négative (-210px devrait suffire...) tu obtiendras le comportement souhaité

J'ai eu le cas également sans comprendre pourquoi ...

<mode troll>
Après avoir bien cerné les bugs IE6, va-t-il falloir recenser ceux pour IE7 ???
</mode troll>

Hello,

Plusieurs choses:

1. La page est déclarée en "application/xhtml+xml" dans le code source, mais pas dans les en-têtes HTTP (le serveur la déclare en "text/html"). Je pense qu'on aura intérêt, sauf besoin particulier, à faire ceci:
- utiliser XHTML 1.0 Strict et pas XHTML 1.1 (voir la FAQ à ce sujet);
- ne pas mettre de prologue XML, car c'est inutile ici et ça fait passer IE6 en mode Quirks (d'où le problème de centrage à priori);
- déclarer la page en "text/html".

2. Les propriétés float et position ne sont pas exclusives. On peut se servir du positionnement relatif pour décaler un bloc flottant, par exemple. Par contre, il est vrai qu'avec les valeurs "absolute" et "fixed" le float est ignoré.
Utiliser à la fois float et position: fixed me semble être un moyen élégant de basculer en positionnement flottant pour tous les anciens navigateurs qui ne comprennent pas position: fixed (en gros, essentiellement IE 5-6).
Donc à priori il n'y a rien à corriger là-dessus. Juste une chose peut-être: doubled margin bug sous IE6.

3. Le fait de positionner ce menu en fixe est effectivement une erreur. Le menu est trop long, et pour une bonne partie des utilisateurs il se retrouvera tronqué et donc inaccessible (sauf en désactivant les styles).
Positionner en fixe un élément ayant un contenu important ou moyennement important est très risqué.

4. Le positionnement absolu et le positionnement fixe sont en partie bugués sous IE (dont IE7): dans beaucoup de cas, il faut préciser explicitement les coordonnées de positionnement sinon on se retrouve avec un décalage horizontal. Ici, si je précise un left: 40px, ça marche. Problème: le référent est obligatoirement le viewport (zone de visualisation du navigateur), et aligner ton menu par rapport à ce référent peut être difficile.

Florent V. a écrit :
Hello,
4. ... il faut préciser explicitement les coordonnées de positionnement sinon on se retrouve avec un décalage horizontal. Ici, si je précise un left: 40px, ça marche. Problème: le référent est obligatoirement le viewport (zone de visualisation du navigateur), et aligner ton menu par rapport à ce référent peut être difficile.

C'te honte, j'avais prévu de mentionner les coordonnées de positionnement, c'est presque le premier truc qui me soit venu à l'esprit, et puis pouf ...tête vide

Merci Florent pour ces précisions
C'est un réel bonheur de "naviguer" aux cotés de bon nombre d'entre vous tant j'apprends et ai à apprendre à votre contact (hum...ça fait un peu "lèche" mais c'est sincère )

J'ai finalement pris la décision qui semblait s'imposer : supprimer le position: fixed;

J'ai maintenant un menu qui bouge, et donc qui peut disparaitre, il me faudra rajouter un lien pour retourner en haut de page... Une suggestion sur la forme qu'il peut prendre ?

En tout cas, merci de vos aides et avis. Si quelqu'un a ie7 et peut aller vérifier que tout s'affiche (à peu près) bien maintenant, ce serait bien sympa...

Salut ploc,

Tout fonctionne sous IE7, et pour le coup j'aime bien le comportement du zoom d'IE7
Il reste une "coquille" dans ta css screen :

div.menu {
    [#red]aposition: fixed;[/#]
    float: left;
    margin-left: 10px;
    width: 200px;
    background: #e3ebcc;
    font-size: 1.1em;
}

Tu ne te résouds pas à l'enlever hein ?

En ce qui concerne l'ancre je verrai bien ...une petite vache http://www3.ac-clermont.fr/etabliss/la-tour-dauvergne/vache.gif

Pour rester simple, une petite flêche, un peti mot (top par exemple)...
Bonne continuation,
Sylvain

Oh la vache ! Tu vas toujours regarder à l'envers des décors quand tu vas au théâtre toi ! Rassure-toi, un jour je ferai le ménage entre les débris qui jonchent les coulisses...

Sinon, je demandais juste où vous imaginiez mettre le lien top, compte tenu de la structure de ma page. Dans un div à part, un élément fixed, dans le pied de page...

Mais je vais chercher un peu par moi-même. Mais si vous avez des idées lumineuses, n'hésitez pas à m'en faire part !