Problème avec les ancres avec Bootsrap
6ro
Messages postés
15
Date d'inscription
Statut
Membre
Dernière intervention
-
6ro Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
6ro Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
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.
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
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 :
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;
}
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.
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.
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 :
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>
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 :
Après, tu as juste à rajouter les propriétés CSS à la balise a afin de la placer plus haut :
Bien évidemment c'est un exemple, tu dois adapter "monID" avec celui que tu veux donner :)
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 :)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question