Utilisation de FlexBox

**narchymaster** · 17/11/2017, 11h45

Bonjour,

Le but de l'exercice ( d'un autre site que vous devez connaitre ) est de faire un liseré sur la gauche, qui va du haut en bas de la page. J'ai réussi, sauf que quand je réduis la page, le texte va derrière le liseré et ce n'est pas mon but.

Avec float j'avais plus ou moins réussi, sauf que le liseré n'allait pas jusqu'en haut de la page, car le bloc header me bloqué. On m'a dit d'utiliser Flexbox mais je bloque dessus. Position n’est pas adapté, et n'y l'attribut z-index.

En utilisant flexbox :

Nom : Sans titre 2.jpg
Affichages : 5041
Taille : 175,9 Ko

Nom : Sans titre 2.jpg
Affichages : 5041
Taille : 175,9 Ko

Je n'arrive pas que les 2 blocs soit côte à côte. Mon liseré fait descendre le tout..

HTML

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
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
<!DOCTYPE html>
	<html>
		<head>
 
			<title>Mon CV</title>
			<meta charset="utf-8">
			<link rel="stylesheet" type="text/css" href="stylebis.css">
 
		</head>
<body>
	<div id="bloc_page">
		<div class="liseret"></div>
	<header>
 
 
 
		<div class="photo">
			<a href="images/profil.jpg"><img src="images/profil_mini.jpg" class="imageflottante" alt="ma photo" title="Clique ici" /></a>
				<h1>Thomas Bourdin</h1>
					<p>Comme le dit souvent ma copine cocaïnomane : tire un trait, tu y verras plus clair.</p>
						</div> 
 
	</header>
 
 
<section>
 
<div class="conteneur">
 
<article>
 
		<h3 class="exp">Experiences professionnelles</h3>
 
<ul>
	<li>Mise en œuvre des instructions fournies par des consultants pour assurer les soins appropries aux patients.</li><br />
	<li>Collaboration avec les consultations du personnel afin d’identifier et de repondre a diverses questions.</li><br />
	<li>Remplir et modifier les ordonnances des patients selon les directives.</li>
</ul>
</article>
 
<article>
 
			<h3 class="qua">Qualifications et competences</h3>
 
<ul>
	<li>Bonne experience des soins aux patients en general et des conditions medicales courantes.</li><br />
	<li>Bonne connaissance des politiques et des procedures sur la facon de traiter les plaintes des patients.</li><br />
	<li>Aptitude a remplir les ordonnances des patients.</li>
</ul>
</article>
 
<article>
 
<h3 class="for">Formation et diplome</h3>
 
<ul>
	<li>Universite Paris VIII : Diplome de medecine avec une option en pharmacologie obtenu en 2008.</li>
</ul>
 
</article>
 
				</div>		
			</div>
		</section>
	</body>
</html>

CSS

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
77
78
79
80
81
82
83
/* police personaliées */
 
@font-face {
    font-family: 'police/cac_champagneregular';
    src: url('police/cac_champagne-webfont.eot');
    src: url('police/cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/cac_champagne-webfont.woff2') format('woff2'),
         url('police/cac_champagne-webfont.woff') format('woff'),
         url('police/cac_champagne-webfont.ttf') format('truetype'),
         url('police/cac_champagne-webfont.svg#cac_champagneregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
/* Corp de page */
 
p
{
	font-family: 'police/cac_champagneregular', arial, sérif;
	font-size: 1.5em;
}
 
p, h1
{
	text-align: center;
}
 
h3
{
	color: maroon;
	border-bottom: 2px black solid;
}
 
body
{
	background-image: url("images/fondeffet.jpg");
}
 
 
 
.imageflottante
{
	float: right;
	width: 190px;
   box-shadow: 6px 6px 0px silver;
   margin: 10px;
 
}
 
 
article
{	
	display: inline-block;
	vertical-align: top;
	width: 350px;
	padding-left: 2em;
	overflow: auto;
}
 
section
{
	display: flex;
 
	justify-content: center;
 
}
 
.liseret
{
	border: 2px black solid;
 
	width: 100px;
	height: 500px;
 
}
 
body
{	
	border: 2px black solid;
 
	margin: 0;
 
}

Merci,

**JefReb** · 18/11/2017, 10h02

Il faut choisir float ou flexbox.
Pour une mise en page il est recommandé d'utiliser les flexbox.
Mais il faut indiquer ce qu'on veut.
Or tu ne spécifie pas quelle direction des flex? row ou column.
Comment se répartissent les flex-item en % etc. etc.

Il manque beaucoup de css dans le code fourni. exemple #bloc_page .photo .exp .qua .for etc. etc.
difficile dans ce cas de tester ton code.
Pourquoi rajouter une classe <div class="conteneur"> alors que <section> devrait suffire.

Voici un exemple d'une page dont le code n'est pas de moi mais écrit, je crois par Jreaux62
https://codepen.io/JefReb/pen/eeyJwm

**NoSmoking** · 18/11/2017, 10h13

Bonjour,

Je n'arrive pas que les 2 blocs soit côte à côte. Mon liseré fait descendre le tout..

pour commencer, il faut appliquer le display:flex sur l'élément conteneur à savoir dans ton cas <div id="bloc_page">.

Nota : un élément en display:flex peut avoir des éléments en display:flex.

**narchymaster** · 18/11/2017, 17h20

Salut,

Merci à vous 2 ^^
Je vais m'y pencher dessus ^^

Merci

**narchymaster** · 20/11/2017, 14h18

Salut,

J'ai résolu mon soucis en lisant les Cours et tutoriels pour apprendre CSS :

HTML

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
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
<!DOCTYPE html>
	<html>
		<head>
 
			<title>Mon CV</title>
			<meta charset="utf-8">
			<link rel="stylesheet" type="text/css" href="stylebis.css">
 
		</head>
<body>
	<div id="bloc_page">
		<div class="liseret"></div>
 
	<header class="header">
 
			<div class="profil">
			<a href="images/profil.jpg"><img src="images/profil_mini.jpg" alt="ma photo" title="Clique ici" /></a>
		</div>
 
 
			<div class="titre">
				<h1>Thomas Bourdin</h1>
					<p>Comme le dit souvent ma copine cocaïnomane : tire un trait, tu y verras plus clair.</p>
				</div>
 
	</header>
 
 
<section>
 
<article>
 
		<h3>Experiences professionnelles</h3>
 
<ul>
	<li>Mise en œuvre des instructions fournies par des consultants pour assurer les soins appropries aux patients.</li><br />
	<li>Collaboration avec les consultations du personnel afin d’identifier et de repondre a diverses questions.</li><br />
	<li>Remplir et modifier les ordonnances des patients selon les directives.</li>
</ul>
</article>
 
<article>
 
			<h3>Qualifications et competences</h3>
 
<ul>
	<li>Bonne experience des soins aux patients en general et des conditions medicales courantes.</li><br />
	<li>Bonne connaissance des politiques et des procedures sur la facon de traiter les plaintes des patients.</li><br />
	<li>Aptitude a remplir les ordonnances des patients.</li>
</ul>
</article>
 
<article>
 
<h3>Formation et diplome</h3>
 
<ul>
	<li>Universite Paris VIII : Diplome de medecine avec une option en pharmacologie obtenu en 2008.</li>
</ul>
 
</article>
 
 
			</div>
		</section>
	</body>
</html>

CSS

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
/* police personaliées */
 
@font-face {
    font-family: 'police/cac_champagneregular';
    src: url('police/cac_champagne-webfont.eot');
    src: url('police/cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/cac_champagne-webfont.woff2') format('woff2'),
         url('police/cac_champagne-webfont.woff') format('woff'),
         url('police/cac_champagne-webfont.ttf') format('truetype'),
         url('police/cac_champagne-webfont.svg#cac_champagneregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
/* Corp de page */
 
body
{
	margin: 0;
}
 
.profil
{
	display: flex;
}
.liseret 
{
 
	float: left;
	width:180px;
    height: 948px;
    background-color: #324A52;
}
 
 
.titre
{
	margin: auto;
	text-align: center;
 
}
 
.header
{
	display: flex;
	justify-content: center;
	flex-direction: row-reverse;
 
}
 
 
section
{
	display: flex;
	justify-content: center;
	vertical-align: top;
 
}
 
h3
{
	text-align: center;
 
}
 
article
{
	align-items: center;
	text-align: justify;
	width: 250px;
	margin: 1em;
	padding: 0.5em;
	background: #e1e1e1;
	border-radius: 5px 5px 5px 5px;
 
}

Juste un petit cadrage de titre avec les bloc d'en dessous ou je n'arrive pas spécialement, mais en soit j'ai réussi à faire ce que je voulais ^^

Merci

**NoSmoking** · 20/11/2017, 18h26

Quelques remarques quand même :

• Ton code HTML est un peu capillotracté, et au passage non conforme, une <section> hors de la <div>, ligne 64-65.

• Le mélange de float dans ce jeu de flex n'est pas des plus judicieux, si le liseré est purement décoratif il y a surement moyen de faire différemment.

• La règle height: 948px n'est pas non plus des plus élégante et pourrait avantageusement être remplacée par min-height: 100vh.

**narchymaster** · 21/11/2017, 10h36

Salut,

J'ai corriger la section et aurais tu un tuto concernant l'unité de mesure VH ? Je ne l'ai jamais vu.

Pour le liseré qui est purement décoratif, hier j'ai fais que changer, chercher avec flexbox, mais rien n'y fait.. je me suis résolu à mettre float..

Merci,

Invité · 21/11/2017, 11h58

Bonjour,

ne jamais négliger de CHERCHER !

"unité de mesure VH"

<length> CSS - MDN

Utilisation de FlexBox

Positionnement en CSS avec flexbox

Discussions similaires

Partager

Partager