Partage
  • Partager sur Facebook
  • Partager sur Twitter

Questions MOOC HTML/CSS

    25 mars 2020 à 19:12:43

    Bonjour,

    Comme le disait AbcAbc6, dans la fenêtre HTML de CodePen il ne faut mettre que le contenu de <body>. ;)

    • Partager sur Facebook
    • Partager sur Twitter
      25 mars 2020 à 19:56:13

      Je vous remercie ! Problème résolu !!

      • Partager sur Facebook
      • Partager sur Twitter
        25 mars 2020 à 21:40:37

        Bonsoir.

        Il te suffit de supprimer tout le contenu qu'il y a dans le panneau HTML et d'y écrire ton code, ce n'est pas plus compliqué que ça.

        • Partager sur Facebook
        • Partager sur Twitter

        Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

          26 mars 2020 à 19:53:17

          Pourquoi est-ce que text-align ne fonctionne pas sur les liens ? Je pensais que ca servait a changer l'alignement de tous les éléments inline comme block ?
          • Partager sur Facebook
          • Partager sur Twitter
            Staff 26 mars 2020 à 20:03:52

            @Lens3Durandisse Bonjour, quelle est la largeur d'un élément inline? La largeur de son contenu. Comme serait t'il possible dans ce cas d'indiquer un alignement puisqu'il n'y a pas de place pour aligner cet élément.

            Regarde si en passant tes liens en display: block; (ou inline-block) cela donne ce que tu souhaites. Sinon text-alilgn sur le parent.

            • Partager sur Facebook
            • Partager sur Twitter
              9 avril 2020 à 5:02:51 - Message modéré pour le motif suivant : Message complètement hors sujet


              Etudiant

                9 avril 2020 à 11:20:00

                Salut à tous ! 

                J'ai un petit soucis dans l'exercice "Pratiquez" de la section Mettez en page votre site.

                Mon HTML commence par :

                <!DOCTYPE html>
                <html>
                    <head>
                        <meta charset="utf-8" />
                        <link rel="stylesheet" href="exstyle.css" />
                        <title>Le blog trotter</title>
                    </head>
                
                    <body>
                      <div class="topsection">
                          <nav>
                            <ul id="menu">
                              <a href="#">Accueil</a><br>
                              <a href="#">Archives</a><br>
                              <a href="#">Contact</a><br>
                            </ul>
                          </nav>
                        
                        <header>
                            <h1>Le blog trotter</h1>
                            <p>Je parcours la planète... et vous la fais découvrir !</p>
                          </header>
                
                
                
                      </div>

                Mon CSS : 

                .topsection
                {
                  border:2px black outset;
                  flex-wrap:wrap-reverse;
                }

                Le problème est que la demande de bordure et d'alignement inclus automatiquement la balise <head>, donc le titre. 

                C'est surement évident mais je bloque :o

                -
                Edité par Gaurras 9 avril 2020 à 11:22:33

                • Partager sur Facebook
                • Partager sur Twitter
                  Staff 9 avril 2020 à 12:08:20

                  @Gaurras Bonjour, plusieurs problème :

                  1) votre HTML n'est pas valide, passer le au validateur pour voir vos erreurs => https://validator.w3.org/

                  Pour enlever les puces il ne faut pas enlever la balise <li>, seul la balise <li> est enfant direct des balises <ul> ou <ol>. Pour ce faire utiliser le CSS.

                  2) Pourquoi une propriété du module flexbox alors qu'il n'y a pas de display flex?? 

                  3) que souhaitez vous faire avec une bordure? ce n'est pas ce qui est demandé?

                  • Partager sur Facebook
                  • Partager sur Twitter
                    9 avril 2020 à 14:25:57

                    Bonjour et merci pour votre réponse.

                    1) Le validateur m'indique des erreurs dans l'élément ul lié aux br et a. Sur le br, je vois bien pourquoi il n'y a pas besoin de passer à la ligne dans une liste. Bref, ok pour ce point. 

                    2)Exact, en cherchant à comprendre, je l'ai supprimé et pas remise. Le problème évoqué est cependant présent avec ou sans display.

                    3) J'ai mis une bordure pour chercher à comprendre ce qui changeait en implémentant dans le .topsection. Et comme je le pense, le titre de <head> est encadré alors qu'il ne fait pas partie de <div class=topsection>. 

                    Ici, je cherche à comprendre pourquoi le titre est englobé dans la mise en page que je fais en CSS plus qu'à résoudre l'exercice. 

                    Quand je regarde la solution, j'ai le même problème de titre.

                    Merci ! :)

                    • Partager sur Facebook
                    • Partager sur Twitter
                      Staff 9 avril 2020 à 14:43:26

                      Bonjour,

                      3) Il y a confusion entre les titres de la page, la balise <title> dans le <head> et le titre de la balise <h1> dans le <header>. Le texte des deux titres est le même.

                      En donnant une bordure à .topsection vous donner une bordure à ce conteneur qui comprend la navigation ET le <header> qui lui comprend le titre <h1>. C'est ce dernier que vous voyez dans la page, pas le titre du <head> soit <title>. 

                      • Partager sur Facebook
                      • Partager sur Twitter
                        9 avril 2020 à 14:59:50

                        Bonjour,

                        J'ai une question sur les formulaires

                        A quoi sert l'attribut value dans un formulaire de type radio ?

                        Etant donné qu'il est écrit au début du cours que value sert à pré remplir le champ. 

                        Merci à celui ou ceux qui me repondront

                        • Partager sur Facebook
                        • Partager sur Twitter
                          Staff 9 avril 2020 à 15:23:43

                          @SalimTizi Bonjour, pour un input type radio, l’attribut value sert à donner une valeur que l'on récupère coter serveur, en cas d'absence la chaine 'on' est retournée; Pour tester et vérifier quel bouton a été cliquer/sélectionner il est plus aisé d'avoir la valeur plutôt que "on".   

                          Plus d'info https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/radio

                          • Partager sur Facebook
                          • Partager sur Twitter
                            11 avril 2020 à 0:38:08

                            Merci beaucoup pour votre réponse très claire

                            • Partager sur Facebook
                            • Partager sur Twitter
                              12 avril 2020 à 20:58:09

                              J'ai lu la partie flexbox du cours HTML5/CSS3 et j'ai 3 questions :
                              .
                              1- C'est quoi la différence entre stretch, flex-start et baseline lorsqu'on utilise la proprieté align-items ?
                              .
                              2- Ensuite, je ne comprends pas non plus ce que veut dire Mathieu Nedbra quand il dit que "stretch" sert à s'assurer que les elements s'étirent pour occuper tout l'espace du conteneur lorsqu'on utilise la proprieté align-content. Pourtant quand je l'ai, essayé ca ne semble pas ni s'étirer ni occuper tout l'espace :
                              .
                              .
                              3- Enfin je ne comprends pas comment fonctionne la propriété order. J'ai utilisé ce code pour changer l'ordre des rectangles, mais ça ne fonctionne pas du tout :
                              .
                              Résultat obtenu avec order : 
                              .
                              .
                              Code HTML :
                              .
                              <!DOCTYPE html>
                              <html>
                              <head>
                              	<meta charset="UTF-8" />
                              	<title>Titre page </title>
                              	<link rel="stylesheet" type="text/css" href="test.css">
                              </head>
                              <body>
                                    <div class="conteneur"> 
                                      <div class="element">Element</div>
                                      <div class="element">Element</div>
                                      <div class="element">Element</div>
                                      <div class="element">Element</div>
                                    </div>
                              </html>
                              </body>
                              </html>
                              .
                              Code CSS :
                              .
                              .conteneur{
                              	border:1px solid black;
                              	height: 500px;
                              	display:flex;
                              }
                              
                              .element{
                              	width:100px;
                              	height: 100px;
                              }
                              
                              .element:nth-child(1){
                              	background-color: red;
                              	order:4;
                              }
                              .element:nth-child(2){
                              	background-color: green;
                              	order:1;
                              	
                              }	
                              .element:nth-child(3){
                              	background-color: blue;
                              	order:2;
                              }
                              .element:nth-child(4){
                              	background-color: grey;
                              }
                              

                              -
                              Edité par Lens3Durandisse 12 avril 2020 à 21:00:54

                              • Partager sur Facebook
                              • Partager sur Twitter
                                Staff 12 avril 2020 à 22:35:15

                                @Lens3Durandisse Bonsoir,

                                1) je pense que la documentation vous éclairera https://developer.mozilla.org/fr/docs/Web/CSS/align-items 

                                Si ce n'est pas le cas que ne comprenez vous pas?

                                2) Un petit exemple

                                HTML

                                        <div class="conteneur">
                                            <div class="box b1"></div>
                                            <div class="box b2 stretch"></div>
                                            <div class="box b3"></div>
                                        </div>

                                CSS

                                .conteneur {
                                                display: flex;
                                                /*align-content: stretch;*/ 
                                                
                                                min-height: 400px;
                                                border: 1px seagreen solid; 
                                            }
                                            .box {
                                                width: 200px;
                                                height: 200px;
                                                margin: 10px;
                                            }
                                            .b1 {
                                                background: red;
                                            }
                                            .b2 {
                                                background: blue;
                                               
                                            }
                                            .b3 {
                                                background: green;
                                            }
                                            
                                            .stretch {
                                                align-self: stretch;
                                                height: auto;
                                            }

                                Ici je fixe la hauteur du conteneur pour avoir de la place, les flex-item ont une largeur et hauteur fixe sauf le bleu qui lui prend la hauteur disponible car il est stretch (j'ai du également mettre la hauteur a auto pour annuler la propriété définie plus haut), il s'étand donc sur la hauteur de son parent.

                                3) encore une fois la doc https://developer.mozilla.org/fr/docs/Web/CSS/order nous dit que "Les éléments sont appliqués dans l'ordre croissant des valeurs de order."  La valeur initial étant zéro c'est comme si tu avais indiqué un order : 0; à ton 4ième élément le gris.  Le premier le rouge est en 4ièm position. Le deuxième le vert est en 2ième position car il ce place après les block de ordre zéro (l'ordre 1 vient après l'ordre 0). Le troisième est d'ordre 2, il vient donc ce placer après les éléments d'ordre 1 et après les éléments d'ordre 0, donc 3iem position.

                                Est-ce plus clair?

                                D'autre ressource 

                                -
                                Edité par AbcAbc6 12 avril 2020 à 22:45:05

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  13 avril 2020 à 5:42:55

                                  AbcAbc6 a écrit:

                                  @Lens3Durandisse Bonsoir,

                                  1) je pense que la documentation vous éclairera https://developer.mozilla.org/fr/docs/Web/CSS/align-items 

                                  Si ce n'est pas le cas que ne comprenez vous pas?

                                  2) Un petit exemple

                                  HTML

                                          <div class="conteneur">
                                              <div class="box b1"></div>
                                              <div class="box b2 stretch"></div>
                                              <div class="box b3"></div>
                                          </div>

                                  CSS

                                  .conteneur {
                                                  display: flex;
                                                  /*align-content: stretch;*/ 
                                                  
                                                  min-height: 400px;
                                                  border: 1px seagreen solid; 
                                              }
                                              .box {
                                                  width: 200px;
                                                  height: 200px;
                                                  margin: 10px;
                                              }
                                              .b1 {
                                                  background: red;
                                              }
                                              .b2 {
                                                  background: blue;
                                                 
                                              }
                                              .b3 {
                                                  background: green;
                                              }
                                              
                                              .stretch {
                                                  align-self: stretch;
                                                  height: auto;
                                              }

                                  Ici je fixe la hauteur du conteneur pour avoir de la place, les flex-item ont une largeur et hauteur fixe sauf le bleu qui lui prend la hauteur disponible car il est stretch (j'ai du également mettre la hauteur a auto pour annuler la propriété définie plus haut), il s'étand donc sur la hauteur de son parent.

                                  3) encore une fois la doc https://developer.mozilla.org/fr/docs/Web/CSS/order nous dit que "Les éléments sont appliqués dans l'ordre croissant des valeurs de order."  La valeur initial étant zéro c'est comme si tu avais indiqué un order : 0; à ton 4ième élément le gris.  Le premier le rouge est en 4ièm position. Le deuxième le vert est en 2ième position car il ce place après les block de ordre zéro (l'ordre 1 vient après l'ordre 0). Le troisième est d'ordre 2, il vient donc ce placer après les éléments d'ordre 1 et après les éléments d'ordre 0, donc 3iem position.

                                  Est-ce plus clair?

                                  D'autre ressource 

                                  -
                                  Edité par AbcAbc6 il y a environ 6 heures


                                  J'ai compris pour ma 3e question, merci !

                                  Pour la 2e, si je comprends bien en mettant "stretch" et height:auto, on permet au bloc de prendre toute la hauteur dispo ? Mais en appliquant votre code, les blocs semblent tous occuper la même hauteur c'est normal ?

                                  Quant à la 1re, je vais regarder plus tard !

                                  -
                                  Edité par Lens3Durandisse 13 avril 2020 à 5:55:57

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    Staff 13 avril 2020 à 7:34:14

                                    >> les blocs semblent tous occuper la même hauteur c'est normal ?

                                    non ce n'est pas normal! Vous ne tester pas avec IE?

                                    Voici le rendu que j'ai avec chrome et Firefox : 

                                    Édit : je viens de m'apercevoir que mon exemple n'est pas bon car la hauteur prend le pas sur les autres propriété. Je recherche un exemple de stretch pour vous montrer .....

                                     Édit 2 :

                                    Voici un exemple https://www.alsacreations.com/xmedia/tuto/exemples/flexbox/flextest05.html

                                     Je corrige mon exemple en retirant les hauteurs et avec du contenu c'est mieux.

                                    (ce que j'avais louper c'est de préciser un flex-start sur le conteneur)

                                            <div class="conteneur">
                                                <div class="box b1">
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, nesciunt velit soluta odit aperiam debitis ratione optio id vel. Sit, expedita dicta corporis accusamus quibusdam dignissimos quos eligendi id illum.</p>
                                                </div>
                                                <div class="box b2 stretch">
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, nesciunt velit soluta odit aperiam debitis ratione optio id vel. Sit, expedita dicta corporis accusamus quibusdam dignissimos quos eligendi id illum.</p>
                                                </div>
                                    
                                                <div class="box b3">
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, nesciunt velit soluta odit aperiam debitis ratione optio id vel. Sit, expedita dicta corporis accusamus quibusdam dignissimos quos eligendi id illum.</p>
                                                </div>
                                            </div>

                                    CSS

                                     .conteneur {
                                                    display: flex;
                                                    min-height: 400px;
                                                    border: 1px seagreen solid;
                                                    align-items: flex-start;
                                                }
                                                .box {
                                                    margin: 10px;
                                                }
                                                .b1 {
                                                    background: red;
                                                }
                                                .b2 {
                                                    background: blue;
                                    
                                                }
                                                .b3 {
                                                    background: green;
                                                }
                                    
                                                .stretch {
                                                    align-self: stretch;
                                                }

                                    Rendu :




                                    -
                                    Edité par AbcAbc6 13 avril 2020 à 8:01:22

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      14 avril 2020 à 15:32:25

                                      Malheureusement cela ne fonctionne toujours pas, mais ce n'est pas trop grave j'ai compris le principe de toute façon : stretch permet aux elements d'occuper tout l'espace disponible ! 

                                      Si j'utilise cette propriété dans un code plus tard et que cela me pose problème, je reviendrai vous voir !

                                      Merci !

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        18 avril 2020 à 14:27:40 - Message modéré pour le motif suivant : Aucune formule de politesse de base


                                          30 avril 2020 à 14:14:24 - Message modéré pour le motif suivant : Message complètement hors sujet


                                            4 mai 2020 à 0:50:50 - Message modéré pour le motif suivant : Message complètement hors sujet


                                              9 mai 2020 à 3:26:59

                                              bonjour je veux diminuer la taille de mon image pour bien le presenter dans mon site en utilisant la balise <img src="img/photos_mini.jpg" alt="photos" /> Sa ne prends pas svp que puisse faire???

                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                11 mai 2020 à 0:26:52

                                                Bonjour,

                                                Il me semble que dans la partie de "Pratiquez 3" il y a un erreur dans les questions:

                                                "Une balise sémantique  <nav> manque, ajoutez-la au bon endroit" ; - pourtant la balise et bien la et dans un bon endroit ce qui mène a la confusion.

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  Staff 11 mai 2020 à 1:04:31

                                                  @Marta Bogumiła Nowak     Bonjour, Oui vous avez raison dans le codepen la balise <nav> est bien présente. 

                                                  En fait tous les exercices des cours ont été  modifiés pour utiliser actuellement codepen, avant c'était un autre service avec lequel on réalisait  les exercices et le code correspondait bien aux questions . La personne qui à fait les modifications n'a pas respecter les consignes données dans cet exercices.

                                                  Vous pouvez signaler cette erreur à openclassrooms via hello@openclassrooms.com

                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    11 mai 2020 à 9:08:59 - Message modéré pour le motif suivant : Merci d'utiliser le bouton code du forum pour insérer votre code


                                                      13 mai 2020 à 16:10:02

                                                      j'arrive pas continuer mon cours aprés déja fait le premier tp ( travaux pratique)
                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        14 mai 2020 à 12:16:33 - Message modéré pour le motif suivant : Message complètement hors sujet


                                                          15 mai 2020 à 16:59:29 - Message modéré pour le motif suivant : Merci de contacter directement OpenClassrooms : hello@openclassrooms.com


                                                          Questions MOOC HTML/CSS

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