Soucis avec du code CSS sur HTML.

Soucis avec du code CSS sur HTML. - HTML/CSS - Programmation

Marsh Posté le 09-07-2018 à 20:20:57    

Bonjour à tous,
 
Je le précise tout de suite, je n'y connais pas grand chose en programmation.
 
J'ai trouvé un script sur Github et j'essaie de le modifier à ma sauce.
 
Cependant, je rencontre un petit soucis de formatage.
 
Sauriez-vous comment je peux régler ce soucis svp ? Merci par avance.
 
Fenêtre en grand :
 
https://i.imgur.com/XGor7v0.jpg
 
 
Fenêtre redimensionnée (plus on réduit la fenêtre de gauche à droite ou l'inverse et plus le cadre se réduit sur la gauche) :
 
https://i.imgur.com/1UNQqIH.jpg
 
Code CSS :
 

Code :
  1. body {
  2.     position: absolute;
  3.     top: 0;
  4.     left: 0;
  5.     width: 100%;
  6.     height: 100%;
  7.     margin: 0;
  8.     padding: 0;
  9.     transition: background-color .2s;
  10.     background-color: var(--color0);
  11.     font-family:"2018";
  12.     color: var(--color15);
  13.   }
  15.   input,
  16.   button,
  17.   input:focus,
  18.   button:focus {
  19.     display: block;
  20.     box-sizing: border-box;
  21.     width: 100%;
  22.     margin: 0;
  23.     border: 0;
  24.     outline: 0;
  25.     background-color: transparent;
  26.     color: inherit;
  27.     font-family:"2018";
  28.     text-align: center;
  29.     -webkit-appearance: none;
  30.     -moz-appearance: none;
  31.   }
  32.  
  34. #clock {
  35.     display: block;
  36.     font-size: 7rem;
  37.     cursor: default;
  38. border: 6px double #00a5ff;
  39. width: 13%;
  40. text-align: center;
  41. font-family:"24";
  42.   }


Message édité par snowden le 09-07-2018 à 20:23:15

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
Reply

Marsh Posté le 09-07-2018 à 20:20:57   

Reply

Marsh Posté le 09-07-2018 à 20:59:58    

Bonjour,
 
Sans le HTML c'est difficile de répondre avec certitude...
Néanmoins, l'élément #clock est déclaré avec une largeur (width) en pourcentage (vu le résultat obtenu, pourcentage proportionnel à la largeur de la fenêtre) alors que l'écriture à l'intérieur est fixe (font-size) quelque soit la largeur de la fenêtre.
 
Avec du contenu "non compressible", rien ne sert de travailler en pourcentage. Enlever la propriété "width" afin que l'élément occupe le minimum de place devrait régler le problème, puis jouer sur le "padding" pour éventuellement éloigner les bordures.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 09-07-2018 à 21:41:59    

Bonjour,
 
Merci pour ta réponse. Pour le HTML, j'aurais effectivement pu le montrer mais il est très long sans compter qu'il intègre beaucoup de code css et javascript.
 
Cependant, tu avais raison et ça a fonctionné. Voilà ce que j'ai fait et ça ne bouge plus ;)
 

Code :
  1. #clock {
  2.     display: block;
  3.     font-size: 7rem;
  4.     cursor: default;
  5. border: 6px double #00a5ff;
  6. padding: 0px 10px 0px 10px;
  7. text-align: center;
  8. font-family:"24";
  9.   }


 
Je te remercie encore pour ton aide.
 
 
 


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed