Bonjour, je m'exerce avec la création du barre de navigation. J'aimerai qu'elle reste fixe, or, lorsque j'utilise la propriété "position: fixed;", la propriété "flex: 1;" n'est plus prise en compte (.navbar) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="design.css" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>MyWebsite</title>
</head>
<body>
<div class="container">
<header>
</header>
<div class="navbar">
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="#">Presentation</a></li>
<li><a href="#">Map</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="subcontainer">
<article>
<h1>Welcome on MyWebsite !</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.
</article>
</div>
<footer>
</footer>
</div>
</body>
</html>
Il y a une erreur dans ton css le <br> n'a rien à faire là :-)
Sinon c'est normal que le flex 1 n'agisse plus, car quand tu met une position fixed à quelque chose, il sort du flux, et dans ton cas il n'est dans plus contenu dans le .container et retombe en top: 0 left: 0.
Tu le place en fixed à 180px du bord gauche (comme ton .subcontainer) et à 0px du bord haut. A toi de régler sa taille maintenant :-) et rajoute du texte dans ton lorem pour faire tes tests ca sera plus pratique :-)
- Edité par Laurent Cipicchia 15 avril 2018 à 11:24:52
× 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.
Développeur Web autodidacte HTML5/CSS3/JS + C# (ASP.NET Core) / Python (Django)