Partage
  • Partager sur Facebook
  • Partager sur Twitter

Questions MOOC HTML/CSS

    Staff 29 juin 2019 à 14:19:42

    @EthanGuingand bonjour, vider le cache de votre navigateur. CTRL + F5 pour recharger la page sans tenir compte du cache.

    • Partager sur Facebook
    • Partager sur Twitter
      30 juin 2019 à 8:44:30

      Merci, de votre aide cela fonctionne très bien 😉
      • Partager sur Facebook
      • Partager sur Twitter
        13 juillet 2019 à 16:45:06

        Bonjour, je suis entrain de réaliser un footer en 3 div, une a gauche une centrer et la derniere à droite. J'ai réussi à aligner les deux premières mais je n'arrive pas à aligner la troisième.  Je ne sais pas quoi mettre dans mon footer div.right{}.Je vous met mon code html ert mon css.
        <footer>
        		<h3 class="mention">Jouer comporte des risques : dépendance, isolement… Appelez le 09-74-74-13-13 (appel non surtaxé)</h3>
        		<div class="left">
        			<h3 class="network">Nous contacter :</h3>
        			<a data-hint="33,288" target="_blank" href="https://www.instagram.com/invites/contact/?utm_source=ig_contact_invite&utm_medium=user_system_sheet&utm_content=4h32q9w"><img class="insta" src="img/insta.png"></a></img>
        			<a data-hint="33,288" target="_blank" href="sc.php"><img class="sc" src="img/snap.png"></a></img>
        			<a data-hint="33,288" target="_blank" href=""><img class="fb" src="img/fb.png"></a></img>
        		</div>
        		<div class="center">
        			<h2>&copyBoyscote</h2>
        		</div>
        		<div class="right">
        			<h4>mention</h4>
        			<h4>cgv</h4>
        		</div>
        </footer>
        footer{
        	background-color: #000;
        	color: #fff;
        	opacity: 0.7;
        	width: 100%;
        	height: auto;
        	position: absolute; 
        	bottom: 0px;
        	left: 0px;
        }
        
        footer h3.mention{
        	text-align: center;
        	font-size: 17px;
        	margin-left: 300px;
        	margin-right: 300px;
        	border: 2px solid gray;
        }
        
        footer div.left{
        	width: 25%;
        	float: left;
        }
        
        footer div.left h3.network{
        	top: 0;
        	text-align: left;
        	margin-left: 50px;
        }
        
        .insta{
        	max-width: 35px;
        	height: auto;
        		margin-left: 60px;
        }
        
        .sc{
        	max-width: 35px;
        	height: auto;
        		margin-left: 20px;
        }
        
        .fb{
        	max-width: 35px;
        	height: auto;
        		margin-left: 20px;
        }
        
        footer div.center{
        	width: 50%;
        	margin-top: 40px;
        	margin-left: auto;
        	margin-right: auto;
        }
        
        footer div.center h2{
        	text-align: center;
        	font-size: 30px;
        }
        
        footer div.right{
        	
        }
        


        • Partager sur Facebook
        • Partager sur Twitter
          16 juillet 2019 à 20:33:11

          Bonsoir, j'ai une question, ça ne va peut être pas très clair donc accrochez vous bien ;)

          Alors j'ai une div on va dire principale qui est transparente avec une opacité de 0.4. dans cette div j'ai d'autre div dont une avec une image mais je ne sais pas comment faire pour que cette image ne soit pas influencer par la transparence.

          Merci de votre aide et voici mon code.

          <!DOCTYPE html>
          <html xmlns="http://opengraphprotocol.org/schema/" lang="fr">
          <head>
          	<title>Boyscote</title>
          	<meta charset="utf-8">
          	<link rel="shortcut icon" type="image/x-icon" href="https://www.cjoint.com/doc/19_02/ICwq1sxy5lE_logo.png"/>
          	<link rel="canonical" href="https://boyscote.000webhostapp.com/"/>
          	<link rel="stylesheet" type="text/css" href="css/main.css">
          	<link rel="stylesheet" type="text/css" href="css/nav.css">
          	<link rel="stylesheet" type="text/css" href="css/footer.css">
          	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha284-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
          </head>
          <body>
          	<div class="contenu">
          
          				<!-- Haut de page -->
          <?php require 'includes/header.php' ?>
          
          		<div class="center-box">
          			<strong><h2 class="slogan1">Marre de perdre tes paris,</h2></strong>
          			<strong><h2 class="slogan2">On a trouvé la solution : Boyscote</h2></strong>
          			<div class="bk">
          				<h3>Bilan du mois</h3>
          				<img src="img/bk.png">
          			</div>
          		</div>
          
          		<!-- Bas de page -->
          <?php require 'includes/footer.php' ?>
          	</div>
          
          </body>
          </html>

          et le css

          header h1.bienvenue{
          	margin-left: 20px;
          	width: 50%;
          		color: #FF6900;
          		font-size: 70px;
          		font-family: Verdana;
          }
          
          body{
          	background: url("https://images.alphacoders.com/510/thumb-1920-510026.jpg") no-repeat;
          	background-size: 100%;
          }
          
          html, body{
          	height: 100%;
          }
          
          div.contenu{
          	min-height: 100%;
          	position: relative;
          }
          
          .center-box{
          	background-color: #000;
          	opacity: 0.4;
          	width: 95%;
          	height: 700px;
          	margin-top: 40px;
          	margin-left: 2.5%;
          	margin-right: 2.5%;
          }
          
          div.center-box strong h2.slogan1{
          	text-align: center;
          	color: #fff;
          }
          
          div.center-box strong h2.slogan2{
          	text-align: center;
          	color: #fff;
          }
          
          div.center-box div.bk{
          	margin-top: 50px;
          	margin-left: 20px;
          	margin-right: 20px;
          	border: 2px solid #515A5A;
          	background-color: #000000;
          	opacity: 1;
          }
          
          div.center-box div.bk h3{
          	text-align: center;
          	color: #fff;
          }



          • Partager sur Facebook
          • Partager sur Twitter
            Staff 16 juillet 2019 à 20:49:17

            @EthanGuingand Bonsoir, on ne peut pas modifier la transparence d'un enfant, si le parent possède la propriété opacity. Utilise la transparence alfa de rgba().

            Tu as des erreurs dans ton HTML.

            • La balise <img> ne sort jamais sans son attribut alt obligatoire.
            • Tu ne peux pas avoir un titre dans un <strong> car celui-ci n’accepte que du contenu phrasé. Par contre tu peux faire l'inverse, un titre peut contenir un texte en emphase forte.
            • Ce n'est sémantiquement pas correcte d'écrire 2 <h2> à la suite. Utilise un seul et unique <h2> avec un retour ligne à l'intérieur.
            • Partager sur Facebook
            • Partager sur Twitter
              17 juillet 2019 à 13:10:55

              @AbcAbc6 Merci de votre réponse je connaissais l'existence du rgb mais pas du rgba c'est pour ça que ça ne marchait pas.

              Pour le alt merci du renseignement, je débute en dev et je ne connaissait pas. Et merci aussi pour le reste ;)

              Juste j'ai remarque que maintenant que j'ai mis un <br> les deux phrases sont bien plus rapprochées entre elles. j'ai essayé de modifié ça dans le css en mettant "div.center-box h2.slogan strong br{" mais ça ne fonctionne pas. Saurait-tu comment faire ?

              -
              Edité par EthanGuingand 17 juillet 2019 à 13:24:57

              • Partager sur Facebook
              • Partager sur Twitter
                Staff 17 juillet 2019 à 17:34:18

                EthanGuingand a écrit:

                 Juste j'ai remarque que maintenant que j'ai mis un <br> les deux phrases sont bien plus rapprochées entre elles.

                Il faut augmenter la hauteur de ligne, propriété line-height.



                • Partager sur Facebook
                • Partager sur Twitter
                  18 juillet 2019 à 11:04:18

                  Bonjour, 

                  j'arrive pas à télécharger le travail des autres pour la correction.

                  A chaque fois, on me met "LE SITE EST INACCESSIBLE".

                  Comment dois-je procéder face à un tel problème?

                  • Partager sur Facebook
                  • Partager sur Twitter
                    Staff 18 juillet 2019 à 12:22:22

                    @LagamaSandrineCoulibaly1 Bonjour, essayez plus tard. Si le problème persiste il faut contacter OC par mail via  hello@openclassrooms.com

                    -
                    Edité par AbcAbc6 18 juillet 2019 à 12:24:39

                    • Partager sur Facebook
                    • Partager sur Twitter
                      22 juillet 2019 à 18:44:27

                      Bonjour,

                      Je débute en CSS. J'ai bien ergistré en fichier page.htm, j'ai crée le nouveau fichier vide Sublime Text dans l'éditeur mais, c'est après que ça coince. Je n'arrive pas à copier le code pour qu'il apparaisse en { color: blue; }. J'ai beau mettre l'extension .css d'abord ça ne marche pas. Quelqu'un à déjà eu le problème?

                      Merci,

                      Vous noterez le contenu de la ligne 5,<link rel="stylesheet" href="style.css" />: c'est elle qui indique que ce fichier HTML est associé à un fichier appeléstyle.csset chargé de la mise en forme.

                      Enregistrez ce fichier sous le nom que vous voulez (par exemplepage.html). Pour le moment, rien d'extraordinaire à part la nouvelle balise que nous avons ajoutée.

                      Maintenant, créez un nouveau fichier vide dans votre éditeur de texte (par exemple Sublime Text) et copiez-y ce bout de code CSS (rassurez-vous, je vous expliquerai tout à l'heure ce qu'il veut dire) :

                      p
                      {
                      color: blue;
                      }

                      Pour obtenir la coloration du code dans Sublime Text, enregistrez bien votre fichier avec l'extension.css  d'abord.

                      Enregistrez le fichier en lui donnant un nom qui se termine par.css, commestyle.css. Placez ce fichier.cssdans le même dossier que votre fichier.html.

                      Dans Sublime Text, vous devriez observer quelque chose de similaire à la figure suivante.

                      Fichiers HTML et CSS dans Sublime TextFichiers HTML et CSS dans Sublime Text
                      • Partager sur Facebook
                      • Partager sur Twitter
                        22 juillet 2019 à 18:59:53

                        SandrineBoutry a écrit:

                        Bonjour,

                        Je débute en CSS. J'ai bien ergistré en fichier page.htm, j'ai crée le nouveau fichier vide Sublime Text dans l'éditeur mais, c'est après que ça coince. Je n'arrive pas à copier le code pour qu'il apparaisse en { color: blue; }. J'ai beau mettre l'extension .css d'abord ça ne marche pas. Quelqu'un à déjà eu le problème?

                        Merci,

                        Vous noterez le contenu de la ligne 5,<link rel="stylesheet" href="style.css" />: c'est elle qui indique que ce fichier HTML est associé à un fichier appeléstyle.csset chargé de la mise en forme.

                        Enregistrez ce fichier sous le nom que vous voulez (par exemplepage.html). Pour le moment, rien d'extraordinaire à part la nouvelle balise que nous avons ajoutée.

                        Maintenant, créez un nouveau fichier vide dans votre éditeur de texte (par exemple Sublime Text) et copiez-y ce bout de code CSS (rassurez-vous, je vous expliquerai tout à l'heure ce qu'il veut dire) :

                        p
                        {
                        color: blue;
                        }

                        Pour obtenir la coloration du code dans Sublime Text, enregistrez bien votre fichier avec l'extension.css  d'abord.

                        Enregistrez le fichier en lui donnant un nom qui se termine par.css, commestyle.css. Placez ce fichier.cssdans le même dossier que votre fichier.html.

                        Dans Sublime Text, vous devriez observer quelque chose de similaire à la figure suivante.

                        Fichiers HTML et CSS dans Sublime TextFichiers HTML et CSS dans Sublime Text


                        c e code dvrait colorer les textes de tes paragraphes en html s'il n'y a rien la bas alors:euh: rien ne s'affichera...
                        • Partager sur Facebook
                        • Partager sur Twitter

                        <BND8G>

                          22 juillet 2019 à 19:53:08

                          Bonjour à tous,

                          J'ai une question sur la correction des exercices sur html/css. Une case rouge a été noté sur mon parcours, quelle est son influence pour la suite du cours ? est-ce que cela entraîne une non validation ? Est-ce qu'il y a un moyen d'être recorriger par 3 autres personnes ?

                          En effet, deux personnes sur trois avaient un problème avec leur navigateur. L'une a mis 1/12 (par défaut) quant à l'autre, elle a mis la moyenne car elle ne pouvait pas rien faire avec son navigateur.

                          Pour information et après vérification, l'exercice est accessible sur l'ensemble des navigateurs donc bon...

                          • Partager sur Facebook
                          • Partager sur Twitter
                            23 juillet 2019 à 12:14:19

                            Bonjour,

                            En réponse à mon message d'hier, le problème est résolu.

                            • Partager sur Facebook
                            • Partager sur Twitter
                              24 juillet 2019 à 18:50:59

                              Bonjour, je debute en HTML j'utilise Sublime text mon probleme c'est que mes balises ne fonctionnent et je ne sais pas pourquoi.

                              -
                              Edité par Henry1713 24 juillet 2019 à 19:04:09

                              • Partager sur Facebook
                              • Partager sur Twitter

                              Henson

                                25 juillet 2019 à 8:51:47

                                Bonjour,

                                Henry1713 a écrit:

                                Bonjour, je debute en HTML j'utilise Sublime text mon probleme c'est que mes balises ne fonctionnent et je ne sais pas pourquoi.

                                Il y a plusieurs raisons :

                                - Ton fichier n'est pas enregistré en tant que fichier HTML (en bas à droite c'est indiqué "Plain Text" et non "HTML")

                                - Tu utilises une balise qui n'existe pas (<br \> au lieu de <br />)

                                - Et enfin parce que ton fichier n'a pas le doctype attendu pour un fichier HTML (voir cette partie du cours : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1604361-creez-votre-premiere-page-web-en-html#/id/r-1609378=

                                • Partager sur Facebook
                                • Partager sur Twitter
                                Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
                                  31 juillet 2019 à 17:12:48

                                  Bonjour,

                                  Je me demandais, le logiciel Sublime Text est-il payant ? Car à un moment donné je suis bloquée pour l'enregistrement... 

                                  Si oui, je suis sur Mac, est ce que l'un d'entre vous connait-il un autre logiciel ? 

                                  (Je suis désolée si la réponse a déjà été donnée...)

                                  Merci !

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    1 août 2019 à 15:03:58

                                    non de sblimetext.com 

                                    Sublime Text peut être téléchargé et évalué gratuitement, mais vous devez acquérir une licence pour pouvoir continuer à l'utiliser. Il n'y a actuellement aucun délai imposé pour l'évaluation.
                                    • Partager sur Facebook
                                    • Partager sur Twitter

                                    <BND8G>

                                      6 août 2019 à 17:41:00

                                      SchawnPlay a écrit:

                                      Bonjour à tous,

                                      J'ai une question sur la correction des exercices sur html/css. Une case rouge a été noté sur mon parcours, quelle est son influence pour la suite du cours ? est-ce que cela entraîne une non validation ? Est-ce qu'il y a un moyen d'être recorriger par 3 autres personnes ?

                                      En effet, deux personnes sur trois avaient un problème avec leur navigateur. L'une a mis 1/12 (par défaut) quant à l'autre, elle a mis la moyenne car elle ne pouvait pas rien faire avec son navigateur.

                                      Pour information et après vérification, l'exercice est accessible sur l'ensemble des navigateurs donc bon...


                                      Donc finalement, cela m’empêche de valider le certificats d'apprentissage. C'est plutôt cool...
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        7 août 2019 à 17:38:01

                                        SchawnPlay a écrit:

                                        SchawnPlay a écrit:

                                        Bonjour à tous,

                                        J'ai une question sur la correction des exercices sur html/css. Une case rouge a été noté sur mon parcours, quelle est son influence pour la suite du cours ? est-ce que cela entraîne une non validation ? [...]

                                        Pour information et après vérification, l'exercice est accessible sur l'ensemble des navigateurs donc bon...


                                        Donc finalement, cela m’empêche de valider le certificats d'apprentissage. C'est plutôt cool...



                                        Fait une réclamation à hello@openclassrooms.

                                        -
                                        Edité par ThierryGonthier 7 août 2019 à 17:39:56

                                        • 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