Partage
  • Partager sur Facebook
  • Partager sur Twitter

Placement d'éléments html via css

Sujet résolu
Fanfois
    15 octobre 2024 à 16:38:05

    Bonjour,

    J'ai fait une station météo mais je suis une buse en développement web. Comme j'ai quand même eu envie de faire un truc sympa, j'ai trouvé ça comme exemple :

    https://www.shutterstock.com/fr/video/clip-1013396639-weather-forecast-interface---autumn-front-view

    J'ai essayé de le reproduire à la main moi-même, et je dois dire que même si c'est loin d'être parfait, je suis plutôt content de moi car j'ai réussi à m'en approcher un peu, c'était pas gagné ! Maintenant j'ai encore un souci que n'arrive pas à résoudre tout seul, d'où ma question ici.

    Voici le résultat pour le moment (toutes les valeurs sont en dur, une fois le design OK je variabiliserai tout ça !) :

    Problème : les températures min et max (5 et 13°) avec les flèches représentants les min et max ne s'alignent pas correctement. J'aimerai qu'ils soient un peu collés comme dans l'exemple d'interface trouvée sur shutterstock. Tout se passe dans le grid "box1-1-2" et j'ai essayé plein de trucs mais visiblement je n'ai pas tout compris encore.

    Quelqu'un pourrait-il m'aider svp ? Voici les pages html et css :

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link href="./css/style-travail.css" rel="stylesheet" />
    <link href="./css/weather-icons.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="box1">
        <div class="box1-1">
          
          <div class="box1-1-1">
            <p class="infos-jour jour">Lundi 30 septembre 2024</p>
          </div>
          
          <div class="box1-1-2" >
            
              <img src="img/static/fleche-bas.png"
                class="svg"
                width="10"
                height="10"
                style="align-self: end;">
            
              <p class="infos-jour temp-min-max">5°</p>
            
              <img src="img/static/fleche-haut.png"
              class="svg"
              width="10"
              height="10">
            
            <div>
              <p class="infos-jour temp-min-max">13°</p>
            </div>
          </div>
          
          <div class="box1-1-3">
            <p class="infos-jour" style="float:left">
              <img src="img/static/wi-thermometer.svg"
                   class="svg"
                   width="40"
                   height="40"></p>
            <p class="infos-jour temp left">12°</p>
            <img src="img/animated/wi-direction-down-right.svg"
              class="svg left"
              width="30"
              height="30">
            <p class="infos-jour vent">36 km/h</p>
          </div>
          
          <div class="box1-1-4">
            <p class="infos-jour left">
              <img src="img/static/home.svg"
                class="svg"
                width="30"
                height="30"></p>
            <p class="infos-jour temp-int left">20,6°</p>
            <p class="infos-jour temp-int left">58,4%</p>
          </div>
        </div>
        <div class="box1-2 weather-icon">
          <img src="img/animated/01d.svg"
          class="svg"
          width="100"
          height="100"></div>
      </div>
      <div class="box2">
        <div class="box2-1">
          <div class="box2-1-1">Mardi</div>
          <div class="box2-1-2">Mercredi</div>
          <div class="box2-1-3">Jeudi</div>
          <div class="box2-1-4">Vendredi</div>
          <div class="box2-1-5">Samedi</div>
          <div class="box2-1-6">Dimanche</div>
          <div class="box2-1-10"><img src="img/animated/02d.svg"
            class="svg"
            width="30"
            height="30"></div>
          <div class="box2-1-20"><img src="img/animated/03d.svg"
            class="svg"
            width="30"
            height="30"></div>
          <div class="box2-1-30"><img src="img/animated/04d.svg"
            class="svg"
            width="30"
            height="30"></div>
          <div class="box2-1-40"><img src="img/animated/09d.svg"
            class="svg"
            width="30"
            height="30"></div>
          <div class="box2-1-50"><img src="img/animated/10d.svg"
            class="svg"
            width="30"
            height="30"></div>
          <div class="box2-1-60"><img src="img/animated/11d.svg"
            class="svg"
            width="30"
            height="30"></div>
          <div class="box2-1-100">13°</div>
          <div class="box2-1-200">15°</div>
          <div class="box2-1-300">12°</div>
          <div class="box2-1-400">12°</div>
          <div class="box2-1-500">15°</div>
          <div class="box2-1-600">14°</div>
        </div>
      </div>
      <div class="box3">
        <div class="box3-1"><p class="humidite">Humidité</p></div>
        <div class="box3-2">
          
          <!-- https://stackoverflow.com/questions/50649381/svg-arc-progress-bar-with-constant-stroke-dasharray-object -->
          <div id="progress">
            <svg viewbox="0 0 110 100">
              <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
                <stop offset="0%" stop-color="#56c4fb" />
                <stop offset="100%" stop-color="#0baeff" />
              </linearGradient>
              <path class="grey" d="M30,90 A40,40 0 1,1 80,90" fill='none' />
              <path id="blue" fill='none'  class="blue" d="M30,90 A40,40 0 1,1 80,90" />
              
              <text x="50%" y="65%" dominant-baseline="middle" text-anchor="middle" style="font-size:17px;">70%</text>
              
            </svg>
            <script src="./js/script.js"></script>
          </div>
          
        </div>
      </div>
      <!--<div class="box4">
        <div class="box4-1"><p class="humidite">Vent</p></div>
        <div class="box4-2"><img src="img/animated/wind-speed.svg"
          class="svg"
          width="40"
          height="40"></div>
        <div class="box4-4">
          <div class="box4-4-1"><img src="img/animated/wi-direction-down-right.svg"
            class="svg"
            width="30"
            height="30"></div>
          <div class="box4-4-2">36 km/h</div>
        </div>
      </div>-->
      <div class="box5">
        <div class="box5-1">Levé</div>
        <div class="box5-10"><img src="img/animated/sunrise.svg"
          class="svg"
          width="30"
          height="30"></div>
        <div class="box5-2">Couché</div>
        <div class="box5-20"><img src="img/animated/sunset.svg"
          class="svg"
          width="30"
          height="30"></div>
        <div class="box5-100">06:37</div>
        <div class="box5-200">20:12</div>
      </div>
    </div>
  </body>
</html>

    body {
  background-image: url('../img/static/fond.png');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
  color: white;
}

.svg {
  filter: invert(93%) sepia(91%) saturate(35%) hue-rotate(217deg) brightness(108%) contrast(100%);
}

.container {  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "box1 box3"
    "box1 box3"
    "box1 box5"
    "box2 box5"
    "box2 ."
    "box2 .";
}

.box1 {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 255px;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "box1-1 box1-2";
  grid-area: box1;
}

.box1-1 {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px 50px 50px 35px;
  gap: 0px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "box1-1-1"
    "box1-1-2"
    "box1-1-3"
    "box1-1-4";
  grid-area: box1-1;
}

.box1-1-1 {
  /* justify-content: center; */
  border-left:40px;
  align-content: center;
  grid-area: box1-1-1;
}

.box1-1-2 {
  grid-area: box1-1-2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}

.box1-1-3 { grid-area: box1-1-3; }

.box1-1-4 { grid-area: box1-1-4; }

/*.box1-1-5 { grid-area: box1-1-5; }*/

.box1-2 { grid-area: box1-2; }

.box2 {  display: grid;
  grid-template-columns: 1fr 2.5fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". box2-1 .";
  grid-area: box2;
}

.box2-1 {  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(6, 30px);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "box2-1-1 box2-1-10 box2-1-100"
    "box2-1-2 box2-1-20 box2-1-200"
    "box2-1-3 box2-1-30 box2-1-300"
    "box2-1-4 box2-1-40 box2-1-400"
    "box2-1-5 box2-1-50 box2-1-500"
    "box2-1-6 box2-1-60 box2-1-600";
  grid-area: box2-1;
}

.box2-1-1 { grid-area: box2-1-1; }

.box2-1-2 { grid-area: box2-1-2; }

.box2-1-3 { grid-area: box2-1-3; }

.box2-1-4 { grid-area: box2-1-4; }

.box2-1-5 { grid-area: box2-1-5; }

.box2-1-6 { grid-area: box2-1-6; }

.box2-1-10 { grid-area: box2-1-10; }

.box2-1-20 { grid-area: box2-1-20; }

.box2-1-30 { grid-area: box2-1-30; }

.box2-1-40 { grid-area: box2-1-40; }

.box2-1-50 { grid-area: box2-1-50; }

.box2-1-60 { grid-area: box2-1-60; }

.box2-1-100 { grid-area: box2-1-100; }

.box2-1-200 { grid-area: box2-1-200; }

.box2-1-300 { grid-area: box2-1-300; }

.box2-1-400 { grid-area: box2-1-400; }

.box2-1-500 { grid-area: box2-1-500; }

.box2-1-600 { grid-area: box2-1-600; }

.box3 {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 30px 120px;
  gap: 0px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "box3-1"
    "box3-2";
  grid-area: box3;
  border-left:40px;
  border-bottom: 100px;
  align-content: center;
  margin-bottom: 10px;
  margin-top: 25px;
}

.box3-1 { grid-area: box3-1; }

.box3-2 { grid-area: box3-2; }

.box4 {  display: grid;
  grid-template-rows: 100px;
}


.box5 {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: repeat(4, 30px);
  gap: 0px 0px; 
  grid-template-areas: 
    "box5-1 box5-10 box5-100"
    "box5-2 box5-20 box5-200"
    ". . ."
    ". . ."; 
  grid-area: box5; 
  margin-top: 20px;
}
.box5-1 { grid-area: box5-1; }
.box5-10 { grid-area: box5-10; }
.box5-2 { grid-area: box5-2; }
.box5-20 { grid-area: box5-20; }
.box5-100 { grid-area: box5-100; }
.box5-200 { grid-area: box5-200; }

.infos-jour {
  text-indent: 50px;
  margin:0
}

.jour {
  font-size: 1.5em;
}

.temp-min-max {
  font-size: 2em;
}

.temp {
  font-size: 2em;
  text-indent: 10px;
}

.temp-int {
  text-indent: 10px;
  line-height:200%;
}

.weather-icon {
  text-indent: 100px;
}

.humidity {
  text-indent: 50px;
  margin:0;
  font-size: 1em;
}

.vent {
  font-size: 2em;
  text-indent: 10px;
}

.left {
  float: left;
}

.right {
  float: right;
}

svg {
  height: 20vh;
  margin: auto;
  display: block;
}

path {
  stroke-linecap: round;
  stroke-width: 6;
}

path.grey {
  stroke: #e7e7e8;
}

path.blue {
  stroke: url(#gradient);
  stroke-dasharray: 198;
  stroke-dashoffset: 198;
  animation: dash 3s ease-out forwards;
}

/* @keyframes dash {
  to {
    stroke-dashoffset: 1; /* <---- changed to "1" from "0"  
  }
} */

    Merci beaucoup pour votre aide !


    • Partager sur Facebook
    • Partager sur Twitter
    gcyrillus
    • HTML / CSS
      16 octobre 2024 à 11:43:42

      Bonjour,

       retirer ou modifier le style en ligne pour l'image de la fleche bas , par exemple en             

      <img src="img/static/fleche-bas.png"
                class="svg"
                width="10"
                height="10"
                style="margin-top:1em">



      • Partager sur Facebook
      • Partager sur Twitter

      fan de PluXml , cuisinier et codeur amateur.Thèmes pour PluXml ? Oui Des plugins? Oui

      Fanfois
        17 octobre 2024 à 10:30:53

        Bonjour,

        Merci pour votre réponse. Le margin-top replace la flèche au bon endroit verticalement, ça c'est déjà bien :)

        Par contre, les 4 éléments (flèche bas, température basse, flèche haut et température haute) sont toujours très espacées. Comment les rapprocher svp ?

        Merci !

        • Partager sur Facebook
        • Partager sur Twitter
        gcyrillus
        • HTML / CSS
          17 octobre 2024 à 13:20:03

          Sans donner de solution, je te propose de mettre sur tes éléments un outline pour visualiser les espaces occupés par tes balises:  `.container *{outline : solid 1 px red}` . Tu peut le faire boite par boîte si tu préfères. Cela t'aidera à voir et trouver les css en causes. 

          Cdt

          • Partager sur Facebook
          • Partager sur Twitter

          fan de PluXml , cuisinier et codeur amateur.Thèmes pour PluXml ? Oui Des plugins? Oui

          Fanfois
            17 octobre 2024 à 15:31:19

            Bonjour,

            Merci beaucoup pour cette astuce ! J'ai pu en effet mettre des marges et tout est OK maintenant :)

            Dernière question, j'ai récupéré le code pour générer le graphique du pourcentage d'humidité, mais je n'arrive pas à mettre le texte en blanc :

            Une idée svp ?

            Voici le HTML

            <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link href="./css/style-travail.css" rel="stylesheet" />
    <link href="./css/weather-icons.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="box1">
        <div class="box1-1">
          
          <div class="box1-1-1">
            <p class="infos-jour jour">Lundi 30 septembre 2024</p>
          </div>
          
          <div class="box1-1-2" >
            
              <img src="img/static/fleche-bas.png"
                class="svg"
                width="10"
                height="10"
                style="margin-top:1em">
            
              <p class="temp-min-max" style="margin: 0;">5°</p>
            
              <img src="img/static/fleche-haut.png"
              class="svg"
              width="10"
              height="10">
            
            <div>
              <p class="temp-min-max" style="margin: 0;">13°</p>
            </div>
          </div>
          
          <div class="box1-1-3">
            <p class="infos-jour" style="float:left">
              <img src="img/static/wi-thermometer.svg"
                   class="svg"
                   width="40"
                   height="40"></p>
            <p class="infos-jour temp left">12°</p>
            <img src="img/animated/wi-direction-down-right.svg"
              class="svg left"
              width="30"
              height="30">
            <p class="infos-jour vent">36 km/h</p>
          </div>
          
          <div class="box1-1-4">
            <p class="infos-jour left">
              <img src="img/static/home.svg"
                class="svg"
                width="30"
                height="30"></p>
            <p class="infos-jour temp-int left">20,6°</p>
            <p class="infos-jour temp-int left">58,4%</p>
          </div>
        </div>
        <div class="box1-2 weather-icon">
          <img src="img/animated/01d.svg"
          class="svg"
          width="100"
          height="100"></div>
      </div>
      <div class="box2">
        <div class="box2-1">
          <div class="box2-1-1 center">Mardi</div>
          <div class="box2-1-2 center">Mercredi</div>
          <div class="box2-1-3 center">Jeudi</div>
          <div class="box2-1-4 center">Vendredi</div>
          <div class="box2-1-5 center">Samedi</div>
          <div class="box2-1-6 center">Dimanche</div>
          <div class="box2-1-10"><img src="img/animated/02d.svg"
            class="svg"
            width="30"
            height="30"></div>
          <div class="box2-1-20"><img src="img/animated/03d.svg"
            class="svg"
            width="30"
            height="30"></div>
          <div class="box2-1-30"><img src="img/animated/04d.svg"
            class="svg"
            width="30"
            height="30"></div>
          <div class="box2-1-40"><img src="img/animated/09d.svg"
            class="svg"
            width="30"
            height="30"></div>
          <div class="box2-1-50"><img src="img/animated/10d.svg"
            class="svg"
            width="30"
            height="30"></div>
          <div class="box2-1-60"><img src="img/animated/11d.svg"
            class="svg"
            width="30"
            height="30"></div>
          <div class="box2-1-100 center">13°</div>
          <div class="box2-1-200 center">15°</div>
          <div class="box2-1-300 center">12°</div>
          <div class="box2-1-400 center">12°</div>
          <div class="box2-1-500 center">15°</div>
          <div class="box2-1-600 center">14°</div>
        </div>
      </div>
      <div class="box3">
        <div class="box3-1"><p class="humidite">Humidité</p></div>
        <div class="box3-2">
          
          <!-- https://stackoverflow.com/questions/50649381/svg-arc-progress-bar-with-constant-stroke-dasharray-object -->
          <div id="progress">
            <svg viewbox="0 0 110 100">
              <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
                <stop offset="0%" stop-color="#56c4fb" />
                <stop offset="100%" stop-color="#0baeff" />
              </linearGradient>
              <path class="grey" d="M30,90 A40,40 0 1,1 80,90" fill='none' />
              <path id="blue" fill='none'  class="blue" d="M30,90 A40,40 0 1,1 80,90" />
              
              <text x="50%" y="65%" dominant-baseline="middle" text-anchor="middle" style="font-size:19px;">70%</text>
              
            </svg>
            <script src="./js/script.js"></script>
          </div>
          
        </div>
      </div>
      <!--<div class="box4">
        <div class="box4-1"><p class="humidite">Vent</p></div>
        <div class="box4-2"><img src="img/animated/wind-speed.svg"
          class="svg"
          width="40"
          height="40"></div>
        <div class="box4-4">
          <div class="box4-4-1"><img src="img/animated/wi-direction-down-right.svg"
            class="svg"
            width="30"
            height="30"></div>
          <div class="box4-4-2">36 km/h</div>
        </div>
      </div>-->
      <div class="box5">
        <div class="box5-1 center">Levé</div>
        <div class="box5-10"><img src="img/animated/sunrise.svg"
          class="svg"
          width="30"
          height="30"></div>
        <div class="box5-2 center">Couché</div>
        <div class="box5-20"><img src="img/animated/sunset.svg"
          class="svg"
          width="30"
          height="30"></div>
        <div class="box5-100 center">06:37</div>
        <div class="box5-200 center">20:12</div>
      </div>
    </div>
  </body>
</html>

            Et le CSS

            body {
  background-image: url('../img/static/fond.png');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
  color: white;
}

.svg {
  filter: invert(93%) sepia(91%) saturate(35%) hue-rotate(217deg) brightness(108%) contrast(100%);
}

.container {  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "box1 box3"
    "box1 box3"
    "box1 box5"
    "box2 box5"
    "box2 ."
    "box2 .";
}

.box1 {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 255px;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "box1-1 box1-2";
  grid-area: box1;
}

.box1-1 {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px 50px 50px 35px;
  gap: 0px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "box1-1-1"
    "box1-1-2"
    "box1-1-3"
    "box1-1-4";
  grid-area: box1-1;
}

.box1-1-1 {
  /* justify-content: center; */
  border-left:40px;
  align-content: center;
  grid-area: box1-1-1;
}

.box1-1-2 {
  grid-area: box1-1-2;
  display: grid;
  grid-template-columns: repeat(4, 30px);
  justify-items: center;
  margin-left: 56px;
}

.box1-1-3 { grid-area: box1-1-3; }

.box1-1-4 {
  grid-area: box1-1-4;
  margin-left: 5px;
}

/*.box1-1-5 { grid-area: box1-1-5; }*/

.box1-2 { grid-area: box1-2; }

.box2 {  display: grid;
  grid-template-columns: 1fr 2.5fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". box2-1 .";
  grid-area: box2;
}

.box2-1 {  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(6, 30px);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "box2-1-1 box2-1-10 box2-1-100"
    "box2-1-2 box2-1-20 box2-1-200"
    "box2-1-3 box2-1-30 box2-1-300"
    "box2-1-4 box2-1-40 box2-1-400"
    "box2-1-5 box2-1-50 box2-1-500"
    "box2-1-6 box2-1-60 box2-1-600";
  grid-area: box2-1;
}

.box2-1-1 { grid-area: box2-1-1; }

.box2-1-2 { grid-area: box2-1-2; }

.box2-1-3 { grid-area: box2-1-3; }

.box2-1-4 { grid-area: box2-1-4; }

.box2-1-5 { grid-area: box2-1-5; }

.box2-1-6 { grid-area: box2-1-6; }

.box2-1-10 { grid-area: box2-1-10; }

.box2-1-20 { grid-area: box2-1-20; }

.box2-1-30 { grid-area: box2-1-30; }

.box2-1-40 { grid-area: box2-1-40; }

.box2-1-50 { grid-area: box2-1-50; }

.box2-1-60 { grid-area: box2-1-60; }

.box2-1-100 { grid-area: box2-1-100; }

.box2-1-200 { grid-area: box2-1-200; }

.box2-1-300 { grid-area: box2-1-300; }

.box2-1-400 { grid-area: box2-1-400; }

.box2-1-500 { grid-area: box2-1-500; }

.box2-1-600 { grid-area: box2-1-600; }

.box3 {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 30px 120px;
  gap: 0px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "box3-1"
    "box3-2";
  grid-area: box3;
  border-left:40px;
  border-bottom: 100px;
  align-content: center;
  margin-bottom: 10px;
  margin-top: 25px;
}

.box3-1 { grid-area: box3-1; }

.box3-2 { grid-area: box3-2; }

.box4 {  display: grid;
  grid-template-rows: 100px;
}


.box5 {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: repeat(4, 30px);
  gap: 0px 0px; 
  grid-template-areas: 
    "box5-1 box5-10 box5-100"
    "box5-2 box5-20 box5-200"
    ". . ."
    ". . ."; 
  grid-area: box5; 
  margin-top: 20px;
}
.box5-1 { grid-area: box5-1; }
.box5-10 { grid-area: box5-10; }
.box5-2 { grid-area: box5-2; }
.box5-20 { grid-area: box5-20; }
.box5-100 { grid-area: box5-100; }
.box5-200 { grid-area: box5-200; }

.infos-jour {
  text-indent: 50px;
  margin:0
}

.jour {
  font-size: 1.5em;
}

.temp-min-max {
  font-size: 2em;
}

.temp {
  font-size: 2em;
  text-indent: 10px;
}

.temp-int {
  text-indent: 10px;
  line-height:200%;
  font-size: 1.2em;
}

.weather-icon {
  text-indent: 100px;
}

.humidity {
  text-indent: 50px;
  margin:0;
  font-size: 1em;
}

.vent {
  font-size: 2em;
  text-indent: 10px;
}

.left {
  float: left;
}

.right {
  float: right;
}

.center {
  align-content: center;
}

svg {
  height: 20vh;
  margin: auto;
  display: block;
}

path {
  stroke-linecap: round;
  stroke-width: 6;
}

path.grey {
  stroke: #e7e7e8;
}

path.blue {
  stroke: url(#gradient);
  stroke-dasharray: 198;
  stroke-dashoffset: 198;
  animation: dash 3s ease-out forwards;
}

/* @keyframes dash {
  to {
    stroke-dashoffset: 1; /* <---- changed to "1" from "0"  
  }
} */


            Merci et bonne journée !

            • Partager sur Facebook
            • Partager sur Twitter
            gcyrillus
            • HTML / CSS
              17 octobre 2024 à 15:45:56

              pour la couleur de la balise text du svg : 
              svg text {fill:white}
              Voilou :)
              • Partager sur Facebook
              • Partager sur Twitter

              fan de PluXml , cuisinier et codeur amateur.Thèmes pour PluXml ? Oui Des plugins? Oui

              Fanfois
                17 octobre 2024 à 16:19:01

                Excellent ! Merci beaucoup :D
                • Partager sur Facebook
                • Partager sur Twitter

                Placement d'éléments html via css

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