Partage
  • Partager sur Facebook
  • Partager sur Twitter

[HTML] [CSS] Problème d'encodage

exercice 3 cv liseret

Sujet résolu
    19 avril 2018 à 23:02:07

    Bonjour,

    vous allez dire :

    -Encore cette exercices ?!! Sur le liseret gauche du CV !!!

    Malheureusement oui, cela fait plusieurs jours que j'essaye de résoudre le problème à l'aide des sujet résolut mais c'est un échec de mon coté. Je dépose les armes devant mon code et vous demande de l'aide.... Merci a tous qui poseront une réponse sur ce sujet.....

    <!DOCTYPE html>
    <html>
        <head>
            <!-- En-tête de la page -->
            <meta charset="utf-8" />
            <link rel="stylesheet" href="CV.css" />
            <title>CV STUARTE</title>
        </head>
        <body>
                            <div id="liseret"></div>                    
                <figure class="rightmignon">    
                            <a href="images\mignon.jpg"><img src="images\mignon-mini.jpg" alt="photo mignon stuarte" title="Cliquez pour agrandir"/>
                            </a>
                </figure>
                <header>
                    <h1 class="centering"><strong>Monsieur STUARTE</strong></h1>
                                <p class="centering"><br/>Consepteur,designer et réalisateur d'objet contendant et tranchant</p>                       
                </header>  
                            <div id="conteneur"><!-- contenur pour flexbox -->
                        <section>
                            <div class="element"><!-- element 3 a droite de élément 2 -->
                    <h3><strong>Mon expériance</strong></h3>
                                    <ul>
                                        <li><strong>De -66 000 000 à -65 999 999</strong> rencontre du premier boss méchant, première création : la roue en pierre et le dinosaure à la pôele</li>
                                        <li><strong>De -200 000 à -199 999 et 2 mois</strong> rencontre du premier homme méchant création: la première tapette à ours</li>
                                        <li><strong>De 976 ans à 1025</strong> sous le reigne de BASIL II, création : l'huile à des fins militaire et création du premier comité de sécurité et prévention</li>
        	                      	    <li><strong>De 1804 à 1814</strong> époque napoléonienne conception: premier homme canon</li>
                                    </ul>
                            </div>
                        </section>
                        <section>        
                            <div class="element"><!-- element 4 a droite de élément 3 -->  	  
                    <h3>Mes compétences</h3>
                                    <ol>
                                        <li>décorateur d'interrieur</li>
                                        <li>fabrication des cocktails</li>
                                        <li>dire au boss qu'il est le meilleur</li>
                                        <li>faire la promotion du boss</li>
                                    </ol> 
                            </div><!--fermeture element 4 a droite de élément 3 -->
                        </section>
                        <section>    
                            <div class="element"><!-- element 5 a droite de élément 4 -->  	
                    <h3>Ma formation</h3>
                                <p><span class="formation">Autodidacte et OpenClasserooms</span></p>
                            </div><!-- fermeture element 5 a droite de élément 4 -->
                        </section>
                        <section>    
                            <div class="element">  
                    
                    <h3>Divertissement</h3>
                                    <ul>
                                        <li>jeux de société</li>
                                        <li>peinture</li>
                                        <li>jeux vidéo</li>
                                    </ul>
                            </div>
                        </section>
                            </div><!-- fermeture contenur pour flexbox -->
        </body>
    
    </html>
    @font-face { /* Définition d'une nouvelle police nommée devroye_*/
        font-family: 'devroye_regular';
        src: url('police/devroye_-webfont.eot');
        src: url('police/devroye_-webfont.eot?#iefix') format('embedded-opentype'),
             url('police/devroye_-webfont.woff') format('woff'),
             url('police/devroye_-webfont.ttf') format('truetype'),
             url('police/devroye_-webfont.svg#devroye_regular') format('svg');
    }
    .centering
    {
    	text-align: center;
    } 
    body /*1 ligne mise en police + 2 ligne image de font*/
    {
        font-family: 'devroye_regular', Arial, serif;
        background-image: url("images/beige001.jpg"); 
    }
    .rightmignon      
    {
        float: right;
        border: 2px black solid;
        box-shadow: 6px 6px 6px black;
    }
    h3 /*couleur rouge*/
    {
    	color: red
    }
    #conteneur
    {
    	display: flex;
    	flex-direction: nowrap
    }
    .element
    {
    	flex: 
    }
    #liseret
    {
        position: absolute;
        bottom: 0;
        border-radius: 0px 0px 5px 5px;
        height: 100%;
        padding-top: 15px;
        padding-left: 4px;
        background-color: rgba(24,24,24,0.8);
        color: white;
        font-size: 0.8em;
        width:15%;   
    }

    voici les messages d'erreures que je ne comprend pas.... il y a pas une version VF ??? ;)

    1. WarningConsider adding a lang attribute to the html start tag to declare the language of this document.

      From line 1, column 16; to line 2, column 6

      TYPE html><html> <

      For further guidance, consult Declaring the overall language of a page and Choosing language tags.

      If the HTML checker has misidentified the language of this document, please file an issue report or send e-mail to report the problem.

    2. ErrorBad value images\mignon.jpg for attribute href on element a: Backslash ("\") used as path segment delimiter.

      From line 12, column 25; to line 12, column 52

      <a href="images\mignon.jpg"><img s

    3. ErrorBad value images\mignon-mini.jpg for attribute src on element img: Backslash ("\") used as path segment delimiter.

      From line 12, column 53; to line 12, column 144

      gnon.jpg"><img src="images\mignon-mini.jpg" alt="photo mignon stuarte" title="Cliquez pour agrandir"/>



    -
    Edité par aldricchalle 19 avril 2018 à 23:03:17

    • Partager sur Facebook
    • Partager sur Twitter
      20 avril 2018 à 1:15:16

      Pour le premier problème : L'attribut HTML est censé (ce n'est pas obligatoire, mais c'est préférable) comporter un attribut « lang » indiquant la langue utilisée dans le document. Ici, l'avertissement disparaît en utilisant :

      <html lang="fr>


      Pour le deuxième problème, le séparateur de dossier que vous utilisez est un antislash « \ » alors que ce devrait être un slash « / ».

      <a href="images/mignon.jpg">

      Le troisième problème est identique au deuxième.

      <img src="images/mignon-mini.jpg" alt="photo mignon stuarte" title="Cliquez pour agrandir">


      Par ailleurs, il faut apprendre à bien lire les avertissements et les erreurs, ils décrivent souvent très précisément et très clairement le problème. Et enfin, attention au titre, vous prêtez surement au mot « encodage » un sens qui n'est pas son sens courant parmi les développeurs.



      -
      Edité par Disturb4d 20 avril 2018 à 1:18:20

      • Partager sur Facebook
      • Partager sur Twitter
      Maxime EYCHENNE
        20 avril 2018 à 11:55:33

        Merci pour tes réponse, mais pour ce qui est du liseré côté gauche qui passe au-dessus du texte ? Je cherche  à faire décaler tout le texte a droite du liseré.
        • Partager sur Facebook
        • Partager sur Twitter
          20 avril 2018 à 13:16:53

          Bonjour,

          Il me semble que 'id" ne puisse être utilisé qu'une seul fois dans la page.

          Hors, tu as id="liseret", et id="conteneur".

          Et tu peux constater sur ton fichier CSS que ta balise id liseret est noté en deuxième position.

          Remplace id par class et dis nous si cela fonctionne.

          A+

          -
          Edité par Chris94 20 avril 2018 à 13:17:50

          • Partager sur Facebook
          • Partager sur Twitter
            20 avril 2018 à 13:28:09

            Hello,

            Chris94 : seulement si l' iD est le même, un id de même nom est unique par page, mais tu peux avoir plusieurs id différents sans soucis.

            <p id="foo">...</p> <p id="bar">...</p> <p id="footer">...</p> = Valide

            <p id="foo">...</p> <p id="bar">...</p> <p id="foo">...</p> = invalide car 2 fois le même id="foo"

            Par contre préférer les classes pour le css est effectivement plus approprié, et les id pour les #ancres

            Je recommande -> https://www.emmanuelbeziat.com/blog/principes-du-css-poids-des-declarations 

            -
            Edité par Lucky13 20 avril 2018 à 13:33:15

            • Partager sur Facebook
            • Partager sur Twitter
              20 avril 2018 à 23:29:36

              après avoir fait les changements j'ai toujours le même problème 

              toujours le texte sur le liseret...

              • Partager sur Facebook
              • Partager sur Twitter
                21 avril 2018 à 9:23:44

                Hey,

                Je ne sais pas si c'est la meilleure méthode à utiliser mais je sais que j'avais utilisé float pour que le liseré soit à gauche sans être par dessus le reste.

                Essaies donc de créer une div qui contient tout le reste de ta page (à part le liseré) et dans ton css mais float à l'ID liseré.

                En espérant t'avoir aidé

                • Partager sur Facebook
                • Partager sur Twitter

                Il y a deux manières d’écrire des programmes sans erreurs ; seule la troisième marche. - Alan J. Perlis-

                  23 avril 2018 à 21:34:03

                  merci à tous de votre aide. J ai fait ce qu'a dit LukaM.

                  Voici le code final pour aidé les personnes qui ferons les mêmes recherche que moi.... 

                  <!DOCTYPE html>
                  <html lang="fr">
                      <head>
                          <!-- En-tête de la page -->
                          <meta charset="utf-8" />
                          <link rel="stylesheet" href="CV.css" />
                          <title>CV STUARTE</title>
                      </head>
                      <body>
                              <div id="liseret"></div>
                              <figure class="rightmignon">    
                                          <a href="images/mignon.jpg"><img src="images/mignon-mini.jpg" alt="photo mignon stuarte" title="Cliquez pour agrandir"/>
                                          </a>
                              </figure>
                              <div id="blocpage">                                    
                              <header>
                                  <h1 class="centering"><strong>Monsieur STUARTE</strong></h1>
                                              <p class="centering"><br/>Consepteur,designer et réalisateur d'objet contendant et tranchant</p>                       
                              </header>  
                                          <div id="conteneur"><!-- contenur pour flexbox -->
                                      <section>
                                          <div class="element"><!-- element 3 a droite de élément 2 -->
                                  <h3><strong>Mon expériance</strong></h3>
                                                  <ul>
                                                      <li><strong>De -66 000 000 à -65 999 999</strong> rencontre du premier boss méchant, première création : la roue en pierre et le dinosaure à la pôele</li>
                                                      <li><strong>De -200 000 à -199 999 et 2 mois</strong> rencontre du premier homme méchant création: la première tapette à ours</li>
                                                      <li><strong>De 976 ans à 1025</strong> sous le reigne de BASIL II, création : l'huile à des fins militaire et création du premier comité de sécurité et prévention</li>
                      	                      	    <li><strong>De 1804 à 1814</strong> époque napoléonienne conception: premier homme canon</li>
                                                  </ul>
                                          </div>
                                      </section>
                                      <section>        
                                          <div class="element"><!-- element 4 a droite de élément 3 -->  	  
                                  <h3>Mes compétences</h3>
                                                  <ol>
                                                      <li>décorateur d'interrieur</li>
                                                      <li>fabrication des cocktails</li>
                                                      <li>dire au boss qu'il est le meilleur</li>
                                                      <li>faire la promotion du boss</li>
                                                  </ol> 
                                          </div><!--fermeture element 4 a droite de élément 3 -->
                                      </section>
                                      <section>    
                                          <div class="element"><!-- element 5 a droite de élément 4 -->  	
                                  <h3>Ma formation</h3>
                                              <p><span class="formation">Autodidacte et OpenClasserooms</span></p>
                                          </div><!-- fermeture element 5 a droite de élément 4 -->
                                      </section>
                                      <section>    
                                          <div class="element">  
                                  
                                  <h3>Divertissement</h3>
                                                  <ul>
                                                      <li>jeux de société</li>
                                                      <li>peinture</li>
                                                      <li>jeux vidéo</li>
                                                  </ul>
                                          </div>
                                      </section>
                                          </div><!-- fermeture contenur pour flexbox -->
                              </div>
                      </body>
                  
                  </html>
                  @font-face { /* Définition d'une nouvelle police nommée devroye_*/
                      font-family: 'devroye_regular';
                      src: url('police/devroye_-webfont.eot');
                      src: url('police/devroye_-webfont.eot?#iefix') format('embedded-opentype'),
                           url('police/devroye_-webfont.woff') format('woff'),
                           url('police/devroye_-webfont.ttf') format('truetype'),
                           url('police/devroye_-webfont.svg#devroye_regular') format('svg');
                  }
                  .centering
                  {
                  	text-align: center;
                  } 
                  body /*1 ligne mise en police + 2 ligne image de font*/
                  {
                      font-family: 'devroye_regular', Arial, serif;
                      background-image: url("images/beige001.jpg"); 
                  }
                  .rightmignon      
                  {
                      float: right;
                      border: 2px black solid;
                      box-shadow: 6px 6px 6px black;
                  }
                  h3 /*couleur rouge*/
                  {
                  	color: red
                  }
                  #conteneur
                  {
                  	display: flex;
                  	flex-direction: nowrap
                  
                  }
                  .element
                  {
                  	flex: 
                  }
                  #liseret
                  {
                      position: absolute;
                      height: auto;
                      background-color: rgba(24,24,24,0.8);
                      width:15%;
                      bottom: 0px;
                      top:0px; 
                  }
                  #blocpage
                  {
                      width: 70%;
                      margin: auto;
                  }

                  @+


                  • Partager sur Facebook
                  • Partager sur Twitter

                  [HTML] [CSS] Problème d'encodage

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                  • Editeur
                  • Markdown