28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Sur mon site j'ai un gros souci.
Car je veux faire un sommaire d'un article avec donc des ancres dans la page.
Sauf que j'ai un header de 55px de haut qui lui est fixe.

Donc quand je clique sur une ancre il redirige bien vers la partie souhaitée mais le titre est sous la barre header.

J'ai donc utilisé du javascript pour scroller vers là où je veux mais ça me plait pas.
Car j'aimerais avoir quand même des a href="#monid"

Est ce que quelqu'un a déjà eu cette problématique ?

Vous pouvez-voir un exemple ici d'un de mes sommaires :
http://www.pratique.fr/15-modules-wordpress-indispensables.html
Modifié par Footeuz (17 May 2011 - 18:13)
Une solution toute simple peut être de laisser les liens vers les ancres et d'utiliser javascript quand c'est possible.

En gros, ton lien aurait la forme <a href="#ancre" onclick="actionjavascript">ANCRE</a>.

Deux cas possible :
- Javascript est activé : Lorsque l'utilisateur clique sur ton lien, actionjavascript est exécuté. Là tu laisses simplement ce qui existe pour le moment à l'exception que tu ajoutes return false; à la toute fin de ton script. De cette manière, le lien "réel" (#ancre) ne sera pas utilisé.

- Javascript n'est pas activé : Lorsque l'utilisateur clique sur ton lien, il arrive à ton ancre en ayant le souci que tu soulèves.

La qualité de la visite sera moindre uniquement pour ceux qui n'ont pas javascript activé... (petite proportion)
Merci pour ta réponse.
J'avais pas pensé au return false;

Et finalement j'ai trouvé une autre solution.
Sur le div de mes ancres j'ai mis un padding-top60px et margin-top-60px
Et ça fonctionne nickel.
ça évite le javascript.

Seul inconvénient ça oblige à mettre du z-index sur les div pour pas qu'ils se "chevauchent"