Justify-content ne fonctionne pas

Sujet résolu

11 septembre 2017 à 14:03:26

Bonjour, je travaille actuellement sur l'activité 3 "Organiser son CV" du cours "HTML5 & CSS3" et je rencontre un problème lorsque je veux utiliser "justify-content". J'ai d'abord pensé que mon code HTML ou CSS avait un problème, je suis donc allée les validé sur w3c.org et dans les deux cas mon code est validé par la magnifique phrase verte "Document checking completed. No errors or warnings to show". Alors c'est chouette mais ça ne me dit pas où est le problème...

Voici mon code HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="stylecv.css" />
	<title>Curriculum vitae</title>
</head>

<body>
<aside><img src="image/aside.png" alt="aside" /></aside>
<h1>Oliver Lechat</h1>
	<p class="citation">Passionné de bêtises depuis l'enfance<br />
	<a href="image/oliver.png"><img src="image/oliver_mini.png" alt="Oliver le chat" /></a></p>
<div id="cv">
<div class="experience">
<h2>Experience</h2>
	<ul>
	<li><span>2014~Aller dehors</span>: Expérience effroyable, j'avoue n'avoir jamais recommencé une telle folie.</li>
	<li><span>2015~Faire pipi sur le canapé</span>: Vu le nombre de claques que j'ai reçu, ce n'est pas à recommencer.</li>
	<li><span>2016~Aller chez le vétérinaire</span>: Parce que terroriser des chats est un métier.</li>
	</ul>
</div>
<div class="competence">
<h2>Mes competences</h2>
	<ul>
	<li>Embêter mes maîtres.</li>
	<li>Sauter sur les meubles en prenant soin de faire tomber quelque chose en passant.</li>
	<li>Renverser ma gamelle d'eau.</li>
	<li>Dominer les autres chats de la maison en leur mettant des claques pour leur rappeler qui est le chef.</li>
	<li>Passer la journée sur la fenêtre à guetter les chats du quartier.</li>
	</ul>
</div>
<div class="formation">
<h2>Ma formation</h2>
	<p>J'ai appris seul à être le chat que je suis, aucun chat n'aurait été digne de m'apprendre à être aussi parfait.</p>
</div>
</div>
</body>
</html>

Et mon code CSS:

@font-face 
{
  font-family: 'dobkinplain';   
	src: url('fonts/DobkinPlain-webfont.eot');    
	src: url('fonts/DobkinPlain-webfont.eot?#iefix') format('embedded-opentype'),         
	url('fonts/DobkinPlain-webfont.woff2') format('woff2'),         
	url('fonts/DobkinPlain-webfont.woff') format('woff'),       
	url('fonts/DobkinPlain-webfont.ttf') format('truetype'),
	url('fonts/DobkinPlain-webfont.svg#dobkinplain') format('svg');
	font-weight: normal;
    	font-style: normal;
}
@font-face
{
    font-family: 'aileronregular';
    src: url('fonts/Aileron-Regular-webfont.eot');
    src: url('fonts/Aileron-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Aileron-Regular-webfont.woff2') format('woff2'),
         url('fonts/Aileron-Regular-webfont.woff') format('woff'),
         url('fonts/Aileron-Regular-webfont.ttf') format('truetype'),
         url('fonts/Aileron-Regular-webfont.svg#aileronregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
body
{
	background: url("image/paw.png") fixed no-repeat top left, url("image/img_cat.png") fixed;
}
h1
{
	font-size: 2.9em;
	text-shadow: 2px 2px 6px #3E92AD;
	font-family: 'dobkinplain';
}
h1, img, .citation
{
	text-align: center;
}
.citation, p
{
	font-family: 'aileronregular';
}
h2
{
	font-size: 1.9em;
	font-family: 'dobkinplain';
	text-shadow: 2px 2px 6px #3E92AD;
	text-align: center;
}
ul
{
	list-style-type: none;
	padding: 0;
	margin: 0;
}
li
{
	font-family: 'aileronregular';
	display : list-item;
	background-image: url("image/mini_paw.png");
	background-position: left top;
	background-repeat: no-repeat;
	padding-left: 15px;
}
span
{
	font-weight: bold;
}
img
{
	border: 6px #3E92AD ridge;
}
#cv
{
	display: flex;
	width: 1000px;
	margin-left: 150px
}
.experience:nth-child(1)
{
	background-color: rgba(167,146,213,0.3);
	border: 6px #3E92AD double
}
.competence:nth-child(2)
{
	background-color: rgba(228,141,192,0.3);
	border: 6px #3E92AD double
}
.formation:nth-child(3)
{
	background-color: rgba(131,169,126,0.3);
	border: 6px #3E92AD double	
}
aside 
{
    background: #3E92AD;
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 5%;
}

Il y a t-il des erreurs qui m'empêche d'utiliser justify-content correctement ? J'ai du utiliser "margin-left: 150px" pour que "experience, competence et formation" ne se retrouvent pas sous mon liseret...

Je suis débutante, alors je m'excuse d'avance si mes codes vous piquent les yeux ou si je suis simplement complètement idiote

Anonyme

11 septembre 2017 à 14:33:16

Hello Ynua

J'ai du mal à comprendre ce que tu cherches à faire ! (Un screen ne serait pas de trop).

Si tu veux que ton liseré soit à gauche il va falloir revoir la disposition de tes "bloc".

Tu utilises 3 classes différentes pour (experience, competence, formation), une seule suffit.

-
Edité par Anonyme 11 septembre 2017 à 15:59:53

Ynua

11 septembre 2017 à 14:45:37

Bonjour !

Eh bien j'aimerai que mes "cadre" Experience, Competence et Formation soit (par exemple) comme ceci:

La position de mon liseré à droite me convient !

Si je n'utilise pas trois classes différents pour experience, competence et formation comment je peux changer la couleur de chacune d'elle ? J'ai utilisé trois couleurs différente. Est-ce que le problème vient de là ?

Anonyme

11 septembre 2017 à 15:08:25

Hello,

Il te faut utiliser "flexbox" pour placer tes "bloc" sur ta page.

Avec "display:flex" et "justify-content: space-between" ça devrait aller.

Il faut utiliser le sélecteur d'enfant "nth-child(x)" ou "x" est l'enfant (son numéro dans la hiérarchie) afin de naviguer à travers cette classe.

Tu l'a utilisé mais sur une classe qui ne comporte qu'un seul élément.

Ps: sur ton image je ne vois que 3 blocs, ton liseré est où ?

Ynua

11 septembre 2017 à 15:20:15

Ah, donc je ne peux pas l'utiliser sur mes blocs parce qu'ils sont séparés chacun dans une div class ? Lorsque j'utilise "display: flex" et "justify-content: space-between" dans mon sélecteur "nth-child" c'est le texte à l'intérieur qui se met en "display: flex".

Mon liseré c'est la balise "aside", encore une fois, je ne suis pas sûre que ça s'utilise comme ça mais c'est la seule chose qui a fonctionné lorsque j'ai créer mon liseré.

EDIT: Je viens de modifier tout mes div class avec un seul et unique nom "experience", mais rien ne change lorsque j'utilise justify-content. Je dois bien placer "display:flex" et "justify-content" dans la div cv, non ?

-
Edité par Ynua 11 septembre 2017 à 15:34:01

Anonyme

11 septembre 2017 à 15:47:59

Il faut utiliser "flex" sur ton conteneur pour qu'il agisse sur les éléments de ce conteneur.

Si tu as

<div id="container">
  <div class="objects"></div>
  <div class="objects"></div>
  <div class="objects"></div>
</div>

Le comportement normal c'est d'avoir les "div" avec classe ".objects" se retrouvant les unes en dessous des autres.

Avec un "display:flex" sur "#container", elles (les "div" classe = ".objects") seront dorénavant alignées.

Si tu mets un "display:flex" sur ".objects" ça n'aura aucun effet (sauf si dedans se trouve des éléments). Il faut agir sur le conteneur "parent" pour voir les "enfants" bouger.

Ynua

11 septembre 2017 à 15:51:34

Très bien, j'ai corrigé !

Mon code HTML:

<div id="cv">
<div class="experience">
<h2>Experience</h2>
	<ul>
	<li><span>2014~Aller dehors</span>: Expérience effroyable, j'avoue n'avoir jamais recommencé une telle folie.</li>
	<li><span>2015~Faire pipi sur le canapé</span>: Vu le nombre de claques que j'ai reçu, ce n'est pas à recommencer.</li>
	<li><span>2016~Aller chez le vétérinaire</span>: Parce que terroriser des chats est un métier.</li>
	</ul>
</div>
<div class="experience">
<h2>Mes competences</h2>
	<ul>
	<li>Embêter mes maîtres.</li>
	<li>Sauter sur les meubles en prenant soin de faire tomber quelque chose en passant.</li>
	<li>Renverser ma gamelle d'eau.</li>
	<li>Dominer les autres chats de la maison en leur mettant des claques pour leur rappeler qui est le chef.</li>
	<li>Passer la journée sur la fenêtre à guetter les chats du quartier.</li>
	</ul>
</div>
<div class="experience">
<h2>Ma formation</h2>
	<p>J'ai appris seul à être le chat que je suis, aucun chat n'aurait été digne de m'apprendre à être aussi parfait.</p>
</div>
</div>

Et mon code CSS:

#cv
{
	display: flex;
	justify-content: space-around;
	width: 1000px;
	margin-left: 150px;
}
.experience:nth-child(1)
{
	background-color: rgba(167,146,213,0.3);
	border: 6px #3E92AD double
}
.experience:nth-child(2)
{
	background-color: rgba(228,141,192,0.3);
	border: 6px #3E92AD double
}
.experience:nth-child(3)
{
	background-color: rgba(131,169,126,0.3);
	border: 6px #3E92AD double	
}

C'est bien comme ça qu'il faut que ça soit présenté ?

(justify-content ne fonctionne toujours pas )

Anonyme

11 septembre 2017 à 17:13:31

Hello chez moi ça fonctionne

https://jsfiddle.net/4N42K1/c8r79tw6/

Faut donner une taille à tes 3 "div" compétences sinon le navigateur les affichent en prenant toute la largeur disponible et donc plus possible de mettre un "space-around".

Ps: tu peux mettre ce code plutôt de que de répéter dans les 3

.experience
{  
  width:250px;
  border: 6px solid #3E92AD;
}

-
Edité par Anonyme 11 septembre 2017 à 17:15:26

Ynua

11 septembre 2017 à 17:47:10

Ah ! Effectivement ça marche !

Merci infiniment pour le temps accorder et pour ton aide

Anonyme

11 septembre 2017 à 17:56:53

De rien