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 : 133
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;
}

**JefReb** · 04/04/2018, 18h25

Je pense qu'il faut faire en "poupées russes"
C'est bien sûr une approche différente, mais voici ce que j'obtiens:
https://codepen.io/JefReb/pen/gedrvw

Et en responsive (Ctrl+Shift+M sous Firefox) ça marche, mais en mettant: @media (min-width: 640px) (Avant pour smartphone et après pour les autres)
j'ai rajouté id page et supprimé la classe content pour remplacer avec 2 articles dans la section ...

Code css :

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
77
78
79
80
* {
	margin: 0;								/* Mettons TOUTES les marges extérieures à zéro 		*/
	padding: 0;								/* Mettons TOUS les espaces intérieures à zéro  		*/
	box-sizing: border-box;					/* largeur des boites= width+padding+border     		*/
}
html, body {
	height: 100%;							/* Toute la hauteur de l'écran							*/
	font-size: 100%;						/* 100%=16px=1rem										*/
}
body {
	background: #fff;
	font-family: "Century Gothic", helvetica, arial, sans-serif;
	font-size: 1.1em;
}
#page, .wrapper, section {
	position: relative;	
	display: -webkit-flex;					/* préfixe -webkit- pour chrome							*/
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;				
}
header, nav, section, footer {
	padding: 10px;
	margin: 0;
	border: 2px solid #fff;
	color: #fff;
}
header {
	background: blue;
	text-align: center;
}
.wrapper		{
	order:1:
 
}
nav {
	order:2;
	width: 15em;
	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;
}
@media (min-width: 640px) {
#page {
	-webkit-flex-direction: row;
	flex-direction: row;					
}
nav {
	order: 0;
	-weblit-flex: 1 1 25%;					
	flex: 1 1 25%;		
}	
.wrapper {
	-webkit-flex-direction: column;
	flex-direction: column;	
	-weblit-flex: 1 1 75%;					
	flex: 1 1 75%;					
}
section		{
	-webkit-flex-direction: row;
	flex-direction: row;			
}
article	{
	-weblit-flex: 1 1 1%;					
	flex: 1 1 1%;										
 
}
}

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
<div id="page">
<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>
<div class="wrapper">
<header>
  <h1>TITRE</h1>
</header>
  <section>
  <article>
    <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>
  </article>
  <article>
    <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>
  </article>
  </section>
<!-- /wrapper -->
<footer>Mentions légales</footer>
</div>
</div>

A toi de voir ...
Tu peux aussi mettre 2 sections dans une balise <main></main> ou 2 articles dans une balise <section> </section> mais si tu veux en row tes 2 sections, il faut les encapsuler dans une autre balise comme <main> ou une <div>...

NAV en flex, sortir la NAV du GABARIT

Positionnement en CSS avec flexbox

Vue hybride

Discussions similaires

Partager

Partager