Exercice sur CV

22 février 2018 à 16:09:23

Bonjour,

Je suis entrain de travailler mon CV (exo du cours). Je n'arrive pas à aligner les 3 colonnes (Mon expérience, Ma compétence, Ma formation). La 3ème ne remonte pas. Merci de m'indiquer la façon d'y remédier. Je travaille sur IE11. Voici les codes html et CSS ci-dessous:

<!DOCTYPE html>
<html lang="fr">
 <head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="style2.css"/>
 <title>CV Pierre Jacques</title>
 </head>
  <body>
   <div id="conteneur"> 
      <div id="Mon expérience">
       <h2>Mon expérience</h2>
       <ul>
        <li><strong>De 2007 à 2016</strong>: chef de projet à l'International</li>
        <li><strong>De 2004 à 2007<strong>: chef de projet domaine exploitation</li>
        <li><strong>De 2000 à 2004<strong>: chef de projet logistique</li>
       </ul>
      </div>
      <div id="Ma compétence">
       <h2>Mes compétences</h2>
       <ul>
        <li><strong>langage systeme BULL<strong></li>
        <li><strong>langage COBOL<strong></li>
       </ul>
      </div>
      <div id="Ma formation">
       <h2>Formation</h2>
       <ul>
        DESS Management  
       </ul>
      </div>
   </div>
  </body>
</html>

EN CSS:

body
{
 width:800px;
 margin-top:150px
}
#conteneur{
 display:flex;
 flex-direction:row;
 flex-wrap: no-wrap;
 align-items:fex-end;
 /*width:320px;*/
 margin-left:50px;
 background:#ccc;
}


#Mon expérience{
 display:flex;
 flex-direction:column;
}
#Ma compétence{
 display:flex;
 flex-direction:column;
 
}
 
#Ma formation{
 display:flex;
 flex-direction:column;
}

-
Edité par Benzouye 22 février 2018 à 18:38:29

Benzouye

22 février 2018 à 18:37:52

Bonjour,

Tu devrais travailler avec un éditeur de texte qui donne une coloration syntaxique ...

Tu aurais vu que tes balises <strong> ne sont pas toutes fermées, du coup ton balisage part en sucette ...

Reprends tes balises <strong> ... </strong> correctement et ça devrait aller mieux

Après, attention à la syntaxe CSS également ... nowrap (sans le tiret) et flex-end (avec un L) ...

Un peu trop étourdi et pas assez persévérant dans ta relecture de code :-°

-
Edité par Benzouye 22 février 2018 à 18:39:34

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

MarcIa1

5 mars 2018 à 17:01:09

Bonjour,

J'ai réussi à arranger les titres de ses 3 colonnes côte à côte. Mais, je n'ai pas réussi à les aligner. Merci de m'indiquer la façon de réaliser. Voici les codes en html et en css.

En html:

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css"/>
<title>CV Pierre Jacques</title>
</head>
  <body>
   <div id="conteneur">
      <div id="Mon experience">
       <h2>Mon expérience</h2>
       <ul>
        <li><strong>De 2007 à 2016</strong>: chef de projet à l'International</li>
        <li><strong>De 2004 à 2007</strong>: chef de projet domaine exploitation</li>
        <li><strong>De 2000 à 2004</strong>: chef de projet logistique</li>
       </ul>
      </div>
      <div id="Ma competence">
       <h2>Mes compétences</h2>
       <ul>
        <li><strong>langage systeme BULL</strong></li>
        <li><strong>langage COBOL</strong></li>
       </ul>
      </div>
      <div id="Ma formation">
       <h2>Formation</h2>
       <ul>
        DESS Management
       </ul>
      </div>
   </div>
  </body>
</html>

En css:

body
{
width:1000px;
margin-top:150px
}
#conteneur{
display:flex;
height:500px;
flex-wrap: nowrap;
align-items:center;
align-content:space-around;
margin-left:250px;
background:#ccc;

}

#Mon experience{
vertical-align:baseline;
margin:auto;

}
#Ma competence{
vertical-align:baseline;
margin:auto;

}

#Ma formation{
vertical-align:baseline;
margin:auto;
}

Benzouye

5 mars 2018 à 17:48:40

MarcIa1 a écrit:

je n'ai pas réussi à les aligner

C'est à dire ?

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

MarcIa1

5 mars 2018 à 19:20:59

Les titres ainsi que ses listes à puces correspondantes ne sont pas alignés au même niveau horizontal.

Benzouye

6 mars 2018 à 9:19:49

Alors première chose, pas d'espace dans les id de tes éléments ... car côté CSS ils ne sont pas reconnus ... donc le CSS n'est pas appliqué ...

Après, si plusieurs blocs ont le même CSS, alors autant utiliser une classe CSS pour n'écrire le CSS qu'une seule fois ...

Enfin, il te faut vraiment relire le cours sur la partie flexbox ... tout y est expliqué ... et notamment l'alignement, sur les axes principal et secondaire.

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

echo AlexandreB

8 mars 2018 à 13:53:55

quand je vois tes erreurs , je me pose la question sur quel ide tu écrit ton code ? un petit ide comme atom te permet déjà d'évité ces petite erreur

MarcIa1

14 mars 2018 à 17:11:45

Bonjour,

Suite à vos remarques, j'ai relu attentivement le cours. Tout est corrigé. Merci.

Exercice sur CV

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Exercice sur CV

Exercice sur CV

Supprimer

Modérer

Signaler le message aux modérateurs