[résolu] Décalage vers le bas avec une ancre interne.

Bonjour à tous.


Je viens de faire le tour du forum et je n'ai pas trouvé la réponse à ma question donc je me permet de la poster ici.

J'ai réalisé le site Pizza-Bella.fr

Sur la page carte, il y a un menu qui pointe vers des ancres internes.
Sur le haut de la page il y a un bandeau en position fixed, j'utilise le patch IE7 de Dean Martin pour faire du fixed sous IE.

Quand je clique sur un lien interne, l'ancre cible se positionne exactement en haut de la page, càd caché par le bandeau.

Dans Firefox j'ai résolu le problème avec une position relative pour mon ancre. Par contre sous IE rien à faire, j'ai l'impression qu'il considère la position d'origine et non le décalage relatif pour le point de départ de l'ancre interne.

J'espère que l'un de vous pourra m'éclairer ou me donner une autre solution pour que lorsqu'on clique sur une ancre interne elle ne se positionne pas tout en haut de l'écran mais à une hauteur précise.


D'avance Merci
FoW
Modifié par FoW (22 Nov 2007 - 15:20)

Bonjour FoW,

La FAQ peut peut-être répondre à ta question ?

je suis déjà passé par la FaQ et si tu l'avais lue toi aussi tu verrais qu'elle ne répond pas à ma question.

J'ai même lu les deux liens qui sont donnés dans la FaQ et fait une recherche générale sur le web, je n'ai rien trouvé.

Merci quand même.

FoW a écrit :
...si tu l'avais lue toi aussi tu verrais qu'elle ne répond pas à ma question.

Il est complètement inutile de tenir ce type de propos lorsque quelqu'un te vient bénévolement en aide, même si un smiley vient adoucir le propos.

a écrit :
Merci quand même.

De rien.

Pour en revenir à la FAQ, je voulais m'assurer que tu avais bien visité ce lien ( on peut "faire le tour du forum" et omettre quelques chemins... )
Par exemple, il est plus "robuste" d'écrire :

<a href="#" name=" " id=" "></a>

que :

<a href="#"> </a>

Bref :
A priori c'est ton lien interne qui pose problème :

a.interne {
  float: left;
  position: relative;
  top: -150px !important;
  top: -300px;
}

Pourquoi mets-tu une valeur négative ?
Il me semble de plus qu' IE7 interprête le "!important", mais comme tu le vois cela n'a pas le même effet que sous Firefox.

Rapidemment, sans le hack de Dean M., sans avoir les moyens de tout vérifier : en mettant juste un padding-top à ta balise <a>, j'arrive à quelque chose de concluant sous IE7 et Firefox, reste à définir cette "marge", en fonction de ton besoin, et à vérifier que cela ne pose pas de soucis à IE6 ( auquel cas un commentaire conditionnel pourrait rectifier le tir )
Cela reste une simple suggestion, un simple avis, une piste pour avancer, et je revendique le droit de me tromper !

Cdt,
Sylvain
Modifié par 6l20 (16 Nov 2007 - 15:05)

Salut,


Merci de ta réponse, j'ai modifié mes ancres pour quelles soient plus 'solides' (il faut toujours avoir de solides ancres).

Bon j'ai essayé le padding-top comme tu le proposes, mais cela ne fonctionne pas chez moi. Sous FF en plus ça met en l'air toute la mise en page car les prix sont en float right et viennent se télescoper avec l'ancre.

Jemets une valeurs négative pour déplacer mon ancre vers le haut de la page comme ça un lien interne montre le contenu désiré au mileu de la page (verticalement) et non caché sous le bandeau fixe.

Sans le hack de Dean M, il n'y a pas moyen d'avoir la position fixed pour le bandeau en haut de la page.

C'est mieux effectivement même si cela ne corrige pas mon problème.

Bonjour,

FoW a écrit :
Quand je clique sur un lien interne, l'ancre cible se positionne exactement en haut de la page, càd caché par le bandeau.

Comportement tout à fait normal et qui est une des raisons qui font que le positionnement fixe est à utiliser avec parcimonie et discernement.

Je ne connais pas de parade pour ma part. Celle que tu as imaginée est intéressante, mais pas suffisamment compatible apparemment. Une autre ruse envisageable serait de positionner tous les blocs div.categorie en relatif, et de les décaler de 120px vers le bas. Ça pose juste un problème pour le toute premier bloc.
(Si on veut utiliser cette solution, il faudra laisser l'ancre en positionnement statique, et pas en positionnement relatif.)

Une autre solution possible serait d'utiliser Javascript pour faire défiler la page de 120px supplémentaires lorsque l'ancre reçoit le focus, par exemple.

Ton idée de positionner tous les blocks en relatif est super intéressante, je vais essayer ça dans la journée.

Merci.

Bon j'ai essayé le résultat n'est pas totalement ce que je voulais car j'ai toujours une marge énorme en haut mais visuellement c'est raisonnable.

Cette technique permet en tout cas de se caler sur une ancre interne au milieu de la page verticalement mais ça demande un tel aménagement de code css et html autour que ce n'est pas exploitable à mon sens.

Merci pour votre aide à tous les deux.


FoW

Du coup j'ai la dalle, vous livrez jusqu'en lorraine?
Modifié par batssa (22 Nov 2007 - 16:48)

</hors sujet>Il faudrait leur demander, moi je ne fais que le site pas les pizzas. Mais je pense que pour une livraison en loraine il risque d'y avoir un supplément et le délai de livraison n'est pas garantit.
Dernière chose je ne pense pas que la pizza soit encore chaude à l'arrivée.</hors sujet>

Bon pour revenir aux chose sérieuses j'ai enfin réussit à obtenir ce que je voulais en bidouillant encore et encore ma css.

Merci à tous.

la solution a été donnée par Florent, c'est une évolution de que j'avais fait.

Mon système étais de mettre les ancres en position relative, décalées vers le haut mais cela ne fonctionnait pas sous IE car il gardait la vrai position des ancres pour recentrer la page.

La solution : j'ai laissé les ancres (a.interne) à leur place, j'ai décalé les blocks à centrer (.categorie) en position relative vers le bas.
Les block sont dans une div (.cat_list) qui est artificiellement décalée vers le haut grace à des marges.

a.interne {
}
.categorie {
  position: relative;
  top: 140px;
}
.cat_list {
  background-color: transparent;
  margin-top: -140px;
  margin-bottom: 140px;
}

Modifié par FoW (23 Nov 2007 - 05:51)

Ok je vois le problème, il va falloir que je regarde plus en détail le rendu sur IE7, je vois.

Merci beaucoup pour ce screenshot.

Des que j'ai progressé, je reviens en parler ici.


Deux questions, as-tu obtenu ce résultat en direct ou par un service de screenshot? Le javascript est-il activé.
Modifié par FoW (24 Nov 2007 - 18:21)