Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1893 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Soucis avec du code CSS sur HTML.

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Soucis avec du code CSS sur HTML.

n°2317816
snowden
Posté le 09-07-2018 à 20:20:57  profilanswer
 

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.   }
  14.   input,
  15.   button,
  16.   input:focus,
  17.   button:focus {
  18.     display: block;
  19.     box-sizing: border-box;
  20.     width: 100%;
  21.     margin: 0;
  22.     border: 0;
  23.     outline: 0;
  24.     background-color: transparent;
  25.     color: inherit;
  26.     font-family:"2018";
  27.     text-align: center;
  28.     -webkit-appearance: none;
  29.     -moz-appearance: none;
  30.   }
  31.  
  32. #clock {
  33.     display: block;
  34.     font-size: 7rem;
  35.     cursor: default;
  36. border: 6px double #00a5ff;
  37. width: 13%;
  38. text-align: center;
  39. font-family:"24";
  40.   }


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. »
mood
Publicité
Posté le 09-07-2018 à 20:20:57  profilanswer
 

n°2317819
MaybeEijOr​Not
but someone at least
Posté le 09-07-2018 à 20:59:58  profilanswer
 

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.
n°2317822
snowden
Posté le 09-07-2018 à 21:41:59  profilanswer
 

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. »

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Soucis avec du code CSS sur HTML.

 

Sujets relatifs
Code pour "tirage avec remise sans ordre"[HTML/PHP/CSS] Diff de 2 données
forcer un code CSS sur une page webCréation base de données avec Entity code first
[Perl] Optimisation code perl CGI - Problème de performanceCode jeux du nombre aléatoire en python 3.6
[HTML] Formulaire fonctionnel sur navigateur mais bugué sur instagram.Créer une sidebar verticale CSS only
Plus de sujets relatifs à : Soucis avec du code CSS sur HTML.


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR