Partage
  • Partager sur Facebook
  • Partager sur Twitter

Questions MOOC HTML/CSS

    27 août 2019 à 15:52:47

    Je ne comprends pas pourquoi quand je compresse en zip mes photos ne passent pas.

    Voici des screenshots de mon "cv" sans la compression et avec la compression zip.sans la compression zipavec la compression zip

    • Partager sur Facebook
    • Partager sur Twitter
      Staff 27 août 2019 à 17:17:17

      @LongTran2 Bonjour, car vous et vos correcteurs devriez dézipper tous les fichiers pour voir le travail. Il est normal que le fichier HTML ne soit plus lier aux images si uniquement celui-ci est sorti de l'archive .zip.

      Le format d'archive .zip est fait pour transporter des fichiers, un peu comme un camion de déménagement pour votre maison/appartement....

      -
      Edité par AbcAbc6 27 août 2019 à 17:18:28

      • Partager sur Facebook
      • Partager sur Twitter
        28 août 2019 à 1:14:08

        Mewen_bzh a écrit:

        Bonjour,

        Effectivement il y a une erreur dans ton travail.

        La consigne est "Ajoutez une liste ordonnée d'au moins trois de vos animaux préférés".

        Je te renvoie au cours, et surtout ce paragraphe : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1604534-organisez-votre-texte#/id/r-1604533, pour la différence entre les listes ordonnées et les listes non-ordonnées. ;)



        • Partager sur Facebook
        • Partager sur Twitter
          30 août 2019 à 3:58:12

          Merci beaucoup Mewen_bzh!

          Problème résolu :-) 

          • Partager sur Facebook
          • Partager sur Twitter
            31 août 2019 à 17:12:39

            bonsoir j'ai un soucis je n'arrive pas a telecharger un une police sur fontsquirrel
            • Partager sur Facebook
            • Partager sur Twitter
              3 septembre 2019 à 18:44:53

              Lucky13: C'est un des sujets du chapitre Formater du texte ( https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605329-formatez-du-texte) du mooc html 5 et css3, je ne comprends pas pourquoi tu penses que cette question n'a pas sa place dans le thread du mooc? Et pour ma culture personnel, c'est quoi: l'OP? Merci.
              • Partager sur Facebook
              • Partager sur Twitter
                8 septembre 2019 à 14:53:45

                Bonjour, je viens de terminer ce mooc html/css dans le but de faire une landing page.

                Je suis bloqué car je n'arrive pas a faire en sorte que l'image de fond fasse la hauteur de l'écran la largeur et s'adapte proportionnellement selon le support. 

                Je voudrais que cela s'ajuste selon mon schéma ci-dessous en gros.

                Sans slide possible en version desktop.

                J'utilise une image recadrée pour la version mobile et même avec ça, ça beug selon les différents types de mobiles...

                Merci, d'avance ;-)

                 

                • Partager sur Facebook
                • Partager sur Twitter
                  8 septembre 2019 à 19:03:33

                  As tu bien utilisé tous les préfixes?
                  • Partager sur Facebook
                  • Partager sur Twitter
                    8 septembre 2019 à 20:24:57

                    @ ThierryGonthier:

                    Pour commencer l’utilisation de fontsquirrel n’as pas sa place ici, et en plus sujet dédier à la situation de CamileKapgangHonang dans le forum html/css sera bien plus efficace pour résoudre son problème. La résolution de son problème va demander plusieurs post. Et je rajoute que poser cette question démontre quand même un sérieux manque de recherche de sa part, vu le nombre de fois ou cette question a été posé sur le forum.

                    En ce qui concerne ton dernier post, pourquoi parler des préfixes ? Au passage je me permets de te signaler que leurs utilisations sont fortement déconseillées.

                     @Chubachubs

                    Et pour la partie mobile peut-être devrais tu regarder coté:

                    background-size: cover;

                    width : 100% ;

                    height : auto ;

                    • Partager sur Facebook
                    • Partager sur Twitter

                    Compos sui.

                      10 septembre 2019 à 12:29:45

                      Bonjour, merci pour ta réponse. J'ai déjà essayé ces fonctions css mais ça ne fonctionne pas. Quand j'inspecte les éléments sur toute la liste de smartphone, il y a toujours 2 ou 3 cas ou cela ne fonctionne pas.

                      L'image se centre mal, le H1 se retrouve a gauche et sur les iphones les proportions sont différentes donc c'est compliqués.  

                      • Partager sur Facebook
                      • Partager sur Twitter
                        10 septembre 2019 à 17:14:34

                        exen a écrit:

                        @ ThierryGonthier:

                        En ce qui concerne ton dernier post, pourquoi parler des préfixes ? Au passage je me permets de te signaler que leurs utilisations sont fortement déconseillées.

                        Ah? Je te crois sur parole, mais alors comment est assuré la compatibilité de certaines règles css qui , d'après le cours , ne sont reconnu par les différents navigateurs que par leur préfixes?

                        • Partager sur Facebook
                        • Partager sur Twitter
                          10 septembre 2019 à 19:36:54

                          @Chubachubs

                          Ce que je te conseillerais dans ce cas c'est de venir créer ton propre post dans le forum général HTML/CSS. et de nous coller le HTML et le CSS.

                          Et on pourras voir plus profondément ce qui cloche.

                          @ThierryGonthier

                          Avec:

                          https://caniuse.com/

                          Ca te permet de savoir si on dois encore ou non utiliser des préfixes ou pas.

                          il n'y a que deux navigateur qui poseent réellement problème.

                          IE et opéra-mini

                          Mais en plus dans le cas présent, sans même voir le code, proposer l'utilisation de préfixes, relève des arts-divinatoires.

                          • Partager sur Facebook
                          • Partager sur Twitter

                          Compos sui.

                            10 septembre 2019 à 20:18:30

                            exen a écrit:


                            @ThierryGonthier

                            [...]

                            Mais en plus dans le cas présent, sans même voir le code, proposer l'utilisation de préfixes, relève des arts-divinatoires.

                            Ou alors d'une expérience, avec l'exact même problème d'affichage sur mobile, qui à été réglé (pourquoi/comment?) en intégrant prefix-free. Ce qui ne fait pas de ce cas d'espèce la solution à tout, mais on peut toujours proposer pour voir. Je m'étais dis qu'il n'était pas nécessaire de raconter ma journée avant de proposer ma "solution" aussi magique soit elle. Merci pour tes réponses.

                            • Partager sur Facebook
                            • Partager sur Twitter
                              10 septembre 2019 à 21:45:29

                              Expérience ?
                              Donc dans ta boite on conseil l'utilisation d'un script JS pour inclure un préfixe quand un background ne se cale pas bien sur mobile ?
                              De même, que dans votre groupe de dev-Front, vous utilisez des pratiques de plus en plus déconseillées dans certains milieux.
                              Et toujours dans votre groupe de dev-Front,  quand un problème arrive, sans même savoir sur quel navigateur, ou sans même savoir la teneur exacte du code, vous dites "prefixes" ?
                              Alors que ça peut être une mauvaise écriture du code, la meta viewport inexistante, et j'en passe.
                              Au passage une solution, ça solutionne. Si jamais je dit: "Tiens voici une solution" c'est que je sais à 99,9% que ce que je dit va résoudre le problème.
                              Et je ne vois absolument pas le rapport avec ta journée.
                              • Partager sur Facebook
                              • Partager sur Twitter

                              Compos sui.

                                15 septembre 2019 à 9:22:44

                                Bonjour,

                                Je ne sais pas si je poste au bon endroit, je me suis fié au titre MOOC HTML/CSS.

                                Je suis actuellement la formation "Apprenez à créer votre site avec HTML5 et CSS3".

                                Je suis en attente d'un dernier correcteur pour l'exercice 2 sur le CV modifié avec du CSS avec la police personnalisée avec @font-face...

                                L'un de vous accepterait-il de corriger quelques exercices en attente de correction ? merci beaucoup :)

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  15 septembre 2019 à 18:13:21

                                  Bonjour,

                                  désolé mais pour ce qui est de la correction il faut attendre que d'autres élèves ai finit le leurs pour corriger le tiens.

                                  Sur le forum nous somment des bénévoles qui partageons nos connaissances.

                                  nous ne faisons pas partis de l'entreprise Openclassrooms, il en va de même pour le staff.

                                  Mais tu peut toujours faire ta demande en écrivant un mail à

                                  hello@openclassrooms.com

                                  • Partager sur Facebook
                                  • Partager sur Twitter

                                  Compos sui.

                                    15 septembre 2019 à 18:42:11

                                    Bonjour @exen,

                                    Merci pour ta réponse.

                                    Bonne continuation et bonne fin de journée :)

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      21 septembre 2019 à 21:34:42 - Message modéré pour le motif suivant : Toute forme de publicité est interdite


                                        23 septembre 2019 à 18:44:39

                                        salut tous je suis nouveau 

                                        j'espère faire mes preuves dans ce domaine 

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          24 septembre 2019 à 6:52:49

                                          @ AmadouConde1

                                          Bienvenue et bon courage.

                                          • Partager sur Facebook
                                          • Partager sur Twitter

                                          Compos sui.

                                            1 octobre 2019 à 21:06:10

                                            J’ai un problem J’arrive pas à combiner html dans le css
                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              2 octobre 2019 à 20:27:46

                                              j'imagine que tu parles du css dans le html ?

                                              2 cas de figure:

                                              - tu as 2 fichiers (1 .html et 1 .css) dans ce cas dans la partie "head" de ton document html il te suffit d'ajouter la balise suivante:

                                              <link href=".css" type="text/css" rel="stylesheet"> en oubliant pas d'ajouter le nom de ton fichier css.

                                              par exemple :

                                              <link href="monFichierCss.css" type="text/css" rel="stylesheet">

                                              - autrement tu peux inclure le code css directement dans ton HTML mais cette deuxième méthode est à proscrire.

                                              -
                                              Edité par WilfriedJeambel 2 octobre 2019 à 20:30:09

                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                5 octobre 2019 à 16:50:55

                                                Bonjour à tous,

                                                Moi aussi je ne sais pas si je post au bon endroit. Je suis actuellement la formation "Apprenez à créer votre site web avec HTML5 et CSS3". Je me trouve dans la partie 3 : mettez en page votre site, au chapitre 4 : pratiquez !

                                                Je bloque sur les 2 dernières questions de la sandbox que voici :

                                                Je vous montre mon résultat :

                                                Pouvez m'indiquer ce qu'il manque svp ? J'ai l'impression de répondre à ce qu'il est demandé mais apparemment je me trompe encore.

                                                Merci d'avance pour vos réponses.

                                                -
                                                Edité par ChristopheBerthanier 5 octobre 2019 à 20:55:08

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  6 octobre 2019 à 10:09:53

                                                  Il faudrait afficher le code, s'il te plait. Je te cache pas que la correction automatiquede la sandbox est parfois casse pied.
                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    6 octobre 2019 à 11:16:55

                                                    <!DOCTYPE html>
                                                    <html>
                                                        <head>
                                                            <meta charset="utf-8" />
                                                            <link rel="stylesheet" href="style.css" />
                                                            <title>Le blog trotter</title>
                                                        </head>
                                                    
                                                        <body>
                                                          <div id="conteneur">
                                                            <header>
                                                              <div id="topsection">
                                                                <h1>Le blog trotter</h1>
                                                                <p>Je parcours la planète... et vous la fais découvrir !</p>
                                                              </div>  
                                                            </header>
                                                            <nav>
                                                              <div id="navigation">
                                                                <ul id="menu">
                                                                  <li><a href="#">Accueil</a></li>
                                                                  <li><a href="#">Archives</a></li>
                                                                  <li><a href="#">Contact</a></li>
                                                                </ul>
                                                              </div>  
                                                            </nav>
                                                          </div>
                                                    
                                                          <h1>La Chine</h1>
                                                          <p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
                                                    
                                                          <p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
                                                          
                                                          <h1>L'Espagne</h1>
                                                          <p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
                                                    
                                                          <p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
                                                            
                                                          <footer>
                                                            <p>Copyright Le Blog Trotter</p>
                                                          </footer>
                                                            
                                                        </body>
                                                    </html>

                                                    /* Feuille de style */
                                                    ul
                                                    {
                                                      list-style: none;
                                                    }
                                                    
                                                    #conteneur
                                                    {
                                                      display: flex;
                                                      flex-direction: row-reverse;
                                                      justify-content: flex-end;
                                                    }
                                                    
                                                    #topsection
                                                    {
                                                      /*border: 4px black solid;*/
                                                      margin-left: 50px;
                                                    }
                                                    
                                                    #navigation
                                                    {
                                                      /*border: 4px black solid;*/
                                                    }
                                                    
                                                    p
                                                    {
                                                     width: 80%;
                                                     margin: auto; 
                                                     text-align: justify;
                                                    }
                                                    
                                                    
                                                    Voilà le HTML et le CSS.
                                                    J'ai utilisé l'onglet "Code", j'espère que ça va.
                                                    Merci
                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                      6 octobre 2019 à 15:54:57

                                                      Pour le header et le nav essaies ça:

                                                      #conteneur
                                                      {
                                                        display: flex;
                                                        flex-direction: row;
                                                        justify-content: flex-start;
                                                      }

                                                      Sûrement que les blocs sont pas dans le sens attendu par le correcteur auto, du coup il te casse les pieds.

                                                      Pour les paragraphes, mets les dans une div et align-items en center par flex box. Je pense que c'est ce qu'il attend. L’énoncé parle de "centrer les blocs". Le résultat visuel que tu obtiens est juste, mais c'est pas la bonne technique (sans parler de l'ordre des blocs). Amuse toi bien.

                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        6 octobre 2019 à 19:46:13

                                                        Encore merci pour ton aide

                                                        Effectivement tu avais raison, c'est bien l'ordre entre le header et le nav qui n'était pas bon. Là, c'est validé.

                                                        Par contre pour les paragraphes, j'ai suivi tes conseils. Visuellement, j'arrive au même résultat à un détail prêt mes h1 sont centrés aussi mais là c'est toujours un échec. C'est à désespérer

                                                        <!DOCTYPE html>
                                                        <html>
                                                            <head>
                                                                <meta charset="utf-8" />
                                                                <link rel="stylesheet" href="style.css" />
                                                                <title>Le blog trotter</title>
                                                            </head>
                                                        
                                                            <body>
                                                              <div id="conteneur">
                                                                <header>
                                                                  <div id="topsection">
                                                                    <h1>Le blog trotter</h1>
                                                                    <p>Je parcours la planète... et vous la fais découvrir !</p>
                                                                  </div>  
                                                                </header>
                                                                <nav>
                                                                  <div id="navigation">
                                                                    <ul id="menu">
                                                                      <li><a href="#">Accueil</a></li>
                                                                      <li><a href="#">Archives</a></li>
                                                                      <li><a href="#">Contact</a></li>
                                                                    </ul>
                                                                  </div>  
                                                                </nav>
                                                              </div>
                                                        
                                                              <div id="conteneur2">  
                                                              <h1>La Chine</h1>
                                                              <p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
                                                        
                                                              <p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
                                                              
                                                              <h1>L'Espagne</h1>
                                                              <p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
                                                        
                                                              <p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
                                                              </div> 
                                                          
                                                              <footer>
                                                                <p>Copyright Le Blog Trotter</p>
                                                              </footer>
                                                                
                                                            </body>
                                                        </html>
                                                        /* Feuille de style */
                                                        ul
                                                        {
                                                          list-style: none;
                                                        }
                                                        
                                                        #conteneur
                                                        {
                                                          display: flex;
                                                          flex-direction: row;
                                                          justify-content: flex-start;
                                                        }
                                                        
                                                        #topsection
                                                        {
                                                          /*border: 4px black solid;*/
                                                          margin-left: 50px;
                                                        }
                                                        
                                                        #navigation
                                                        {
                                                          /*border: 4px black solid;*/
                                                        }
                                                        
                                                        p
                                                        {
                                                         /*width: 80%;
                                                         margin: auto; 
                                                         text-align: justify;*/
                                                        }
                                                        
                                                        #conteneur2
                                                        {
                                                          display: flex;
                                                          flex-direction: column;  
                                                          justify-content: center;
                                                          align-items: center;
                                                          width: 80%;
                                                          margin: 10%; 
                                                          text-align: justify;
                                                          }




                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                          7 octobre 2019 à 8:53:36

                                                          p
                                                          {
                                                           /*width: 80%;
                                                           margin: auto; 
                                                           text-align: justify;*/
                                                          }

                                                          Visiblement les propriétés CSS de tes paragraphes sont commentées. Par conséquent elles ne s'appliquent pas et l'exercice ne peut être validé.
                                                          • Partager sur Facebook
                                                          • Partager sur Twitter

                                                          Questions MOOC HTML/CSS

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