NAV en flex, sortir la NAV du GABARIT

**Loic_75** · 03/04/2018, 15h24

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 qui peut aider + le code. Merci de bien vouloir m'aider.

Résultat voulu ! :

Nom : 1522748811-70463-nav-bon-minopt.jpg
Affichages : 134
Taille : 9,2 Ko

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
/* 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;
}

NAV en flex, sortir la NAV du GABARIT

Positionnement en CSS avec flexbox

Mode arborescent

Discussions similaires

Partager

Partager