Partage
  • Partager sur Facebook
  • Partager sur Twitter

Questions MOOC HTML/CSS

    14 janvier 2018 à 11:28:32

    Bonjour (@Aladinet),

    Voici un extrait de la page relative à font-size (developper Mozilla.org) qui explique le fonctionnement de "em" :

    On peut également définir la taille de la fonte en em. La taille d'une valeur exprimée en em est dynamique. Lorsqu'on définit la propriété font-size, un em est équivalent à la taille de fonte appliquée à l'élément parent de l'élément courant. Si cette taille n'a pas été définie pour l'élément parent, elle correspondra à la taille par défaut du navigateur (généralement 16px). Ainsi, si on définit font-size avec une valeur de 20px sur l'élément body, 1em correspondra à 20px et 2em à 40px. Ici, la valeur 2 est un facteur multiplicateur de la taille.

    Je ne saurais pas donner de meilleure explication et espère que cela répond à votre question.

    • Partager sur Facebook
    • Partager sur Twitter
      20 janvier 2018 à 17:53:01

      Bonsoir à tous ! 

      Je viens de reprendre mon cours sur HTML5 et CSS aprés plusieurs semaine d'inactivités..

      je dois faire un exercice et je ne trouve plus l'utilisation de la balise <nav> ! 

      si quelqu'un pourrait m'aidé pour ce problème.. 

      Merci bien ! :) 

      • Partager sur Facebook
      • Partager sur Twitter
        20 janvier 2018 à 18:16:26

        Bonsoir PriamZzc91,

        Pour les balises sémantiques y compris la balise <nav> c'est cette page là :

        https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/structurer-sa-page

        • Partager sur Facebook
        • Partager sur Twitter
          20 janvier 2018 à 18:45:20

          Super j'avais trouvé en fin de compte aha ! 

          Merci beaucoup quand même ! :)

          • Partager sur Facebook
          • Partager sur Twitter
            21 janvier 2018 à 16:09:18

            Salut!! j'aimerais savoir comment est-ce que l'on centre une image lors de la création d'une page web
            • Partager sur Facebook
            • Partager sur Twitter
              22 janvier 2018 à 23:26:19

              cet exemple ne fonctionne pas !! quelqu'un m'explique svp, ou est le probléme ?

              -
              Edité par ollorc 22 janvier 2018 à 23:29:35

              • Partager sur Facebook
              • Partager sur Twitter
                22 janvier 2018 à 23:46:19

                Hello,

                Sous Chrome faites Ctrl + Maj + i , ou menu -> plus d'outils -> outils de développement pour ouvrir la console web du navigateur (onglet console)

                J'ai fait un test, on dirait que le serveur ne renvois pas cette font, essayez avec une autre.

                test -> https://jsfiddle.net/hpkpnfj3/ 

                Soit réessayer plus tard, sois cette font n'existe plus (404) ou le serveur rencontre un problème...

                -
                Edité par Lucky13 22 janvier 2018 à 23:49:25

                • Partager sur Facebook
                • Partager sur Twitter
                  23 janvier 2018 à 9:33:05

                  Ahmad bz : cet exemple ne fonctionne pas !! quelqu'un m'explique svp, ou est le probléme ?

                  Tu as le même problème que 99.99% des gens qui posent cette question sur ce forum : le chemin d'accès à tes fichiers fonts ne sont pas corrects. Ton code dit au navigateur d'aller chercher tes fichiers dans le même dossier que celui où se trouve ton fichier CSS alors qu'ils sont en fait dans le dossier fonts.

                  Il te suffit de corriger tes chemins d'accès, c'est quelque chose de très basique donc je te renvoie au tout début du cours sur le HTML et notamment à ce schéma : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/creer-des-liens#/id/r-1609672

                  Autre point à corriger : tu fais appel à des fichiers au format .eot, .woff, .ttf et .svg mais il n'y a qu'un fichier .ttf dans ton dossier donc tu vas avoir plusieurs ressources en erreur 404.

                  • Partager sur Facebook
                  • Partager sur Twitter
                  Je ne réponds pas aux messages privés.
                    23 janvier 2018 à 18:46:26

                    • Bonsoir ! j'ai un petit problème pour bien positionné mes titre h2 (Mes compétences, Ma formation ect..) j'aimerais positionné mes titre H2 au dessus de mes liste à puces et je n'arrive pas à trouvé la balise correspondante... :( Merci de votre aide si vous trouvez ! 
                    • Partager sur Facebook
                    • Partager sur Twitter
                      23 janvier 2018 à 19:09:43

                      PriamZzc91 a écrit:

                      • Bonsoir ! j'ai un petit problème pour bien positionné mes titre h2 (Mes compétences, Ma formation ect..) j'aimerais positionné mes titre H2 au dessus de mes liste à puces et je n'arrive pas à trouvé la balise correspondante... :( Merci de votre aide si vous trouvez ! 

                      Est ce que tu peux nous copier le code ? 

                      Si tu tu met le titre h2 et la liste dans un block <div> ça devrais afficher les titres h2 au dessus .

                      • Partager sur Facebook
                      • Partager sur Twitter
                      Oser Apprendre & Partager !
                        24 janvier 2018 à 13:22:31

                        <!DOCTYPE html>
                        <html>
                              <head>
                        <meta charset="utf-8"/>
                        <link rel="stylesheet" type="text/css" href="style.css"/>
                        <title>CV Zakoss</title>
                        </head>
                        <body>
                        <header>
                        <h1>Zakoss</h1>
                        <h3>Pro Gameur et fondateur de la team OSS</h3>
                        </header>
                        <div>
                        <h2>Mon expérience</h2>
                        <ul>
                        <li>De 2000 à 2005 évolution de style de jeu sur Gamecube</li>
                        <li>De 2005 à 2010 évolution sur la plateforme Playstation 3</li>
                        <li>De 2010 à aujourd'hui perfectionnement sur les différents FPS PC ou console du style PUBG, Fortnite</li>
                        </ul>
                        <h2>Mes compétences</h2>
                        <ul>
                        <li>SHOOT extraordinaire</li>
                        <li>Bon déplacement en map close</li>
                        <li>Bonne expression</li>
                        </ul>
                        <h2>Ma formation</h2>
                        <ul>
                        <li>Formater par l'entreprise SONY</li>
                        <li>J'ai tout appris avec des ordinateurs.</li>
                        </ul>
                        </div>
                        </body>
                        VOICI LE CODE HTML ! 
                        • Partager sur Facebook
                        • Partager sur Twitter
                          24 janvier 2018 à 13:42:43

                          bonjour,

                          Enfin, sans le css ca ne sert pas à grand chose, en plus tu vois au dessus de la barre ou tu écrit tu as ce bouton </> il sert à poser ton code tu choisit css dans la liste déroulante et tu y colle ton texte css.

                          • Partager sur Facebook
                          • Partager sur Twitter

                          Compos sui.

                            24 janvier 2018 à 14:09:22

                            Bonsoir j'ai un petit probleme, j'ai creé un jeu sur processing et je n'arrive pas a le faire affiché sur une page html, j'ai telecharger processing.js mon dossier est composé du code html, de processing.js et du fichier du jeu processing , mais impossible a le faire fonctionné sur la page, voici mon code :

                            <!DOCTYPE html>

                            <html>
                            <head> <meta charset = "UTF-8">
                            <script src="processing.js"></script>
                            <title>Jeu</title>
                            </head>
                            <body>
                            <canvas data-processing-sources="C:\Users\dell\Desktop\html\Projet"></canvas>
                            </body>
                            </html>
                            • Partager sur Facebook
                            • Partager sur Twitter
                              24 janvier 2018 à 14:26:31

                              j'ai mon code CSS maintenant mon problème est de centré ma liste à puces : les petits points ! 

                              je vous met ci-dessous le résultat final que je dois avoir ! :) 

                              Il faut que je mette côte à côte les les titres h2 donc : Mes compétences ect.. et que je fasse de même pour les liste à puces !

                              puis pour le liseré sur la gauche de la page je ne sais pas comment faire non plus.. je cherche mais bon je ne trouve pas ou plus.. :( 

                              • Partager sur Facebook
                              • Partager sur Twitter
                                24 janvier 2018 à 17:00:25

                                Et moi temps que je ne vois pas le code css, je ne peut rien pour toi, et pour faire simple tout ce joue dans le CSS le html et une bonne lecture du cours.

                                Vois les comme des ensembles encerclés par des <div> dans un premier temps.

                                -
                                Edité par exen 24 janvier 2018 à 17:03:27

                                • Partager sur Facebook
                                • Partager sur Twitter

                                Compos sui.

                                  24 janvier 2018 à 19:16:23

                                  Bonjour, excusez moi comment on peut procéder pour acheter des cours vidéo

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    24 janvier 2018 à 19:22:04

                                    Bonjour, c'est à dire ?
                                    • Partager sur Facebook
                                    • Partager sur Twitter

                                    Compos sui.

                                      25 janvier 2018 à 1:19:24

                                      Bonjour, question de débutante : comment créer une nouvelle page dans le même fichier sur Sublime Texte ? Merci d'avance...
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        25 janvier 2018 à 9:13:33

                                        SolennSolen : Bonjour, question de débutante : comment créer une nouvelle page dans le même fichier sur Sublime Texte ? Merci d'avance...

                                        Bonjour,

                                        La réponse est simple : tu ne peux pas. Une page = un fichier, que ce soit avec Sublime Text ou tout autre logiciel.

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                        Je ne réponds pas aux messages privés.
                                          25 janvier 2018 à 10:31:38

                                          Merci Mewen_bzh! Effectivement en allant un peu plus loin dans le cours, je m'en suis rendu compte... merci encore ;-)
                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            25 janvier 2018 à 13:41:15

                                            Merci Exen ! tu m'aide beaucoup ! si tu veut je peut mettre mon CSS pour que tu puisse me dire les erreurs que j'ai faites ! :) 

                                            Merci en tout cas !

                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              25 janvier 2018 à 18:26:08

                                              Si tu veut mais pose carrément un message dans le forum html
                                              • Partager sur Facebook
                                              • Partager sur Twitter

                                              Compos sui.

                                              Anonyme
                                                27 janvier 2018 à 16:23:47

                                                Bonjour,

                                                je suis dans la Semaine 4 du cours HTML5/CSS3 où il faut adapter le CV pour une version mobile mais je n'arrive pas à enlever le liseret. J'ai tout essayé ( display: none  / visibility:hidden / changer les marges, hauteur, width,...), elle reste fixe malgré la media query.

                                                Je ne comprends plus rien

                                                voici mon html:

                                                !DOCTYPE html>
                                                <html><head>
                                                <meta http-equiv="content-type" content="text/html; charset=utf-8">
                                                        <meta charset="utf-8">
                                                        <link rel="stylesheet" href="Moncv_files/style.css">
                                                        <title>Moncv </title>
                                                    </head>   
                                                   
                                                    <body><div id="liseret"></div>
                                                   
                                                   
                                                    <header>
                                                    <p><a href="images/photo.jpg"><img src="Moncv_files/photo_mini.jpg" alt="ma_photo" title="Cliquez pour agrandir"></a></p>
                                                        <h1> Loic Campagni</h1>

                                                           <p> En reconversion professionnelle</p>
                                                             </header>
                                                           
                                                            <section>
                                                             <h2>Mon expérience</h2>

                                                             <p>aucune expérience dans le web en dehors de <em><strong>"surfer dessus"</strong></em> comme tout le monde.</p>
                                                             </section>
                                                             
                                                             <section>
                                                                 <h2>Mes compétences</h2>

                                                               <p>
                                                                 <ul>
                                                                     <li>Comprendre le web</li><a href="fichier.zip/certificat-comprendre-le-web">certificat</a>
                                                                     <li>HTML5/CSS3 en cours</li>
                                                                 </ul>
                                                                </p>
                                                                 </section>
                                                                 
                                                            <section>
                                                                <h2>Ma formation</h2>

                                                                <p>Je compte tout apprendre grâce à OpenClassroom.</p>
                                                             </section>
                                                        
                                                   
                                                   </body></html>

                                                mon CSS

                                                @font-face
                                                { /* Définition d'une nouvelle police du nom de Quicksand */
                                                font-family: 'quicksandregular';
                                                    src: url('quicksand-regular-webfont.woff2') format('woff2'),
                                                         url('quicksand-regular-webfont.woff') format('woff');
                                                    font-weight: normal;
                                                    font-style: normal;
                                                }

                                                h1,h2  /* Utilisation de la police définie sur les titres */
                                                {
                                                   font-family: 'quicksandregular', Arial, Serif;
                                                   color: blue;
                                                   text-shadow: 2px 2px 4px black;  


                                                body
                                                {
                                                   background-image: url("fond-site.jpg");
                                                 
                                                }

                                                header
                                                {
                                                   text-align: center;
                                                }

                                                img
                                                {
                                                   float:right;
                                                   border:2px, solid, black;
                                                   box-shadow: 3px 3px 3px black;
                                                }   
                                                   

                                                #liseret
                                                {
                                                    position:absolute;
                                                    width: 5%;
                                                    height: 750px;
                                                    margin-right: 3%;
                                                    background-color: grey;
                                                    border-radius: 10px/20px;
                                                }



                                                section
                                                {
                                                    float:left;
                                                    display: inline-block;
                                                    vertical-align:top;
                                                    width: 14%;
                                                    height: 100%;
                                                    margin-right: 80px;
                                                    margin-left:140px;
                                                }


                                                @media all and (max-device-width: 1024px)
                                                 /*Règles si la fenêtre fait au plus 1024px de large */
                                                 
                                                {
                                                  #liseret /*pas de liseret en version mobile */
                                                  {
                                                      width: 0;
                                                      border: 0;
                                                     
                                                  } 

                                                  body
                                                  {
                                                   background-image: url("fond-site.jpg");
                                                  }
                                                 
                                                 header
                                                  {
                                                      text-align: center;
                                                      font-size: 1.1em;
                                                  }

                                                  img
                                                  {
                                                    width: 90px;
                                                    float: right;
                                                    margin-left: 10px;
                                                  }
                                                 
                                                  section  /* afficher les sections les unes sous les autres en version mobile */
                                                  {
                                                      flex-direction: column;
                                                      justify-content: flex-start;
                                                      max-height: 900px;
                                                      font-size: 1.1em;
                                                  }   
                                                }


                                                EDIT:j'ai modifié mes codes depuis le début et ça a marché.

                                                -
                                                Edité par Anonyme 27 janvier 2018 à 18:26:30

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  29 janvier 2018 à 14:43:47

                                                  Bonjour à tous j'ai un petit soucis.

                                                  J'ai terminé mon cv en ligne qu'il fait créer en exercice de la semaine 1. Tout fonctionne sauf quand j'essaie de l'ouvrir dans mon dossier zip (que je veux envoyer en correction). Les photos n'apparaissent pas. Je sais pas si c'est un problème de chemin d'accès mais je ne trouve pas la solution. Pourriez-vous m'aider?

                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    29 janvier 2018 à 14:57:43

                                                    Bonjour,

                                                    sabrinakauffmann

                                                    Lis bien ceci çà devrait répondre à ta question en fin de page.

                                                    https://openclassrooms.com/forum/sujet/regles-de-base-pour-bien-commencer

                                                    • Partager sur Facebook
                                                    • Partager sur Twitter

                                                    Compos sui.

                                                      29 janvier 2018 à 20:17:12

                                                      Bonjour, svp comment accéder aux cours vidéos d'openclasseroom.
                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        29 janvier 2018 à 20:22:57

                                                        Tout dépend du cours certains cours n'ont pas de video tu voulais quel cours ?
                                                        • Partager sur Facebook
                                                        • Partager sur Twitter

                                                        Compos sui.

                                                          30 janvier 2018 à 8:21:50

                                                          Merci en effet ça m'a aidé ! Je me sens même un peu bête de pas l'avoir su !
                                                          • Partager sur Facebook
                                                          • Partager sur Twitter
                                                            30 janvier 2018 à 8:50:03

                                                            A ce sujet ne t’inquiète pas, si j'ai créer ce post c'est justement parce que nombre des utilisateurs du site font la même petite erreur.

                                                            Après si tu as des questions plus technique en rapport avec les exercices je te conseil de créer un post sur le forum général Html/Css, çà permet d'avoir une réponse plus ciblée et évite de se perdre dans la masse des "Questions MOOC".

                                                            Bon courage pour la suite.

                                                            • Partager sur Facebook
                                                            • Partager sur Twitter

                                                            Compos sui.

                                                            Questions MOOC HTML/CSS

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