j'ai créé un site web et j'utilise FlexBox pour le mettre en page.
Lorsque j'essaie de fixer la nav à l'écran à l'aide de position:fixed, le reste de l'écran se comporte comme si la nav n'existait pas...
Je pense que cela est du au position: absolute que j'ai mis sur le body. En effet, une certaine portion de la page doit faire exactement la taille de l'écran, j'ai donc donné au body une hauteur/largeur de 100% ainsi que position:absolute.
Voici les photos:
Normalement:
On remarque ici un problème: la nav a gauche a une hauteur de 100%, donc une hauteur d'écran, et n'est pas fixée.
Avec position: fixed
Ici, le bout d'écran avec le poulpe s'est décalé à gauche, ne prenant pas en compte la nav qui s'y trouve. C'est disgracieux et j'aimerais corriger cela.
Auriez-vous des indications pour fixer ma nav à l'écran sans que le reste se comporte bizarrement svp?
Voici mon code:
<body>
<!-- Loader -->
<div class="loader">
<div class="loaderimg"></div>
</div>
<!-- Barre de Navigation -->
<nav>
<a href="#contact" class="js-scrollTo"><div class="navbutton"> Contact </div></a>
<a href="#aboutme"><div class="navbutton"> About me </div></a>
<div id="pic-container">
<div id="pic"></div> <br />
<article>I am a 17-year-old web developer.<br /></article>
</div>
</nav>
<section>
<!-- Need a Website? -->
<div id="fatpart">
<div id="title">
<h2>Need a website?</h2>
<br />
<div id="social">
<a href="https://www.facebook.com/profile.php?id=100008198739320" target="_blank">
<img src="img/fb.svg" alt="fb_icon" class="socialicon">
</a>
<a href="https://twitter.com/ArmandKillian" target="_blank">
<img src="img/tw.svg" alt="tw_icon" class="socialicon">
</a>
</div>
</div>
<!-- Contact -->
<div id="contact">
<h6> You can contact me by this form. </h6>
<div id="inputs">
<input placeholder="Nom" class="contactinput" />
<input placeholder="Prénom" class="contactinput">
</div>
<textarea placeholder="Votre email" class="contactinput" rows="200" cols="200"></textarea>
<input type="submit">
</div>
</div>
</section>
</body>
Les objets en position fixed n'interagissent pas avec les objets en position absolute, puisque qu'ils sortent du flux tous les deux.
Et pourquoi le body en absolute ? C'est étrange non ? Si tu veux qu'une div fasse la taille de l'écran, applique lui un 100vw en largeur plutôt
Fixer un élément à l'écran?
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
