Scroll avec margin-top

Version imprimable

Bonjour,
je suis confronté à un problème que je n'arrive pas à résoudre sur les liens à l'intérieur d'une page.

Voici la structure de mes pages
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ... <body> <nav>mon menu perso</nav> <div id="page-container"> contenu de ma page </div> </body> ... body { margin: 0; height: 100% } nav { position: fixed; height: 35px; } #page-container { position: relative; width: 100%; margin: 35px auto 0 auto; }
Lorsque je mets un lien interne pour accéder à un contenu différent se trouvant sur #monlien, le défilement se fait mais sans tenir compte du margin-top.
Autrement dit, le titre du contenu est caché par le menu (nav).

J'ai du oublié quelque chose sur le css mais je ne vois pas où.

Merci de votre aide

06/05/2016, 14h28
Invité

Bonjour,

Normal. Il faut mettre un padding-top.
06/05/2016, 14h38
ma5t3r
Bonjour,
Merci de répondre
Code:

1 2 3 4 5 6 #page-container { position: relative; width: 100%; padding-top: 36px; }
Ca ne fonctionne pas non plus.
J'ai essayé dans le body, pareil. :-(
06/05/2016, 14h41
Invité

C'est sur #monlien qu'il faut le mettre.
06/05/2016, 14h49
ma5t3r

ouhlala,
effectivement, ca fonctionne mais je ne peux pas ajouter du padding-top sur mes boxes. Ca flingue l'aspect du site.
Y a t-il une autre solution ?
Le menu fixed pose des problèmes dans ce cas de figure.
Est-ce que je dois remettre en cause la structure du site pour ne pas être embêté ?

Vous faîtes comment d'habitude ?

J'ai mis un peu de jquery, ca va tout seul, tant pis pour ceux qui n'activent pas javascript

Code:

1
2
3
4
5
6
7
8
9
 
$(function() {
    $(".scrollto").click(function (e) {
        e.preventDefault();
        var to = $(this).attr('href');
        $('body').animate( { scrollTop: $(to).offset().top - 36 }, 750 );
        return false;
    });
});

Merci