Problème avec les ancres avec Bootsrap

Fermé
6ro Messages postés 15 Date d'inscription mercredi 2 novembre 2016 Statut Membre Dernière intervention 21 octobre 2018 - 6 janv. 2017 à 10:46
6ro Messages postés 15 Date d'inscription mercredi 2 novembre 2016 Statut Membre Dernière intervention 21 octobre 2018 - 6 janv. 2017 à 12:04
Bonjour,

j'ai un problème de calage avec le menu et les ancres sur un site : http://www.6ro.fr/psv/

Quand on clique sur “FEATURES” par exemple on est dirigé vers la section “TABLE”, mais le haut celle si ne se cale pas juste sous le bas du menu.

Si quelqu'un peu m'aider.

Merci d'avance.

5 réponses

Nexii Messages postés 333 Date d'inscription jeudi 13 mars 2014 Statut Membre Dernière intervention 14 mars 2017 551
6 janv. 2017 à 10:53
Bonjour,

Oui en effet le haut de la section "table" s'aligne avec la balise "a" et non la balise "li" qui elle est plus haute.

Pour compenser ce décalage tu peux ajouter la propriété suivantes :
Dans ton fichier styles.css, ligne 5 :
.container {
  position : relative;
  top : 10px;
}
0
6ro Messages postés 15 Date d'inscription mercredi 2 novembre 2016 Statut Membre Dernière intervention 21 octobre 2018
6 janv. 2017 à 11:00
Bonjour,

merci pour ta réponse, le problème si je fait ça c'et que ça me décale tout y compris les éléments du menu.

Merci d'avance.
0
Nexii Messages postés 333 Date d'inscription jeudi 13 mars 2014 Statut Membre Dernière intervention 14 mars 2017 551
Modifié par Nexii le 6/01/2017 à 11:38
As-tu accès au code ou passes-tu à travers un CMS ?
La meilleure solution serait de placer une ancre plus haut que le titre H3.

Sinon tu peux utiliser un script jQuery pour réaliser cela, ainsi tu pourra préciser un décalage dans le scroll down (donc décalage négatif = à la hauteur de ton menu).
Exemple :
<script src=""quot;https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  // S'exécute après le chargement du DOM
  $(document).ready(function (){
    // En cliquant sur l'élement dont l'id est "monID"
    $("#monID").click(function (){
        // Réaliser l'animation suivante :
        $('html, body').animate({
            // scroll de la page jusqu'a la hauteur de l'élément - X pixels
            scrollTop: $("#div1").offset().top - 100;
            // Vitesse de l'animation en millisecondes (ici 2 secondes)
        }, 2000);
    });
  });
</script>
0
6ro Messages postés 15 Date d'inscription mercredi 2 novembre 2016 Statut Membre Dernière intervention 21 octobre 2018
6 janv. 2017 à 11:31
Oui j'ai accès à tout.

Comment placer cette ancre plus haut ?

Merci d'avance.
0
Nexii Messages postés 333 Date d'inscription jeudi 13 mars 2014 Statut Membre Dernière intervention 14 mars 2017 551
Modifié par Nexii le 6/01/2017 à 11:56
Tu dois ajouter une ancre avant la balise h3 :
Attention, l'éditeur du forum me rajoute des propriétés qu'il ne faut pas mettre, donc dans le code suivant de la balise "a", tu supprimera le texte suivant :
rel="nofollow noopener noreferrer" target="_blank"

<div class="container">
  <a href="#" rel="nofollow noopener noreferrer" target="_blank" name="monID" id = "monID"></a>
<h3 class="mbr-section-title display-2">TABLE</h3>
    </div>


Après, tu as juste à rajouter les propriétés CSS à la balise a afin de la placer plus haut :
a#monID {
  position : relative;
  top : -58px; // Soit la hauteur de ton menu 
}



Bien évidemment c'est un exemple, tu dois adapter "monID" avec celui que tu veux donner :)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
6ro Messages postés 15 Date d'inscription mercredi 2 novembre 2016 Statut Membre Dernière intervention 21 octobre 2018
6 janv. 2017 à 12:04
Un énorme merci, ça marche !!!!

Miracle.
0