Salut

voila je n'arrive pas a satisfaire la dernière taches de ce tp pratique  ( https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/pratiquez-5 )

elle consiste a :Affichez les paragraphes en justifié, sur 80% de largeur et centrez leurs blocs sur la page

j'ais tout essayé 

alors soit je n'ais pas très bien compris la tache

ou pas très bien compris le cours flex box..

bref!! voila mon code css et le rondu

aidé moi svp

#menu{
list-style:none
}
#topsection{
display:flex;
}
.content{
display: flex;
flex-direction: column;
justify-content: center;
width: 80%;
text-align:justify;
margin: auto
}

ps: même sans justify-content:center j'y arrive   pcq 'il y a  margin :auto

Bonjour. Avez vous trouvé la solution, car je suis le même cours, et je suis bloqué au même endroit... Merci beaucoup.

salut

oui c'est bon

je suis désolé pour le retard je ne me suis pas connecté depuis...

le truc c'est qu'il faut qu'a chaque fois que tu veux vérifier ton code  tu clique avant sur le bouton "build website" puis tu coche la tache..ce n'est pas automatique

donc j'avais juste pour le code source mais puisque je n'avais pas cliqué sur "buid website" alors il refusait mon code

#menu{
list-style:none
}
#topsection{
display:flex;
}
.p{
display: flex;
flex-direction: column;
width: 80%;
text-align:justify;
margin: auto
}

Good luck

Bonjour, comment avez vous fait pour mettre le Header et le Menu côte à côte ?

bonjour Lamia

la réponse est dans le code précédent:

#topsection{
display:flex;
}

mais si tu veux comprendre le principe y a pas de soucie:

pour aligner les box, que ce soit div header p ... , il suffit d'appeler flex box en css

moi personnellement je divise le flex en deux catégorie :

*coté parent: j'ecrie ces commandes que dans le box père celui qui contient mes autre box(fils)

-display:flex //déposer mes fils bloque(div,p..) cote a cote// -display:inline-flex //déposer mes fils inline (span..) et bloque cote a cote

-flex-direction:row (par défaut)//1 2 3// :row-revers //3 2 1// :column // 1 2 3 (verticale)// :column-revers // 3 2 1 (verticale)

-flex-wrap: wrap//mes fils peuvent faire un saut si mon width est étroit pour eux// :nowrap //empêcher mes fils de faire un saut même si mon          width est etroit pour eux // : wrap-revers // comme son nom l'indique..//

-flex-flow:<flex-direction>,<flex-wrap>//par defaut= flex-flow: row nowrap; //

-justify-content: flex-start(par defaut) //le justify-content permet de maîtriser mes fils horizontalement ( de gauche a droit ) dans un grand                espace sans wrap//:flex-end //:center // :space-between // : space-around

-align-content:stretch (par defaut)//le align-content permet de maîtriser mes fils verticalement ( de haut en bas ) dans un petit espace avec              wrap// :flex-start // : flex-end // : center // :space-between // : space-around

-align-items:stretch (par defaut)//:flex-start // : flex-end // : center //: baseline 

*coté fils:j'ecrie ces commandes que dans le box fils celui qui est concerné:

-order:<nembre>

-flex-grow: 0 (defaut) //progression ou agrandissement//

-flex-shrink: 1(defaut) // progression ou diminution //

-flex-basis: auto (defaut)

shorthand est = flex:<flex-grow> | <flex-shrink> |<flex-basis> //ex= flex:0 1 auto;//

voila c'est tous, j’espère que c'été clair, instructif et que sa t'as bien aidé a avancé..

Good Luck

RadZin a écrit:

bonjour Lamia

la réponse est dans le code précédent:

#topsection{
display:flex;
}

mais si tu veux comprendre le principe y a pas de soucie:

pour aligner les box, que ce soit div header p ... , il suffit d'appeler flex box en css

moi personnellement je divise le flex en deux catégorie :

*coté parent: j'ecrie ces commandes que dans le box père celui qui contient mes autre box(fils)

-display:flex //déposer mes fils bloque(div,p..) cote a cote// -display:inline-flex //déposer mes fils inline (span..) et bloque cote a cote

-flex-direction:row (par défaut)//1 2 3// :row-revers //3 2 1// :column // 1 2 3 (verticale)// :column-revers // 3 2 1 (verticale)

-flex-wrap: wrap//mes fils peuvent faire un saut si mon width est étroit pour eux// :nowrap //empêcher mes fils de faire un saut même si mon          width est etroit pour eux // : wrap-revers // comme son nom l'indique..//

-flex-flow:<flex-direction>,<flex-wrap>//par defaut= flex-flow: row nowrap; //

-justify-content: flex-start(par defaut) //le justify-content permet de maîtriser mes fils horizontalement ( de gauche a droit ) dans un grand                espace sans wrap//:flex-end //:center // :space-between // : space-around

-align-content:stretch (par defaut)//le align-content permet de maîtriser mes fils verticalement ( de haut en bas ) dans un petit espace avec              wrap// :flex-start // : flex-end // : center // :space-between // : space-around

-align-items:stretch (par defaut)//:flex-start // : flex-end // : center //: baseline 

*coté fils:j'ecrie ces commandes que dans le box fils celui qui est concerné:

-order:<nembre>

-flex-grow: 0 (defaut) //progression ou agrandissement//

-flex-shrink: 1(defaut) // progression ou diminution //

-flex-basis: auto (defaut)

shorthand est = flex:<flex-grow> | <flex-shrink> |<flex-basis> //ex= flex:0 1 auto;//

voila c'est tous, j’espère que c'été clair, instructif et que sa t'as bien aidé a avancé..

Good Luck

Merci !

Bonjour,

Je suis bloqué au même exercice. Au moment d'afficher les paragraphes en justifier. J'ai même utiliser le code que tu proposes sans succès.

Quelqu'un pourrait-il m'aider ?

Bonjour KIM  voici votre solution Vous avez oublier display:flex; ce ca .

AboubakarHissourou a écrit:

Bonjour KIM  voici votre solution Vous avez oublier display:flex; ce ca .

p

{

text-align:justify;

width:80%;

margin:auto;

   display:flex;

}

Desolé, ça ne marche pas!

-
Edité par tblaiila 14 juillet 2017 à 15:14:18

merci bcp chef tu m'as aidé 

-
Edité par ThiernoMohamedKindiDiallo 31 octobre 2017 à 11:04:01

Bonjour je ne comprends rien, pourquoi codex ne m'aide pas à comprendre mon erreur! 

Je n'ai pas assez fait de codes dans ma vie pour comprendre seule! Et encore moins ce que me raconte ce fichu robot...

Voilà ce qu'il me raconte j'ai mis mon CSS en dessous.

Merci mille fois d'avance!

<label style="box-sizing: border-box; display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 600; font-size: 14px; color: #4e4e4e; font-family: 'Open Sans', sans-serif; background-color: #ffffff;" data-reactid=".0.6.1.0.1.0.0.1.0.2.$0.0.1.$1758760.1.0.0">Simulation Output</label>

Traceback (most recent call last): File "codevolve-test-8df58484.py", line 9, in <module> assert(title.value_of_css_property("text-align") == "justify") AssertionError

<label style="box-sizing: border-box; display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 600; font-size: 14px; color: #4e4e4e; font-family: 'Open Sans', sans-serif; background-color: #ffffff;" data-reactid=".0.6.1.0.1.0.0.1.0.2.$0.0.1.$1758760.1.0.2">Test Contents</label>

from selenium import webdriver driver = webdriver.PhantomJS() driver.get('{{localhost}}/index.html') driver.implicitly_wait(1) title = driver.find_element_by_tag_name('p') assert(title.value_of_css_property("text-align") == "justify") assert("307" in title.value_of_css_property("width")) assert("0px 38" in title.value_of_css_property("margin")) driver.close()

Bref pouvez vous m'aider svp???

En CSS (je pense c'est là où ça coince, j'ai mis ça:

#menu

{

list-style: none;

}

#topsection

{

display: flex;

}

.element_topsection

{

width: 500px;

height: 120px;

}

.element_topsection:nth-child(1)

{

flex: 1;

}

.element_topsection:nth-child(2)

{

flex: 2;

}

#paragraphe

{

        display: flex;

        flex-direction: column;

         text-align: justify;

}

.element_paragraphe

{

          width: 80%;

}

.element_paragraphe:nth-child(1)

{

  flex: 1;

      margin: auto;

}

.element_paragraphe:nth-child(2)

{

  flex: 2;

margin: auto;

}  

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 plus facilement.
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

Citation des règles générales du forum :

Avant de poster, demandez-vous si ce que vous allez dire apporte quelque chose au sujet. Si votre message n'apporte rien, vous ferez perdre du temps à tout le monde et le sujet pourrait dévier ou devenir difficile à suivre.

Aussi, vérifiez la date du topic. Le déterrage de topic nuit au bon fonctionnement du forum et est interdit. Utilisez les boutons  pour dire merci. Si le topic date de plus de deux mois sans réponses, mieux vaut ne pas répondre.

Je ferme ce topic.