Comment puis-je déplacer le contenu lorsque vous utilisez la position fixée sur ma barre de navigation? Ma page va au sommet depuis que j'utilise position: corrigé. Je peux utiliser la marge-bas, mais ensuite ma barre Naville n'est pas exactement en haut de l'écran. (Oui j'ai la marge: 0 et rembourrage: 0 à l'intérieur *).
link: https: // codepen.io/altinzzz/pen/zewawxv
code
html CSS < Pré> xxx
4 Réponses :
Ajouter Padding-top à introduction
Lorsque vous utilisez Au lieu de cela, vous devez ajouter de l'espace pour celui-ci sur le reste de la page, par exemple. Ajouter un rembourrage ou une marge au sommet de l'élément suivant, par exemple p> pour une maintenance plus facile, il peut être préférable d'ajouter du conteneur extérieur pour toutes les pages pour ajouter cet espace, en particulier si Le premier élément de chaque page n'est pas le même par exemple p> et le HTML serait quelque chose comme: p> Considérations relatives à la conception réactive: forte> Notez que si la NAV s'enveloppe, un remplissage fixe ne suffira pas - dans ce cas, vous devrez peut-être consulter les requêtes multimédias ou utiliser le menu Hamburger pour conserver la barre de navigation. Même hauteur pour surmonter ce problème. P> Exemple de travail: strong> p> p> Position: fixe code> il prend l'élément hors du flux. Par conséquent, le reste de la page commence en haut comme si l'élément fixe n'existe même pas. Cela signifie que l'application de la marge ou de tout autre CSS n'affectera aucun autre élément.
<div class="topnav" id="myTopnav">
<a href="websitecar.html"> Home</a>
<a href="aboutus.html" class="active"> About Us</a>
<a href="contactus.html">Contact</a>
<a href="#about">About</a>
</div>
<div class="page-container">
<div class="introduction">
<span class="introductionText"> Welcome </span>
<span class="introductionText2"> About us </span>
</div>
<div class="contentforscroll">
<p>More content to make the page scroll so you see the fixed element</p>
</div>
</div>
Il devrait être Padding: 48px 0 0 , pas Padding: 50px 0 0 0 .... Vous avez votre réponse avant moi ... lol
@Danmullin merci pour le commentaire! Si la valeur liquidée n'est pas une hauteur fixe et est basée sur la taille de la police, je permettez généralement un pixel supplémentaire ou deux pour des variations à travers le navigateur - en particulier lorsque les utilisateurs ont une échelle d'affichage de Windows à une autre de 100% - les navigateurs doivent recalculer Les positions et qui peuvent varier d'un à l'autre :) Bien sûr, si le 2 divs doit pour rencontrer sans espace, alors vous êtes mieux avec des hauteurs fixes (malheureusement!)
S'il vous plaît donner le rembourrage supérieur au corps (plus grand que la hauteur de topnav)
Et topnav doit s'en tenir au haut de sorte que Vérifiez les éléments suivants
P> haut: 0 code> doit être ajouté;
<div class="topnav" id="myTopnav">
<a href="websitecar.html"> Home</a>
<a href="aboutus.html" class="active"> About Us</a>
<a href="contactus.html">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class = "introduction">
<span class = "introductionText"> Welcome </span>
<span class = "introductionText2"> About us </span>
</div>
Merci pour les recommandations. Tous les trois sont corrects.
Ajout de rembourrage: 50px; à .Introduction travaillée, ajout de plus en plus de rembourrage: 50px; au corps puis mettre le dessus: 0;, à l'intérieur de topnav.