Discussion :

[pierrot10]

Bonjour à tous

J'ai un problème surement banal.
J'ai un "boite" (Fancybox) avec une largeur féfinie. Dedans, j'ai un formulaire et mes input font la largeur de cette boite.
J'ai donc définit la largeur ainsi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
input{
width:100%
}

Le problème, c'est que je souhiate que le texte qu'on rentre, dans ces inputs, ne touche pas les bord. Donc j'ai ajouté un padding

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
input{
width:100%;
padding:8px;
}

Il se trouve que maintenant, mes input déborde, car la largeur de 16px à été rajoutée.

Comment je peux donc soustraire 16px à une valeur donnée en %?
Ou comment, je peux ajouter un padding, sans que cette largeur soit "ajoutée"?

Merci pour vos lumières

[psychadelic]

https://developer.mozilla.org/fr/doc...CSS/box-sizing

dans ton cas:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
    input{
      width:100%;
      padding:0 10px;
      box-sizing: border-box;
    }

mais c'est sans doute la pire manière de procéder
parce qu'il faut mieux utiliser un reset css, même s'il est minimal

[Archimède]

Comment je peux donc soustraire 16px à une valeur donnée en %?
Une alternative qui devrait fonctionner. Tu utilises calc() pour faire ta différence:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
input{
 padding: 8px;
 width: calc(100% - 18px);
}

16+2 car 1px de border-width de chaque côté.

ça devrait le faire... (l'espace est indispensable autour du signe moins de l'opération sinon, ça ne fonctionne pas)

[ABCIWEB]

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
    input{
      width:100%;
      padding:0 10px;
      box-sizing: border-box;
    }

mais c'est sans doute la pire manière de procéder
parce qu'il faut mieux utiliser un reset css, même s'il est minimal

J'aurais conseillé la même chose, pourquoi dis-tu que c'est la pire manière de procéder ?
Sinon le reset css je l'utiliserais en complément, mais je ne vois pas comment cela pourrait-être une alternative à box-sizing dans ce cas de figure ?

Y'a-t-il des problèmes/bug avec box-sizing: border-box; ?

[psychadelic]

Il n'y a aucun problème avec l'instruction css = box-sizing: border-box;relis moi, j'ai écris :

c'est sans doute la pire manière de procéder

ou, si tu préfères, c'est la manière de procéder qui pose problème.

par défaut le Box-sizing est réglé en content-box; ce qui signifie que le reste de tout ce qu'il mettra sur la page utilisera un système de sizing opposé, et que forcément en construisant son interface, il va placer différents box-sizing sur d'autres éléments et son code css / html finira par devenir un plat de spaghettis ingérable (et indigeste).

Donc mon conseil, utiliser au moins un reset css et s'y tenir, sinon un framework css minimal (moins de 10k). (cad ne pas bricoler sa mise en page).

En général ils utilisent tous un box-sizing à border-box (rejeter ceux qui ne le font pas).

[ABCIWEB]

Ah ok, néanmoins ne je pense pas que c'était évident pour tout le monde, un commentaire placé juste en dessous d'un code est censé se rapporter au code que l'on vient de montrer surtout quand la phrase commence par "mais". En tous cas merci d'avoir répondu, cela enlève toute ambiguïté.