Position:fixed et liens internes

Bonjour,

Petit problème : ce site (http://tlaxnai.domainepublic.net/) a une barre de navigation horizontale en haut et fixe. Ça aide pas mal pour la navigation, mais il y a un bug : lorsque l'on clique sur un lien interne, le positionnement de la page ne tiens pas compte de la barre de navigation et affiche le texte en haut de fenêtre sous la barre de navigation (http://tlaxnai.domainepublic.net/dplg.shtml#a). ce problème est sous Firefox et Opera et évidemment pas sous ie. Y aurait-il un moyen d'éviter cela, en évitant, si possible, les javascripts.
Merci davance pour les réponses.

P'tit Ben

Juste un petit détail

vu sur le site a écrit :
Ce site est, miraculeusement, valide Valid XHTML 1.1! et Valid CSS!. Heu ? plus maintenant pour le css…

Il n'est pas non plus valide XHTML Il manque l'attribut "type" de la balise "link".

Sinon je me demande, en mettant un padding-top à ton body de la hauteur du menu en haut, ça ne fonctionnerait pas ?

Merci pour la réponse, mais, le padding-top a pas l'air de fonctionner.
Link corrigé, mais ça posait pas problème au validateur.

P'tit Ben a écrit :

Link corrigé, mais ça posait pas problème au validateur.

J'utilise l'extension firefox basée sur HTML Tidy, il semble qu'il soit un peu exigeant :o

Je n'ai hélas pas d'autre idée pour ton problème, je n'ai jamais utilisé position:fixed qui ne fonctionnait pas avec IE, c'est corrigé maintenant ?

Bonjour,
jolie mise en page et très bonne optimisation pour le bas débit!
Ceci dit, je n'ai pas très bien compris la question. Je n'ai pas rencontré de problème sous Firefox 0.8/win98.
Concernant les liens de type "...shtml#a" as-tu consulté http://forum.alsacreations.com/faq/#item4

Je remarque que ta position fixed ne fonctionne pas sous IE. Personnellement, je l'émule de cette façon : http://moncastel.9online.fr/menu_xpand/menu.htm, ce n'est peut-être pas valide XHTML

/* emulation fixed IE */
html>body .menu { position: fixed; }
html[xmlns] .menu { position: fixed; }
body { background: url(null) fixed ; }
.menu{position: absolute;
  top:expression(documentElement.scrollTop+body.scrollTop);
/* fin de l'émulation fixed IE */

correction du bug de l'éditeur du forum : xmlns est entre crochets
Modifié par chmel (25 Jun 2005 - 16:03)

-> naholyr
fixed n'est toujours pas interprêté par ie, mais devrait l'être par ie7. Mais comme ie7 ne fonctionnera que sous windows xp (je suis encore sous 98), autant inciter les gens à prendre un navigateur autre, plus moderne (firefox ou opera). Pour ce qui est de firefox, si j'aime bien les nombreuses extensions, la lenteur générale de mozilla (sous ma vieille bécane) me fait préférer opera.
-> chmel
Essaye de cliquer sur un des liens interne du sommaire, genre Matsuwa, « la parole d’un mara’akame » et tu remarquera que le première ligne ("Matsuwa, « la parole d’un mara’akame »", titre h3 qui est l'id cible) est cachée car se situant sous la barre de navigation horizontale... ce qui est un peu génant.
Merci pour la technique de fixed sous ie, je la teste dans la journée.

Un comportement anormal sous FF : au premier chargement de la page les images ne trouvent pas leur bonne place, il faut recharger pour obtenir une page correcte.



Je n'ai pas trouvé la raison (je n'ai pas beaucoup cherché non plus...).

jcm a écrit :
Un comportement anormal sous FF : au premier chargement de la page les images ne trouvent pas leur bonne place, il faut recharger pour obtenir une page correcte.

Je n'ai pas trouvé la raison (je n'ai pas beaucoup cherché non plus...).

Ce qui est bizarre, c'est que ça me fait, de temps en temps, la même chose sous Opera, mais je n'avais jamais remarqué ça sous Firefox. Vu que c'était "de temps en temps", je pensais que c'était un bug du moteur de rendu, et non de ma mise en page (c'est du float:right ou left des plus con). Là, je vois pas trop d'où ça peut venir...
Merci pour l'info, même si c'est snif !

Bonjour,
J'y ai mis un peu de temps, mais le problème est résolu, ayant viré les "fixed" et suivre l'exemple affiché sur cette page : http://css.alsacreations.com/modeles/modele13.htm

Ça permet aussi à ce que ie interprête le menu comme fixe.

Par contre, gros problème avec Firefox : impossible de scroller !
Quelqu'un aurait une idée ?

Le css : http://tlaxnai.domainepublic.net/style.css

Merci d'avance pour les réponses.

a écrit :
Un comportement anormal sous FF : au premier chargement de la page les images ne trouvent pas leur bonne place, il faut recharger pour obtenir une page correcte.

A priori corrigé : j'ai inclu le style dans l'image (float:right) et non dans des paragraphes (chouilla gain de place en même temps).
Avant :

<p class="right"><img src="" alt="" /></p><p>blablabla</p>

Après : [code]<p><img src="" alt="" class="right" />blablabla</p>

À vérifier tout de même.

Sinon, toujours le problème de scrolling (?) avec Firefox. Help me!

Et je n'arrive pas non plus à modifier mes anciens posts (message d'erreur). Pas terrible pour les phautes d'aurtografes ou de frape.

Bonjour,

Je suppose que le problème de scroll dans Firefox, c'est l'impssibilité d'utiliser la molette de la souris ?

Dans ce cas, la solution habituelle est :
- d'utiliser une css en commentaires conditionnels pour envoyer uniquement à IE l'affreuse astuce qui simule la position fixe
- et de se servir de position:fixed dans les navigateus qui l'implémentent.

Personnellement, j'éviterais complètement de simuler une position fixe dans IE, en le laissant plus simplement passer en position:absolute pour ton menu.

Laurent Denis a écrit :

- et de se servir de position:fixed dans les navigateus qui l'implémentent.

pour autant qu'ils l'implémentent bien.

A cet égard firefox est plutôt décevant car le défilement devient laborieux, en navigation clavier c'en en même épouvantable parfois.

Laurent Denis a écrit :

Je suppose que le problème de scroll dans Firefox, c'est l'impssibilité d'utiliser la molette de la souris ?

Tout à fait. Mais aussi les flèches.

a écrit :
Dans ce cas, la solution habituelle est :
- d'utiliser une css en commentaires conditionnels pour envoyer uniquement à IE l'affreuse astuce qui simule la position fixe
- et de se servir de position:fixed dans les navigateus qui l'implémentent.

C'est justement depuis que je n'utilise plus la position fixe que ça merde sous Firefox. J'utilise l'overflow.

Je pense que c'est parce que je définis l'overflow sur un div vide (un conteneur qui fait la largeur de la fenêtre) et non sur un div contenant du texte (car celui-ci ne fait pas la largeur de la fenêtre et que la barre de défilement se retrouverait en plein milieu).

Bref, si quelqu'un à une idée, ou une méthode autre, il est le bienvenu.

P'tit Ben a écrit :
C'est justement depuis que je n'utilise plus la position fixe que ça merde sous Firefox. J'utilise l'overflow.

Hum...

Bah, oui. C'est justement pourquoi, - je répète -, la solution consiste à :
- utiliser [i]position:fixed dans les navigateurs comme Firefox, qui l'implémentent et où ça marche correctement[/b]
- et réserver l'overflow à Internet Explorer en lui envoyant une CSS qu'il sera le seul à appliquer (CSS placée dans des commentaires conditionnels).

ça va mieux en disant deux fois, peut-être
Modifié par Laurent Denis (24 Jul 2005 - 19:07)

Oui, peut-être, mais je reviens alors à mon premier problème :

a écrit :
lorsque l'on clique sur un lien interne, le positionnement de la page ne tiens pas compte de la barre de navigation et affiche le texte en haut de fenêtre sous la barre de navigation

Et puis, je préfère éviter de faire une feuille de style par navigateur (surtout qu'on sait pas trop comment va réagir IE7)

Bref, je sais plus quoi faire.

Ménager une marge supérieure (ou un padding supérieur) égale à la hauteur de ton bandeau supérieur pour chaque titre cible d'un lien interne, marge ou padding qui aèreront agréablement le contenu...

(Peut-être à éviter avec un bandeau de 200px de haut, certes, mais là, ça deviendrait vouloir le beurre et l'argent du beurre )
Modifié par Laurent Denis (24 Jul 2005 - 19:23)

P'tit Ben a écrit :

Et puis, je préfère éviter de faire une feuille de style par navigateur (surtout qu'on sait pas trop comment va réagir IE7)

A moins que les ingénieurs Microsoft ne soient devenus suicidaires, IE7 implémentera le mécanisme des commentaires conditionnels, qui permet de viser au choix toutes les version d'IE, une version, ou tel série de versions successives, et qui joue un rôel très important pour les "grands comptes" clients de Microsoft.

Pour une fois qu'il existe un moyen propre et fiable d'adresser une CSS corrective à un navigateur
Modifié par Laurent Denis (24 Jul 2005 - 19:26)

Laurent Denis a écrit :
Ménager une marge supérieure (ou un padding supérieur) égale à la hauteur de ton bandeau supérieur pour chaque titre cible d'un lien interne, marge ou padding qui aèreront agréablement le contenu...

(Peut-être à éviter avec un bandeau de 200px de haut, certes, mais là, ça deviendrait vouloir le beurre et l'argent du beurre )

Pas con... mais non : il y a plein de note de bas de page. Et les appels de notes sont situés souvent en plein milieu d'un paragraphe.
Faut que je réflechisse, doit bien y avoir un moyen...

Re

Quelqu'un pourrait-il me dire s'il peut scroller (flèches ou molette de souris) avec Firefox sur cette page d'exemple ou directement sur mon site ?

Si ça ne fonctionne sur aucune des pages, je considère que c'est un bug de Firefox, et je laisse tombé.

Snif !