Bonjour à tous,
Je débute en HTML / CSS et j'ai un GROS souci "visiblement bête" concernant la NAV :
En effet, je n'arrive pas à extérioriser la NAV en dehors du GABARIT ! D'autre part, je dois respecter min-height: 100vh; (compatible IE9+ et Android récents), et que cette NAV doit être responsive. J'ai essayé de diviser ma NAV et GABARIT mais la NAV se met toujours au-dessus du contenu !
En liens des images qui peuvent aider + le code. Merci de bien vouloir m'aider.
mauvaise NAV :
https://user.oc-static.com/upload/2018/04/03/15227473273794_nav-mauvais.jpg
Résultat voulu ! :
https://user.oc-static.com/upload/2018/04/03/15227473716551_nav-bon.jpg
Code HTML :
<html>
<head>
<meta charset="utf-8">
<title>NAV A PART</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<style>
/ Layout /
html {display: flex; flex-direction: column;} / IE fix /
body {
display: flex; / crée un contexte flex pour ses enfants /
flex-direction: column; / affichage vertical /
min-height: 100vh; / toute la hauteur du viewport (compatible IE9+) /
}
.wrapper {
display: block; / IE fix /
flex: 1 1 auto; / occupe la hauteur restante /
display: flex; / crée un contexte flex pour ses enfants /
flex-direction: row; / affichage horizontal /
}
nav {
width: 15em;
}
.content {
display: block; / IE fix /
flex: 1; / occupe la largeur restante /
}
/ Responsive /
@media (max-width: 640px) {
body {
min-height: 0;
}
.wrapper {
flex-direction: column;
}
.content {
flex-basis: auto;
}
nav {
width: auto;
order: 1;
}
}
/ Decoration /
body {
margin: 0;
background: #fff;
font-family: "Century Gothic", helvetica, arial, sans-serif;
font-size: 1.1em;
}
header, nav, section, footer {
padding: 10px;
margin: 0;
border: 2px solid #fff;
color: #fff;
}
header {
background: blue;
text-align: center;
}
nav {
background: orange;
}
nav a {
display: block;
padding: .5em 1em;
color: #fff;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.3);
}
section {
background: red;
}
footer {
background: black;
text-align: center;
}
</style>
<body>
<header>
<h1>TITRE</h1>
</header>
<div class="wrapper">
<nav id="navigation" role="navigation">
<a href="#">Accueil</a>
<a href="#">Deco</a>
<a href="#">Photo</a>
<a href="#">Beta</a>
<a href="#">Contact</a>
</nav>
<section class="content">
<h2>Flexbox 1</h2>
<p><code>flex: 1</code></p>
<p>Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit. ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.</p>
</section>
<section class="content">
<h2>Flexbox 2</h2>
<p><code>flex: 2</code></p>
<p>Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit. ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.</p>
</section>
</div> <!-- /wrapper -->
<footer>Mentions légales</footer>
</body>
</html>
5 réponses
Il te suffis de faire un position fixed sur ta navbar, avec un top, right, bottom à 0, et une width fixe ou variable (px ou %)
Merci de ton retour, j'ai essayé mais ça ne marche pas correctement : Dans le html, j'ai sorti la NAV du Gabarit, la NAV vient de placer par dessus le gabarit, le gabarit ne s'adapte pas
Voici le code CSS que j'ai placé en suivant tes recommendations :
nav {
width: 15em;
position: fixed;
top: 0;
right: 0,
bottom: 0;
height: 100vh;
}
Hello, merci de ton retour, j'ai essayé de le retravailler hier avec des position absolute, ça se rapproche du résultat sauf que maintenant j'ai un problème de height, ça ne veut pas s'adapter à une hauteur de % ou de vh
voici le codepen : https://codepen.io/Loic_ROGER/pen/QmBzgy
Voilà, cela fait exactement ce que tu souhaite.
.menu {
background: orange;
position: fixed;
top: 0px;
left: 0px;
width: 250px;
height: 100vh;
}