retirer le box-sizing: border-box d'une partie du forum

[Snow White]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://unforumtestcpasassez.forumactif.com/

Description du problème

Bonjour,

J'ai fait une petite bêtise en codant mon forum et je voulais savoir s'il y avait un moyen simple de rectifier la boulette. J'ai appliqué un box-sizing : border-box à tout mon forum (avec un *{box-sizing:border-box}) pour me simplifier la tâche, cependant je voudrais qu'il ne s'applique pas dans mon postbody car j'ai d'anciens posts ne l'utilisant pas et ça me casse tous les codes de l'ancienne version du forum. J'ai tenté en lui appliquant un box-sizing: content-box; et un box-sizing: unset; sans succès. Il y aurait-il une autre méthode ou c'est fichu ?

Merci d'avance !

[Oka.mi]

Bonjour,

Le *{box-sizing:border-box}, vous le chargez depuis un css externe ( https://dl.dropboxusercontent.com/s/x770az48w41izxt/cssOtherlands.css ) qui écrase tout le reste, puisqu'il arrive bien après le css personnalisé du forum. Si à la place vous mettez le *{box-sizing:border-box} dans la feuille de style personnalisée du panneau d'administration, aux côtés de votre .postbody{box-sizing: content-box!important;}, cela fonctionnera, et il n'y aura même pas besoin de mettre le !important.

[Snow White]

Bonjour,

Merci pour votre réponse rapide ! Je n'y avais pas du tout pensé. Cependant je viens de faire la manip et ça ne marche toujours pas, dans l'inspecteur il m'indique que mon style est appliqué https://i.imgur.com/nR0GSRq.png mais dans les faits il ne l'est pas et ça ne marche que quand je retire le box-sizing du * https://i.imgur.com/A8eDydK.png

[Oka.mi]

Bonjour,

C'est ma faute, j'ai compris votre question de départ de manière un peu trop littérale. Effectivement, le code .postbody{box-sizing: content-box;} fonctionne bien sur l'élément .postbody, mais comme * sélectionne tous les éléments, ben en fait la propriété ne s'applique que sur le .postbody, pas sur ses éléments enfants (les div, p... etc que vous utilisez dans le .postbody). Pour corriger ça, vous pouvez mettre

Code:

.postbody, .postbody * {box-sizing: content-box;}

pour sélectionner à la fois le .postbody et tous les éléments dans .postbody... seulement voilà, cela impliquera des ajustements sur les autres éléments derrière car le content-box ne sera pas adapté à tout ce que vous pouvez mettre. Donc à vous de voir. Vous pouvez mettre ça et recorriger derrière pour les autres éléments... ou vous résoudre au fait que mettre cette propriété en sélectionnant * n'est pas une bonne idée.

[MlleAlys]

Bonjour,
Est-ce que ce ne serait pas plus simple d'utiliser la valeur inherit pour * ? Et appliquer le border-box seulement au body, puis content-box sur postbody ?

Code:

body * { box-sizing: inherit; }
body { box-sizing: border-box; }
.postbody {  box-sizing: content-box; }

[Snow White]

Merci beaucoup pour votre aide à tous les deux, le problème est résolu !