1. #1
    Candidat au Club
    Homme Profil pro
    Debutant
    Inscrit en
    novembre 2017
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Debutant

    Informations forums :
    Inscription : novembre 2017
    Messages : 6
    Points : 3
    Points
    3

    Par défaut Utilisation de FlexBox

    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 : 52
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,

  2. #2
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 404
    Points : 535
    Points
    535

    Par défaut

    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

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 005
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 005
    Points : 32 169
    Points
    32 169

    Par défaut

    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.

  4. #4
    Candidat au Club
    Homme Profil pro
    Debutant
    Inscrit en
    novembre 2017
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Debutant

    Informations forums :
    Inscription : novembre 2017
    Messages : 6
    Points : 3
    Points
    3

    Par défaut

    Salut,

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

    Merci

  5. #5
    Candidat au Club
    Homme Profil pro
    Debutant
    Inscrit en
    novembre 2017
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Debutant

    Informations forums :
    Inscription : novembre 2017
    Messages : 6
    Points : 3
    Points
    3

    Par défaut

    Salut,

    J'ai résolu mon soucis :

    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

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 005
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 005
    Points : 32 169
    Points
    32 169

    Par défaut

    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.

  7. #7
    Candidat au Club
    Homme Profil pro
    Debutant
    Inscrit en
    novembre 2017
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Debutant

    Informations forums :
    Inscription : novembre 2017
    Messages : 6
    Points : 3
    Points
    3

    Par défaut

    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,

  8. #8
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 581
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 581
    Points : 21 188
    Points
    21 188

    Par défaut

    Bonjour,

    ne jamais négliger de CHERCHER !

    "unité de mesure VH"

    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

Discussions similaires

  1. Problème d'installation oracle 8.1.7 sous NT
    Par Anonymous dans le forum Installation
    Réponses: 7
    Dernier message: 02/08/2002, 15h18
  2. Problème d'impression
    Par IngBen dans le forum C++Builder
    Réponses: 7
    Dernier message: 22/05/2002, 12h37
  3. Problème avec la mémoire virtuelle
    Par Anonymous dans le forum CORBA
    Réponses: 13
    Dernier message: 16/04/2002, 17h10
  4. Réponses: 6
    Dernier message: 25/03/2002, 22h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo