Partage
  • Partager sur Facebook
  • Partager sur Twitter

Questions MOOC HTML/CSS

    19 décembre 2018 à 17:12:33

    ca ne sert a rien de poster ici il faut cliquer sur contactez nous en bas de la page pour signaler ce probleme.
    • Partager sur Facebook
    • Partager sur Twitter
    Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.
      19 décembre 2018 à 17:33:24

      Merci pour le test des navigateurs car je me posais justement la question...

      Espérons que le bug soit bientôt corrigé car l'attente commence à être un peu longue xD

      • Partager sur Facebook
      • Partager sur Twitter
        22 décembre 2018 à 1:00:56

        Erkris a écrit:

        Salut à tous!

        Je viens de terminer le test de la semaine 1 mais les notes ne sont pas données directement. Est-ce normal? Faut-il attendre la fin de la semaine?


        Cordialement

        Pierre 



        • Partager sur Facebook
        • Partager sur Twitter
          25 décembre 2018 à 0:16:24

          Bonjour à tous, 

          J'essaie depuis près d'une heure d'insérer une image mais sans succès. J'ai tout vérifié mais rien n'y fait. Quelqu'un voit-il d'où pourrait venir le problème ? 

          Je vous joins mon code ici:

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8" />

          <title>Mon site Internet</title>

          </head>

          <body>

          <p>

           La photo du logo<br />

          <img src=“images/jj.jpg“ alt="photo de logo" />

          </p>

          </body>

          </html>

          Merci par avance, 

          • Partager sur Facebook
          • Partager sur Twitter
            25 décembre 2018 à 10:47:46

            1- utilises la balise de mise en forme </> pour partager ton code ca sera plus lisible. 

            2- Si ton image ne s'affiche pas c'est soit un problème de nommage soit un problème de chemin.

            • Partager sur Facebook
            • Partager sur Twitter
            Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.
              27 décembre 2018 à 12:43:14

              Bonjour à tous,

              Je ne parviens pas du tout à faire fonctionner mes mediaqueries pour le dernier exercice.

              Ci-dessous mon code:

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

              }




              body
              {
              font-family:'sinkin_sans400_regular', Arial, Impact;
              text-align:justify;
              background:#E9E9E9;
              }


              /*--------------Bloc gauche-----------*/

              aside
              {
              background-color:#0838D4;
              position:fixed;
              height:2000px;
              width:200px;
              background-size: contain;
              font-size:15px;
              color:white;
              border-radius:15px;
              text-transform:none;
              text-align:left;
              }




              #informations
              {
              margin:auto;
              padding-left:15px;
              padding-top:20px;
              }


              /*-----------------en tête---------------------*/

              #en-tête
              {
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                  background: rgb(245,245,245);
                  border-radius: 6px 6px 6px 6px;
                  height: 200px;
                  min-width: 400px;
              }



              #photo
              {
              align-content: right;
              margin-right:2px;
              margin-top:90px;

              }


              h1
              {
              color:#0838D4;
              text-align:center;
              text-shadow:2px 2px 5px #0838D4;
              margin-left:10%;
              }

              .intro
              {
              text-align:center;
              margin-left:10%;
              }



              /*------------------bloc droit---------------------*/

              #droite
              {
                  display: flex;
                  flex-direction: column;
                  position: relative;
                  margin-left: 220px;
              }



              /*------------------corps-------------------*/

              #corps
              {
                  display:flex;
                  flex-direction: row;
                  position: relative;
                  margin-top: 10px;
                  height: 390px;
                  text-align: justify;
              }



              .expérience
              {

                  width: 33%;
                  padding: 80px 10px;
                  overflow-y: auto;
              }

              .compétences
              {
                  width: 33%;
                  margin:0% 1%;
                  padding: 80px 10px;
                  overflow-y: auto;
              }

              .formation
              {
                  width: 33%;
                  padding: 80px 10px;
                  overflow-y: auto;
              }


              h2
              {
              border-top: #0838D4 dotted;
              font-size: 1.2em;
              }





              @media screen and(max-width:1024px)
              {
              aside
              {
              background-color:#E9E9E9;
              }

              #corps
              {
              display:flex;
              flex-direction:column;
              }
              }
              Auriez-vous une idée du problème?
              Je vous remercie.
              • Partager sur Facebook
              • Partager sur Twitter
                27 décembre 2018 à 18:14:58

                Bonjour,

                Désolé, j'ai le même souci mais je vais poster ma question par ailleurs.

                -
                Edité par OlMax 27 décembre 2018 à 18:55:22

                • Partager sur Facebook
                • Partager sur Twitter
                  27 décembre 2018 à 18:55:58

                  Bonjour, 

                  je suis actuellement en train d'essayer de conclure l'excercice de la semaine 3 (à savoir organiser son CV).

                  Mais je galère pas mal avec flexbox. J'ai réussi à régler quelques soucis en regardant des vidéos YT, créer ma side bar etc

                  MAIS je n'arrive plus à donner de directives ni )à mon "header", ni aux "section". 

                  Quelqu'un pourrait m'expliquer ce qui clôche ? :( Merci d'avance ! 

                  Code HTML : 

                  <!DOCTYPE html>
                  <html>
                  
                  <head>
                  	<meta charset="utf-8">
                  	<title>I am Stella Lancaster</title>
                  	<link rel="stylesheet" href="style2.css">
                  </head>
                  			<!-- Entête du CV -->
                  
                  <body>
                  	<div class="elements">
                  		<div class="sidebar"><aside>
                  		<ul>
                          <li><a href="#">Accueil</a></li>
                          <li><a href="#">Blog</a></li>
                          <li><a href="#">CV</a></li>
                          </ul>
                      </aside></div>
                  
                  	<div class="body">
                  		<header>
                  		<h1> Stella Lancaster</h1>
                  		<p> Give computer science a shot. It's okay if you don't like it, or end up doing something else. But <em>you never know</em> unless you dedicate serious time dans effort to trying.</p>
                  		<p><a href="img/moi_grnd.jpg"><img src="img/moi_mini.jpg" class="imageflottante" alt="Photo de moi" title="Cliquez pour agrandir" /></a></p>
                  	</header>
                  
                      <div class="section">
                      	<section>
                  
                      	<h2> Mon expérience </h2>
                      	<ul>
                      		<li><strong>De 1999 à 2007</strong> : créatrice du site Cooking with dog</li>	
                      		<li><strong>De 2007 à 2013</strong> : création de Funny IT, start-up éditrice du site Cooking with dog. Lancement d'une collection de livres. Évolution du site jusqu'à & millions de visiteurs par mois, avec 15 employés.</li>
                      		<li><strong>De 2014 à aujourd'hui</strong> : transformation de Funny IT et du site Cooking with dog en une marque unique et globale, OpenKitchens. Internationalisation, lancement de cours vidéo, d'une collection d'eBooks à la demande et de certificats en ligne.</li>
                      	</ul>
                      	</section>
                     		<section>
                      	<h2> Mes compétences</h2>
                      	<ul>
                      		<li>HTML5 et CSS</li>
                  			<li>PHP (certificat OpenClassroom)</li>
                  			<li>SQL</li>
                  			<li>Piano (niveau expert)</li>
                  	 	</ul>
                  		</section>
                  		<section>
                  	 	<h2> Ma formation</h2>
                  	 	<ul>
                  	 		<li> École Codding4LiFe basée sur Torronto.</li>
                  	 		<li> Apprentissage en autodidacte.</li>
                  	 	</ul>
                  	 </section>
                  </div>
                  </body>
                  	</div>
                  </html>
                  



                  Code CSS : 

                  @font-face
                  {
                  	font-family: 'OK';
                  	src: url('OpenSans-Light.ttf');
                  }
                  .imageflottante
                  {
                  	box-shadow: 5px 5px 1px grey;
                  }
                  body
                  {
                  	font-family: "OK";
                  	background-color: #FFF0F5
                  
                  }
                  body
                  {
                  	background-image :url("sakura-flower.png");
                  	background-repeat: no-repeat;
                  	background-position: top right;
                  }
                  h1
                  {
                  	color: #9370DB; /*Commentaire*/
                  	font-size: 2em
                  }
                  p
                  {
                  	font-size:1em;
                  }
                  h2
                  {
                  	color: #9370DB;
                  	background-color: #FFC0CB;
                  	opacity: 0.5;
                  	border: 1px grey dotted;
                  	border-radius: 5px/5px;
                  }
                  
                  .elements
                  {
                  	display: flex;
                  
                  
                  }
                  .sidebar
                  {
                  	display: flex;
                  	width:10%;
                  	background-color:white;
                  }
                  .body
                  {
                  	align-content:center;
                  }
                  .section
                  {
                  	display:flex;
                  	flex-direction:row;
                  	justify-content: center;
                  }
                  



                  Rendu visuel : 

                  Résultat attendu : 

                  -
                  Edité par LStella 27 décembre 2018 à 19:30:42

                  • Partager sur Facebook
                  • Partager sur Twitter
                    27 décembre 2018 à 22:22:45

                    Ligne 25 et 13 dans ton CSS il te manque les points-virgules ça vient peut être de là.
                    • Partager sur Facebook
                    • Partager sur Twitter
                    Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.
                      28 décembre 2018 à 9:43:53

                      Zoki_Marciano a écrit:

                      Ligne 25 et 13 dans ton CSS il te manque les points-virgules ça vient peut être de là.


                      Merci d'avoir répondu. Les modifications ont été apportées, mais toujours pas de changements. :/
                      • Partager sur Facebook
                      • Partager sur Twitter
                        28 décembre 2018 à 11:04:52

                        ta balise fermante </body> se trouve dans une une div et ce n'est pas bon.

                        ligne 37 de ton css border-radius: 5px/5px; est a remplacé par border-radius: 5px;

                        -
                        Edité par Zoki_Marciano 28 décembre 2018 à 11:07:51

                        • Partager sur Facebook
                        • Partager sur Twitter
                        Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.
                          28 décembre 2018 à 14:35:52

                          @Zoki_Marciano Merci pour l'aide apportée ! Puisque ça ne fonctionnait toujours pas, et que ça fait un moment que je bloquais là dessus, j'ai revu le foncitonnement de flexbox à 0.

                          Finalement, après avoir lu l'explication de ce site https://la-cascade.io/flexbox-guide-complet/ , j'ai mieux "compris" la logique. Je ne dis pas que mon code est génial mais ça fonctionne :')

                          Mon nouveau HTML :

                          <!DOCTYPE html>
                          <html>
                          
                          <head>
                          	<meta charset="utf-8">
                          	<title>I am Stella Lancaster</title>
                          	<link rel="stylesheet" href="style2.css">
                          </head>
                          			<!-- Entête du CV -->
                          
                          <body>
                          	<div class="elements">
                          		<div class="sidebar"><aside>
                          		<ul>
                                  <li><a href="#">Accueil</a></li>
                                  <li><a href="#">Blog</a></li>
                                  <li><a href="#">CV</a></li>
                                  </ul>
                              </aside></div>
                          
                          	<div class="main">
                          		<header>
                          		<p><a href="img/moi_grnd.jpg"><img src="img/moi_mini.jpg" class="imageflottante" alt="Photo de moi" title="Cliquez pour agrandir" /></a></p>
                          		<h1> Stella Lancaster</h1>
                          		<p> Give computer science a shot. It's okay if you don't like it, or end up doing something else. But <em>you never know</em> unless you dedicate serious time dans effort to trying.</p>
                          	</header>
                          
                          
                              <div class="section">
                              	<section>
                          		<h2> Mon expérience </h2>
                              	<ul>
                              		<li><strong>De 1999 à 2007</strong> : créatrice du site Cooking with dog</li>	
                              		<li><strong>De 2007 à 2013</strong> : création de Funny IT, start-up éditrice du site Cooking with dog. Lancement d'une collection de livres. Évolution du site jusqu'à & millions de visiteurs par mois, avec 15 employés.</li>
                              		<li><strong>De 2014 à aujourd'hui</strong> : transformation de Funny IT et du site Cooking with dog en une marque unique et globale, OpenKitchens. Internationalisation, lancement de cours vidéo, d'une collection d'eBooks à la demande et de certificats en ligne.</li>
                              	</ul>
                              	</section>
                             		<section>
                              	<h2> Mes compétences</h2>
                              	<ul>
                              		<li>HTML5 et CSS</li>
                          			<li>PHP (certificat OpenClassroom)</li>
                          			<li>SQL</li>
                          			<li>Piano (niveau expert)</li>
                          	 	</ul>
                          		</section>
                          		<section>
                          	 	<h2> Ma formation</h2>
                          	 	<ul>
                          	 		<li> École Codding4LiFe basée sur Torronto.</li>
                          	 		<li> Apprentissage en autodidacte.</li>
                          	 	</ul>
                          	 </section>
                          </div>
                          </div>
                          </body>
                          </html>
                          



                          Mon nouveau CSS : 

                          @font-face
                          {
                          	font-family: 'OK';
                          	src: url('OpenSans-Light.ttf');
                          }
                          .imageflottante
                          {
                          	box-shadow: 5px 5px 1px grey;
                          }
                          body
                          {
                          	font-family: "OK";
                          	background-color: #FFF0F5;
                          
                          }
                          body
                          {
                          	background-image :url("sakura-flower.png");
                          	background-repeat: no-repeat;
                          	background-position: top right;
                          }
                          h1
                          {
                          	color: #9370DB;
                          	font-size: 2em;
                          }
                          p
                          {
                          	font-size:1em;
                          }
                          h2
                          {
                          	color: #9370DB;
                          	background-color: #FFC0CB;
                          	opacity: 0.5;
                          	border: 1px grey dotted;
                          	border-radius: 5px;
                          }
                          section 
                          {
                          	width: 30%;
                          }
                          
                          header
                          {
                          	text-align:center;
                          }
                          .elements
                          {
                          	display: flex;
                          
                          
                          }
                          .sidebar
                          {
                          	width:10%;
                          	background-color:white;
                          }
                          .main
                          {
                          	display:flex;
                          	flex-direction: column;
                          }
                          .section
                          {
                          	display:flex;
                          	flex-wrap:nowrap;
                          	flex-direction:row;
                          	justify-content: space-around;
                          }
                          

                          Tadaaaa ! 

                          =

                          - J'ai mis le contenu de .main en colonne pour forcer les élements à se mettre en dessous de mon header. 

                          - J'ai ajouté une "taille" aux éléments de ma section pour donner de l'espace à répartir à la commande flex. Après ça, les indications de .section fonctionnaient comme sur des roulettes. 

                          -
                          Edité par LStella 28 décembre 2018 à 14:40:22

                          • Partager sur Facebook
                          • Partager sur Twitter
                            28 décembre 2018 à 19:49:21

                            Bonsoir, j'essaie de changer la couleur de mon texte mais sans réussite depuis un moment. Je vous joins les photos de mon code html et css. Si quelqu'un pouvait me dire ce qui cloche ce serait top ! 

                            Merci par avance, 

                            CODE HTML:CODE CSS:

                            • Partager sur Facebook
                            • Partager sur Twitter
                              28 décembre 2018 à 20:28:52

                              Le fichier style.css est bien enregistré à la racine du site?
                              • Partager sur Facebook
                              • Partager sur Twitter
                              Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.
                                28 décembre 2018 à 20:41:40

                                C'est à dire à la racine du site ? Il est enregistré dans un fichier annexe en css qui se trouve dans le même dossier que mon fichier html.

                                Je ne sais pas si ma réponse est claire...

                                Merci de prendre ton temps pour me répondre en tout cas ;)

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  28 décembre 2018 à 23:44:54

                                  J'ai mis tes 2 fichiers dans un même dossier, tout fonctionne normalement. Par contre, la balise <Titre> n'est pas une balise html homologuée W3C !

                                  -
                                  Edité par Philippe2463 29 décembre 2018 à 18:28:18

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                  La chute n'est pas un échec, l'échec c'est de rester là où on est tombé!
                                    29 décembre 2018 à 12:51:10

                                    Fait une capture d'écran du dossier ou se trouve ton fichier style.css.
                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                    Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.
                                      29 décembre 2018 à 18:15:31

                                      salut

                                      je pense aussi que c'est bien la balise titre qui bloque ton code;

                                      de plus si le problème persiste je te conseille de bien faire attention, parfois on a tendance à tester le code dans le navigateur sans sauvegarder. Appuis sur ctrl+s a chaque fois que tu veux passer au nav c'est bête mais ça arrive.

                                      -
                                      Edité par Rubenk 29 décembre 2018 à 18:21:52

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        30 décembre 2018 à 20:51:08

                                        Hello,

                                        pour le dernier exercie avec les média queries, j'ai envoyé les mauvais fichiers, du coup ça fonctionne pas.

                                        Y a-t-il moyen de recommencer ?

                                        Comment faire ?

                                        Merci

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          30 décembre 2018 à 23:57:09

                                          Tu vas tout en bas de la page et tu cliques sur Nous contacter
                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                          Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.
                                            7 janvier 2019 à 20:58:13

                                            Bonsoir,

                                            Tout d'abord merci et bravo pour la qualité du site et des cours. Je suis totalement débutant et j'aurai une question basique à vous soumettre :

                                            - Lorsque j'écris les 2 lignes suivantes

                                            1 Salut !

                                            2 Comment ça va ?

                                            - Avec un enregistrement sous UTF-8 via Sublime text, le caractère "ç" se converti en "ça" depuis Firefiox ou IE

                                            - En enregistrant sous UTF-8 with BOM (tout à fait par hasard), j'obtiens le bon caractère

                                            Du coup, par rapport au cours qui indique qu'il est recommandé d'utiliser la méthode d'encodage UTF-8, dois-je l'utiliser avec ou sans BOM ?

                                            Merci par avance pour votre aide et éclairage.

                                            Mynos92

                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              9 janvier 2019 à 13:54:59

                                              Mynos92 a écrit:

                                              Bonsoir,

                                              Tout d'abord merci et bravo pour la qualité du site et des cours. Je suis totalement débutant et j'aurai une question basique à vous soumettre :

                                              - Lorsque j'écris les 2 lignes suivantes

                                              1 Salut !

                                              2 Comment ça va ?

                                              - Avec un enregistrement sous UTF-8 via Sublime text, le caractère "ç" se converti en "ça" depuis Firefiox ou IE

                                              - En enregistrant sous UTF-8 with BOM (tout à fait par hasard), j'obtiens le bon caractère

                                              Du coup, par rapport au cours qui indique qu'il est recommandé d'utiliser la méthode d'encodage UTF-8, dois-je l'utiliser avec ou sans BOM ?

                                              Merci par avance pour votre aide et éclairage.

                                              Mynos92


                                              salut en fait l'encodage indiquer sur le cour se met dans la balise <meta> sur head donc pas lors de l'enregistrement et pous l'enregistrer moi j'utilise enregistrer sous avec le nom.html en utf-8 mais si cela marche autrement pour toi sache que c'est une bonne nouvelle de faire que tu nous apprend en étant débutant donc d'autres pourront se réferrer à toi pour s'améliorer 

                                              j'espére que cela t'aidera merci à toi

                                              • Partager sur Facebook
                                              • Partager sur Twitter

                                              <BND8G>

                                                9 janvier 2019 à 21:08:05

                                                Hello, merci beaucoup pour ta réponse. J'en déduis donc que je peux continuer à utiliser UTF-8 with BOM pour continuer à suivre les cours et mettre en application.

                                                Encore merci :)

                                                Mynos92

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  10 janvier 2019 à 16:08:58

                                                  salut à tous ! pour l'exercice de la semaine 3, je ne sais pas comment insérer le liséré. je galère depuis un bon bout temps. merci de repondre.
                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    10 janvier 2019 à 18:03:07

                                                    Bonjour,

                                                    Manque de recherche

                                                    La question que vous posez est très fréquente, cela démontre un manque de recherche évident. Internet et ce forum fourmillent de ressources répondant à votre besoin.

                                                    Je vous invite à effectuer de vraies recherches qui sont à la base d'un bon apprentissage…

                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                    Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL
                                                      11 janvier 2019 à 18:42:34

                                                      bonsoir,

                                                      je suis toute débutante, lorsque je crée mes dossiers .html et .css, je ne les trouve pas ans un fichier??

                                                      voici un aperçu du détail : 

                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        15 janvier 2019 à 11:31:48

                                                        Bonjour,

                                                        J'ai une question : dans le chapitre créer des liens, à la fin il y a une indication pour créer un lien de téléchargement. J'ai essayé et je n'arrive pas à faire fonctionner le lien. Le fichier qui doit s'appeler fichier.zip doit-il être en format zip ? Parce que j'ai testé avec un pdf et une image et je n'ai pas réussi à activer le téléchargement.

                                                        Si quelqu'un voit mon message et peut m'aider, je l'en remercie d'avance.

                                                        Bonne journée.

                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                          15 janvier 2019 à 17:59:32

                                                          Ton code serait le bienvenu pour que l'on puisse t'aider.
                                                          • Partager sur Facebook
                                                          • Partager sur Twitter
                                                          Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.
                                                            15 janvier 2019 à 20:14:24

                                                            Bonjour j'aimerais savoir comment on crée les menu en Html.
                                                            • 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