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 une image avec le résultat voulu ! + le code. Merci de bien vouloir m'aider.
Modifié par LOIC_75 (03 Apr 2018 - 11:47)
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 une image avec le résultat voulu ! + le code. Merci de bien vouloir m'aider.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NAV A PART</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<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>/* 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;
}Modifié par LOIC_75 (03 Apr 2018 - 11:47)