Exercice CV 3 avec flexbox

Sujet résolu

20 avril 2018 à 15:27:40

Bonjour la communauté openclassroom.

Je me prends la tête avec le flexbox et ca m'as bien pris la tête pour arriver à ce résultat mais je pense qu'il n'est pas assez bon c'est pour ca que je viens vous demandez de l'aide.

Dans cette exercice on doit créer un CV et utiliser flexbox pour mettre cote à cote les blocks.

Exercice :

A gauche, un liseré (purement décoratif, mais vous pouvez aussi mettre des informations à l'intérieur)
A droite, le contenu de votre CV, qui contiendra à l'intérieur, de gauche à droite les sections suivantes :
- Mon expérience
- Mes compétences
- Ma formation
- Si la hauteur du liseré peut être définie en valeur absolue (en pixels), tout le reste de la mise en page doit être en valeur relative (pourcentages). Le contenu doit occuper tout l'espace en largeur, quelle que soit la largeur de la fenêtre.
  
  N'oubliez pas d'utiliser des balises sémantiques, comme nous l'avons vu dans le cours.
  
  Vous avez bien sûr le droit de modifier le code HTML en plus du code CSS pour parvenir à un rendu similaire.
  
  Allez c'est parti !.
Donc voici mon code HTML ET CSS merci pour votre aide. le liseret gris je l'ai placé bizarrement, je n'arrivé pas ) l'utilisé sur un height de 100% de la page

Lamecarlate

20 avril 2018 à 15:30:19

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci d'utiliser les balises de code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour celà, il faut utiliser le bouton . Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: c;">Votre code ici</pre>.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

C0c0lastic0

20 avril 2018 à 15:31:00

désolé il me manquait une ligne sur mon CSS

.section

{

background-color: gray;

width: 10%;

height: 900px;

margin-left: 0px;

margin-right: 15px;

margin-top: -250px;

}

Lamecarlate

20 avril 2018 à 15:41:32

> Merci d'utiliser les balises de code.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

C0c0lastic0

20 avril 2018 à 15:45:43

Ok c'est enregistré pour la balise code.

Du coup je repost en dessous pour le code.

<!DOCTYPE html>
<html>
	<head>
			<meta charset="urf8" />
			<title> CV BOUVIER PIERRE </title>
			<link rel="stylesheet" type="text/css" href="csscvtest.css">
	</head>
	<body>
		<div class="bloc_page">
		<h1><mark> BOUVIER PIERRE</mark></h1>


		<p> <div class="rougeintro"> En formation web dev junior, futur entreprenneur <br /><a href="mailto:bouvierpierre.pro@gmail.com"> bouvierpierre.pro@gmail.com  </a></div>  </p>	
		<div class="allblock">
		<div class="competences"><h2> Mes compétences</h2>
			<ol> 
				<li>Déterminé </li>
				<li>Créatif et innovant </li
>				<li>Stratégie commercial </li>
			</ol>
		</div>

		 <div class="formation"> <h2>Ma formation</h2>
				<p> Ma formation <a href="https://www.openclassrooms.com" target="_blank"> openclassrooms</a> viens de débuter et j'en suis trés content, quel plaisirs d'apprendre un nouveau métier et bien plus, une nouvelle langue. <br /> Ce CV est un premier excercice intéressant qui reprends bien tout ce que l'on à vu depuis le début. J'ai hâte de continuer d'apprendre via cette formation <a href="https://www.openclassrooms.com" target="_blank"> openclassrooms </a> et de devenir un bon dévellopeur web. </p>
			</div>
		<div class="exp"> <h2>Mon expérience</h2>
			<ul>
				<li> 2018 / à ce jour : Formation openclassrooms Web dev junior</li>
				<li> 2017 / 2018 : AVS : assistant de vie scolaire</li>
				<li> 2015 / 2017 : préparateur de commandes </li>
				<li> 2013 / 2015 : formation et emploi en temps que monteur dépanneur frigoriste </li>
				<li> 2010 / 2013 : employé polyvalent en restauration </li> 
				<li> 2001 / 2009 : Militaire dans l'armée de l'air en occupant la fonction de maître chien </li> 
			</ul>
		</div>
		 <div class="section"> <section>
			<p></p>
			<p> </p>
		</section>
	</div>
		</div>
		</div>
	</body>
	</html>

.rougeintro
{
	color: red;
	text-align: center;
}

h1
{

	text-align: center;
}

h2
{
	color: darkred;
}

body
{
	background-image: url(images/photo_cv.jpg);
	background-position:90% 0%;
	background-repeat: no-repeat;
	background-size: 150px 150px;

}

@font-face 
{
	font-family: 'rubik-regular';
	src: url('fonts/rubik-black.ttf')
		 url('fonts/rubik-blackitalic.ttf')
		 url('fonts/rubik-bold.ttf')
		 url('fonts/rubik-bolditalic.ttf')
		 url('fonts/italic.ttf')
		 url('fonts/rubik-light.ttf')
		 url('fonts/rubik-lightitalic.ttf')
		 url('fonts/rubik-medium.ttf')
		 url('fonts/rubik-mediumitalic.tff')
		 url('fonts/rubik-regular.ttf')
		 font-weight: normal;
		 font-size: normal;
}

*
{font-family: 'rubik-regular', Impact, "Arial Black", Arial, Verdana, sans-serif;


color: black; 

 }

 a:hover
 {
 	font-weight: bold;
 }

 .allblock
 {
 	display: flex;
 	flex-direction: row-reverse;
 	justify-content: space-between;
 	align-items: center;
 	padding-top: 100px;
 	margin: auto;
 
}

.bloc_page
{
	width: 100%;
	height: 100%;
	position: relative;


}

.formation
{
margin: auto;
width: 30%;
margin-left: 15px;
margin-right: 15px;
margin-top: -0%;
}

.competences
{
margin: auto;
width: 30%;
margin-left: 15px;
margin-right: 15px;
margin-top: -0%;
}

.exp
{
margin: auto;
width: 30%;
margin-left: 15px;
margin-right: 15px;
margin-top: -0%;
}

.section
{

background-color: gray;
width: 10%;
height: 900px;	
margin-left: 0px;
margin-right: 15px;
margin-top: -250px;

}

Lamecarlate

20 avril 2018 à 16:10:15

Alors, déjà, les propriétés et valeurs de .formation, .competences et .exp sont identiques. Donc soit tu écris :

.formation,
.competences,
.exp {
  /* */
}

soit tu leur donnes - en plus - une classe commune avec ces propriétés, soit tu joues avec leur parent .allblock, en écrivant

.allblock > * {
  /* */
}

(E > F c'est le sélecteur d'enfant - par opposition à E F [c'est une espace, entre les deux], qui est le sélecteur de descendants)

Ensuite, pourquoi avoir choisi "row-reverse" comme direction ? Tu te compliques la vie. Si c'est pour ajouter le liseré, ce dernier n'a rien à faire dans .allblock. Puisqu'il doit prendre toute la hauteur, autant en faire un enfant de body directement

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Mewen_bzh

20 avril 2018 à 16:13:35

Bonjour,

Pour commencer, je vais dire ce que je dis toujours : on ne décore pas sa maison avant d'avoir creusé des fondations solides. En d'autres termes, on ne passe pas au CSS si le HTML n'est pas correct.

Ici j'ai regardé rapidement et déjà je vois :

- ligne 4 : tu écris "urf8" au lieu de "utf-8",

- ligne 13 : un p ne peut pas contenir une div et, au passage, pourquoi ouvrir une div ici au lieu de simplement mettre ta class "rougeintro" sur le p justement ?

- ligne 16 : d'un point de vue sémantique, ul serait plus adapté que ol ici,

- ligne 36 : pourquoi une section dans une div avec la class "section" ?

- D'une manière générale, attention à la sémantique. Par exemple à de nombreux endroits un section remplacerait avantageusement tes div...

-
Edité par Mewen_bzh 20 avril 2018 à 16:19:11

Je ne réponds pas aux messages privés.

C0c0lastic0

20 avril 2018 à 16:16:11

J'ai essayer de l'intégrer dans le body, mais il ne se mettait pas à gauche comme voulu, c'est pour ca que j'ai voulu l'aligner dans les blocks.

Je commence à comprendre le systéme de parents/enfants par contre ce que je comprends moins c'est quand fermer la DIV.

Je réessayer de le faire en intégrant le liséré dans le body et en essayant de lui faire prendre des % plutôt que des pixels pour l'adapation généraliste.

Merci de ton aide en tout cas.