Utilisation de FlexBox

Version imprimable

1 pièce(s) jointe(s)

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 :

Pièce jointe 328097

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

HTML

Code:

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:

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,

18/11/2017, 10h02
JefReb

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
18/11/2017, 10h13
NoSmoking

Bonjour,

Citation:

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.
18/11/2017, 17h20
narchymaster

Salut,

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

Merci :)

Salut,

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

HTML

Code:

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:

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 :)

20/11/2017, 18h26
NoSmoking

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.
21/11/2017, 10h36
narchymaster

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,
21/11/2017, 11h58
Invité
Bonjour,

ne jamais négliger de CHERCHER !

:google: "unité de mesure VH"
- <length> CSS - MDN