Scroll avec margin-top

**ma5t3r** · 06/05/2016, 14h03

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Invité · 06/05/2016, 14h28

Bonjour,

Normal. Il faut mettre un padding-top.

**ma5t3r** · 06/05/2016, 14h38

Bonjour,
Merci de répondre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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. :-(

Invité · 06/05/2016, 14h41

C'est sur #monlien qu'il faut le mettre.

**ma5t3r** · 06/05/2016, 14h49

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 ?

**ma5t3r** · 06/05/2016, 15h01

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Scroll avec margin-top

Défilement en CSS

Discussions similaires

Partager

Partager