Partage
  • Partager sur Facebook
  • Partager sur Twitter

Questions MOOC HTML/CSS

    23 mars 2019 à 9:32:16

    Bonjour ,

    J'aimerai savoir ce qui differencie une balise <div> d'une balise par exemple <section>

    Exemple :  si j'englobe un code html d'une balise <div id="global";> et que je la change par une <section id=global;> je remarque que l'affichage de la page ne se comporte pas de la meme facon .

    Merci

    -
    Edité par MacFlight 23 mars 2019 à 13:59:01

    • Partager sur Facebook
    • Partager sur Twitter
      23 mars 2019 à 12:58:48

      <body>
      		<div id="corps">
      			<div id="lisere1">
      
      						<p> <img src="images/lisere.jpg" id="lisere" alt="coucou"> </p>
      			</div>
      					
      			<header>
      				<div id="haut">
      					<h1> ANDRIAMAHARAVO Avotra </h1>
      			
      					<p id="etudiant"> "Etudiant et curieux sur les formations d'openclassrooms" <br> </p>
      				
      					<p id="zah"> <a href="images/lemur.jpg"> <img src="images/lemur_mini.jpg" alt="Photo de profil" title="Cliquer pour agrandir" id="sariko" /> </a> </p>
      				</div>
      				
      			</header>
      
      				<section>
      					
      						<div id="centrer">
      							<div id="education">
      
      								<h2> Education </h2>
      								<ul>
      									<li> <b> 2013: </b> </li> <span>Baccalaureat secondaire série D, Lycée Ambatomena</span>
      									<li> <b> 2015: </b> </li> <span>DTS (Diplôme de Technicien Superieur) en Informatique de Gestion - CNTEMAD (Centre Nationnale de Télé_Enseignement à Madagascar) </span>
      								</ul>
      							
      
      							</div>
      
      							<div id="experience">
      									<h2> Expérience professionnelles </h2>
      									<ul>
      										<li> <b> Depuis janvier 2016: </b> </li> <p>Opérateur de saisi d'enquête temporaire, ONG GRET (Groupe de Recherche et d'Echanges Téchnilogiques) </p><br>
      											<ul>
      												<li> Saisie des questionnaires d'enquête. </li>
      												<li> Verification des questionnaires d'enquêtes. </li>
      											</ul>
      										<li> <b> Depuis 2015: </b> </li> <span>Superviseur d'enquête temporaire,  MSI (Market and Social Insigth)</span>
      											<ul>
      												<li> Encadrement des équipe sur terrain. </li>
      												<li> Assure la qualité et la fiabilité des enquêtes. </li>
      												<li> Rapport des activités journalières. </li>
      											</ul>
      									</ul>
      							</div>
      
      							<div id="hobbies">
      								<h2> Hobbies </h2>
      								<ul>
      									<li> Basket-ball </li><p> On s'amuse avec les autres et prendre la forme en même temps </p>
      										
      									<li> <b> Lecture </b> </li> <p>J'aime bien les livres de l'édition "Eyrolles" en particulier.</p>
      										<ul>
      											<li>Openclassrooms </li> <p>Rien à ajouter, car c'est très cool pour moi.</p>
      											<li> Culturethèque </li> <p>On peut chercher beaucoup des livres.</p>
      											<li> Livres de developpement personnel </li>
      										</ul>
      								</ul>
      							</div>
      						</div>
      
      					</section>
      			</div>
      	</body>
      Bonjour, ci-joint le html et le css
      #corps
      {
      	margin: auto;
      	max-width: 900px;
      
      }
      
      #etudiant
      {
      	margin: auto;
      }
      
      #haut
      {
      	display: flex;
      	flex-direction: column;
      	justify-content: flex-start;
      }
      
       #haut h1
      {
      	border: 8px #966666 double;
      	box-shadow: 6px 6px 0px #11105b;
      	font-family: 'BallparkWeiner';
      	text-decoration: none;
      	position: absolute;
      	left: 20%;
      	top: 5px;
      }
      
      h2
      {
      	color: #3300ff;
      	
      }
      
      
      
      ul
       {
      	text-align: justify-all;
      	font-family: 'Dayrom', Arial, cursiva;
      }
      
      #sariko
      {
      	border: 2px solid #003300;
      	border-radius: 5px;
      	right: 0;
      	margin-right: 15%;
      }
      
      #zah
      {
      	position: absolute;
      	top: 0; 
      	right: 5px;
      }
      
      
      
      /*Corps du devoir*/
      section
      {
      	display: flex;
      }
      
      #lisere
      {
      	position: fixed;
      	height: 100%;
      	width: 200px;
      	border-radius: 5px;
      	border: 2px solid #181818;
      	left: 0px;
      	top: 0px;
      }
      
      #centrer
      {
      	display: flex;
      	left: 20%;
      	position: absolute; 
      }
      • Partager sur Facebook
      • Partager sur Twitter
        25 mars 2019 à 15:19:09

        AvotraAndriamaharavo1 a écrit:

        Bonjour, lors de l'activité à la création du CV du semaine 3, j'ai réussi à faire la conception, mais il y a un barre de défilement en bas et à droite, comment je puis faire pour enlever cette barre de défilement, et mon page soit en plein écran?

        Merci de votre réponse!!!

        Bonjour, il suffit normalement de remplacer "max-width:900px;" dans ton CSS (corps)par "width:100%;"

        • Partager sur Facebook
        • Partager sur Twitter
          26 mars 2019 à 8:37:15

          Merci WilfriedJeambel j'ai déjà essayé cet technique, mais le corps du devoir et l'entête vont chevaucher!!! Je te remercie quand même!!!

          :D :D :D :D

          • Partager sur Facebook
          • Partager sur Twitter
            26 mars 2019 à 10:53:57


            AvotraAndriamaharavo1 je pense que c'est le résultat que tu souhaites obtenir :

            HTML :

            <!DOCTYPE HTML>
            <html lang="fr">
            
            <head>
                <meta charset="utf-8">
                <link rel="stylesheet" href="brouillon.css"
            </head>
            
            <body>
            <div id="corps">
                <div id="lisere1">
            
                    <p> <img src="images/lisere.jpg" id="lisere" alt="coucou"> </p>
                </div>
            
                <header>
                    <div id="haut">
                        <h1 class="name"> ANDRIAMAHARAVO Avotra </h1>
            
                        <p id="etudiant"> "Etudiant et curieux sur les formations d'openclassrooms" <br> </p>
            
                    </div>
                    <div class="picture">
                        <p id="zah"> <a href="images/lemur.jpg"> <img src="images/lemur_mini.jpg" alt="Photo de profil" title="Cliquer pour agrandir" id="sariko" /> </a> </p>
            
                    </div>
            
                </header>
            
                <section>
            
                    <div id="centrer">
                        <div id="education">
            
                            <h2> Education </h2>
                            <ul>
                                <li> <b> 2013: </b> </li> <span>Baccalaureat secondaire série D, Lycée Ambatomena</span>
                                <li> <b> 2015: </b> </li> <span>DTS (Diplôme de Technicien Superieur) en Informatique de Gestion - CNTEMAD (Centre Nationnale de Télé_Enseignement à Madagascar) </span>
                            </ul>
            
            
                        </div>
            
                        <div id="experience">
                            <h2> Expérience professionnelles </h2>
                            <ul>
                                <li> <b> Depuis janvier 2016: </b> </li> <p>Opérateur de saisi d'enquête temporaire, ONG GRET (Groupe de Recherche et d'Echanges Téchnilogiques) </p><br>
                                <ul>
                                    <li> Saisie des questionnaires d'enquête. </li>
                                    <li> Verification des questionnaires d'enquêtes. </li>
                                </ul>
                                <li> <b> Depuis 2015: </b> </li> <span>Superviseur d'enquête temporaire,  MSI (Market and Social Insigth)</span>
                                <ul>
                                    <li> Encadrement des équipe sur terrain. </li>
                                    <li> Assure la qualité et la fiabilité des enquêtes. </li>
                                    <li> Rapport des activités journalières. </li>
                                </ul>
                            </ul>
                        </div>
            
                        <div id="hobbies">
                            <h2> Hobbies </h2>
                            <ul>
                                <li> Basket-ball </li><p> On s'amuse avec les autres et prendre la forme en même temps </p>
            
                                <li> <b> Lecture </b> </li> <p>J'aime bien les livres de l'édition "Eyrolles" en particulier.</p>
                                <ul>
                                    <li>Openclassrooms </li> <p>Rien à ajouter, car c'est très cool pour moi.</p>
                                    <li> Culturethèque </li> <p>On peut chercher beaucoup des livres.</p>
                                    <li> Livres de developpement personnel </li>
                                </ul>
                            </ul>
                        </div>
                    </div>
            
                </section>
            </div>
            </body>
            
            
            
            
            
            
            </html>

            CSS :

            #corps
            {
                margin-left:15%;
                width: 85%;
            
            }
            
            
            
            #haut
            {
                display: flex;
                flex-direction: column;
                align-items: center;
            
            }
            .name{
                max-width: 50%;
                word-wrap: break-word;
            }
            .picture{
                position:absolute;
                top:2%;
                right:2%;
            }
            
            #haut h1
            {
                border: 8px #966666 double;
                box-shadow: 6px 6px 0px #11105b;
                font-family: 'BallparkWeiner';
                text-decoration: none;
                position:;
            
            }
            
            h2
            {
                color: #3300ff;
            
            }
            
            
            
            ul
            {
                text-align: justify-all;
                font-family: 'Dayrom', Arial, cursiva;
            }
            
            #sariko
            {
                border: 2px solid #003300;
                border-radius: 5px;
            
            }
            
            
            
            /*Corps du devoir*/
            section
            {
                display: flex;
            }
            
            #lisere
            {
                position: fixed;
                height: 100%;
                width: 15%;
                border-radius: 5px;
                border: 2px solid #181818;
                left: 0;
                top: 0;
            }
            
            #centrer
            {
                display: flex;
            
            
            
            }
            #education,#experience,#hobbies {
                width:30%;
            }
            

            je me suis juste occupé du placement (il faut remettre le tout au propre)

            en espérant t'avoir aidé


            -
            Edité par WilfriedJeambel 26 mars 2019 à 10:59:42

            • Partager sur Facebook
            • Partager sur Twitter
              26 mars 2019 à 17:33:48

              Bonjour, 

              J'arrive ) la fin de la première semaine et la création d'un site web pour mon CV. Mais je comprends avec quel programme le réaliser afin de l'envoyer. Merci d'avance 

              • Partager sur Facebook
              • Partager sur Twitter
                26 mars 2019 à 19:04:39

                bonjour Julien,

                avec n'importe quel programme de code , puis ensuite tu compresse le dossier contenant les fichiers html et css avec un logiciel type 7zip (ou winrar) au format ZIP
                • Partager sur Facebook
                • Partager sur Twitter
                  29 mars 2019 à 6:33:55

                  Bonjour 

                  WilfriedJeambel

                  je suis très content de recevoir ta correction, c'est bien que ça que je veux, merci beaucoup de ton aide!!!

                  :D

                  Encore meci, oaouuuuh

                  • Partager sur Facebook
                  • Partager sur Twitter
                    1 avril 2019 à 14:18:18

                    Bonjour,
                    Alors mon soucis c'est que lorsque je télécharge le pack de langage qui m'intéresse par exemple "rubik", je tente de l'appliquer sur mon site mais cela ne fonctionne pas.

                    Voici comment je m'y prends :
                    Dans mon dossier se trouve :
                    -mon fichier html
                    -mon fichier css
                    -mon fichier qui contient le langage "Rubik"
                    -ainsi que mes photos

                    Mes fichiers html et css sont parfaitement reliés mais comment faire pour relier mon fichier css avec mon fichier de langage "Rubik" ?

                    Je pensais qu'il faillait seulement qu'ils soient dans le même dossier, ai-je tort ?

                    dans mon css j'ai codé comme ceci :

                    @font-face
                    {
                    font-family: 'rubik' ;

                    src: url(rubik-bolditalic-webfont.woff) format('woff');
                    src: url(rubik-bolditalic-webfont.woff2) format('woff2');
                    src: url(rubik-bold-webfont.woff) format('woff');
                    src: url(rubik-bold-webfont.woff2) format('woff2');
                    src: url(rubik-italic-webfont.woff) format('woff');
                    src: url(rubik-italic-webfont.woff2) format('woff2');
                    src: url(rubik-regular-webfont.woff) format('woff');
                    src: url(rubik-regular-webfont.woff2) format('woff2');
                    }

                    h2
                    {
                    font-family: 'rubik';
                    }

                    Alors oui, je n'est mis qu'en extension .woff, seulement pour tester, mais cela ne fonctionne page car cela ne s'adapte pas à ma page html .

                    Je vous envoie mon site (cela ne ressemble à rien pour l'instant mais la suite sera meilleur).

                    Merci de prendre le temps de regarder ou cela ne fonctionne pas.

                    Peut-être est-ce mon téléchargement qui est mal réaliser, ou ma façon de coder dans mon fichier css ou alors une mauvaise manière de lier mes fichiers...

                    Cordialement.

                    MARTY Valentin

                    • Partager sur Facebook
                    • Partager sur Twitter
                      3 avril 2019 à 20:29:05

                      J'ai une question par rapport des commentaires sur le CV en ligne. Deux eleves sur trois ont fait des commentaires que l'image n'est pas clicable. Je conteste ces notes je reclame la revision par un proff.

                      Merci

                      • Partager sur Facebook
                      • Partager sur Twitter
                        4 avril 2019 à 9:14:40

                        Bonjour,

                        Merci de contacter directement OpenClassrooms : hello@openclassrooms.com

                        • Partager sur Facebook
                        • Partager sur Twitter
                        Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL
                          5 avril 2019 à 20:05:12

                          @VLT/88

                          Sans ton code c'est compliqué de se prononcer.

                          • Partager sur Facebook
                          • Partager sur Twitter
                            5 avril 2019 à 23:14:54

                            C'est déjà reglé. La question est clô
                            • Partager sur Facebook
                            • Partager sur Twitter
                              6 avril 2019 à 22:39:52

                              "Avecalign-items , nous pouvons changer leur alignement sur l'axe secondaire"

                              Et.. ça ne marche pas.. J'ai essayé dans les differnts navigateurs, mais non.. toujours le même resultat. Voilà le code

                              #conteneur
                              {
                              display: flex;
                              flex-wrap: wrap;
                              justify-content: center;
                              align-items: center;
                              }
                              • Partager sur Facebook
                              • Partager sur Twitter
                                15 avril 2019 à 9:28:19

                                Bonjour, 

                                J'ai pas réussi l'activité sur l'amélioration du CV, du coup je n'ai pas eu le Certificat. Comment faire pour refaire l'activité ou le cours en entier, J'ai essayé de refaire le cours mais les activités que j'ai faites sont toujours là en plus de celle que j'ai ratée. Merci

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  15 avril 2019 à 10:20:33

                                  Bonjour,

                                  Il n'est pas possible de refaire une activité ratée. C'est normal car la correction est donnée avec la note, permettre de refaire l'activité ensuite n'aurait aucun sens.

                                  Tu peux toujours essayer de plaider ta cause par mail au support mais tu dois être conscient que ta demande peut être refusée.

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                  Je ne réponds pas aux messages privés.
                                    22 avril 2019 à 22:43:38

                                    Bonjour à tous,

                                    je suis le MOOC HTLM/CSS, j'ai télécharger sublime texte3 et lorsque j'écris la balise <htlm> ou <body> ou <head>, le texte reste en blanc!!!! même en faisant un copier coller du code des cours mooc ( qui sont bien en couleur) il me tout en blanc!!! quelqu'un peut il m'aider? doit y avoir un réglage....

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      23 avril 2019 à 8:56:36

                                      Bonjour,

                                      Il suffit d'enregistrer ton fichier au format HTML.

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                      Je ne réponds pas aux messages privés.
                                        24 avril 2019 à 18:33:41

                                        Il faut que tu crées un document que tu nomme html et ainsi tu l'ouvre avec sublime text3
                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          25 avril 2019 à 16:24:16

                                          quelle est la fonction qui permert de rendre un site web compatible avec le tele ,tablette......??
                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            25 avril 2019 à 16:38:07

                                            bonjour,

                                            Ce n'est pas un fonction à proprement parler.

                                            C'est plus l'organisation de ses éléments, on parleras donc plus de son coté responsiv

                                            • Partager sur Facebook
                                            • Partager sur Twitter

                                            Compos sui.

                                              26 avril 2019 à 9:03:37

                                              Effectivement ce n'est pas une fonction, informatiquement parlant, du genre: getElementbyId(). C'est une règle CSS que l'on pose avec le selecteur @media de la famille des media queries. Ces sélecteurs organisent la capacité responsive d'un site, on parle alors de responsive design.

                                              Doc:

                                              https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries

                                              Cours OCR:

                                              https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607616-utilisez-le-responsive-design-avec-les-media-queries

                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                26 avril 2019 à 12:15:47

                                                Bonjour

                                                ça dépend mais à la base c'est du css maintenant on peut aussi utiliser su javascript

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  27 avril 2019 à 9:23:28

                                                  Et c'est pas trop galère en JS? CSS c'est utra simple, reste le calibrage et , j'imagine, peut être aussi plus léger pour le navigateur?

                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    3 mai 2019 à 9:55:06

                                                    Bonjour à tous j"espère que vous allez bien, j'ai un soucis si vous le voulez bien, je vais l'exposer .

                                                    J'ai achevé le cours HTML5/CSS3 mais le certificat ne pas été délivré est ce parce que J'ai pas reussi l'exercice "organiser son cv" ?

                                                    Toute fois je veux bien savoir comment proceder pour reprendre l'exercice afin de le valider

                                                    Merci pour la disponibilité 

                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                      3 mai 2019 à 9:59:35

                                                      Bonjour,

                                                      Hello @OC

                                                      Afin de vous assurer d'avoir une réponse le plus rapidement possible, je vous invite à directement contacter l'équipe du site via l'adresse hello@openclassrooms.com. En effet, l'équipe du site ne passant que très rarement sur les forums, il sera beaucoup plus efficace de les contacter directement.

                                                      • Partager sur Facebook
                                                      • Partager sur Twitter

                                                      Pas d'aide concernant le code par MP, le forum est là pour ça :)

                                                        3 mai 2019 à 12:08:37

                                                        Bonjour à tous !
                                                        Je viens ici demander de l'aide. Voilà je suis débutant et en train de créer plusieurs sites pour mon me constituer un portfolio. Et je suis confronté à un problème pour l'un de mes sites. Voilà j'aimerais supprimer l'effet de survol par défaut des boutons de mon menu de navigation quand je scrolle avec la barre le long de ma page. C'est l'effet bleu qu'il y a ci-dessous sur la photo.
                                                        Voilà mon code CSS. Je n'ai pris l'exemple que d'un seul élément du menu car tous les autres sont identiques. J'ai également ajouté les éléments de base du menu en premier dans mon message 
                                                        .navbar
                                                        {
                                                            background-color: black;
                                                            
                                                        }
                                                        .nav-pills .nav-item .nav-link
                                                        {
                                                            padding-right: 22px;
                                                        }
                                                        
                                                        .nav-pills .nav-link
                                                        {
                                                            color: black !important;
                                                              
                                                        }
                                                        /* II:/ Eléments de style lien par lien */
                                                        /* A: Onglet accueil */
                                                        
                                                        .nav-pills .nav-link #accueil
                                                        {
                                                            color: azure !important;
                                                            border-bottom: 3px solid;
                                                            border-color: chartreuse;
                                                            border-radius: 3px;
                                                            padding-bottom: 3px; 
                                                            font-size: 16px;
                                                        }
                                                        .nav-pills .nav-link #franckovisionjunior
                                                        {
                                                            color: azure !important;
                                                            border-bottom: 3px solid;
                                                            border-color: yellow;
                                                            border-radius: 3px;
                                                            padding-bottom: 3px; 
                                                            font-size: 16px; 
                                                        }
                                                        
                                                        .nav-pills .nav-link #franckovisionjunior:hover
                                                        {
                                                            color: darkgoldenrod !important;
                                                            border-bottom: 4px solid;
                                                            border-color: yellow;
                                                            border-radius: 3px;
                                                            padding-bottom: 3px; 
                                                            font-size: 16px;
                                                        }
                                                        Et voici le code HTML de mon menu si nécessaire :
                                                        body data-spy="scroll" data-target=".navbar" data-offset="60">
                                                            
                                                            <nav class="navbar navbar-expand-md navbar-dark sticky-top">
                                                              <a class="navbar-brand" href="#"><img src="images/logo-ex-1.png" alt="logo"></a>
                                                            
                                                            <button type="button"class="navbar-toggler" data-toggle="collapse" data-target="#myNavbar">
                                                             <i class="fas fa-bars fa-lg"></i>
                                                            </button>
                                                            
                                                            <div class="navbar navbar-collapse justify-content-end" id="myNavbar">
                                                             <ul class="nav nav-pills navbar-nav">
                                                                 <li class="nav-item"><a class="nav-link" href="#accueil"><span id="accueil">Accueil</span></a></li>
                                                                 <li class="nav-item"><a class="nav-link" href="#franckocestquoi"><span id="franckocestquoi">Le Franckovision c'est quoi ?</span></a></li>
                                                                 <li class="nav-item"><a class="nav-link" href="#festivaldoperigord"><span id="festivaldoperigord">Festival do Perigord</span></a></li>
                                                                 <li class="nav-item"><a class="nav-link" href="#franckovision"><span id="franckovision">Franckovision 2018</span></a></li>
                                                                 <li class="nav-item"><a class="nav-link" href="#franckovisionjunior"><span id="franckovisionjunior">Franckovision Junior 2018</span></a></li>
                                                            </ul>
                                                            </div>
                                                            </nav>
                                                        J'ai également configuré mon CSS de façon à ce que le texte des éléments menus passent du blanc au marron comme sur la photo ci-dessous :


                                                         sauf que le scroll de la page ne le prend absolument pas en compte et par conséquent les titres changent de couleur uniquement en passant la souris dessus mais pas en scrollant (puisqu'en scrollant ça fait uniquement ce fond de bouton bleu que je veux enlever). Donc j'aimerais  à minima enlever ce fond bleu par défaut et au mieux pouvoir le remplacer par ce que j'ai écrit dans mon code.
                                                        Voilà j'espère que vous pourrez m'aider s'il vous plait ^^ ça me bloque pas mal
                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                          4 mai 2019 à 17:28:41

                                                          Bonjour chers maître du web je voudrais savoir quel code html mer permet de mettre mon texte en zone de texte. Merci 

                                                          • 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