Réduire le cadre des catégories

[BiKinou]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : 18/07/2020
Lien du forum : https://plumesmots.forumactif.org/

Description du problème

bonjour,
Je suis actuellement entrain de refaire le forum d'une amie entièrement. En mettant le thème sur mon forum d'essai. Je me suis aperçue que le cadre des catégories empiète sur les autres catégories
https://i.servimg.com/u/f64/18/12/32/13/problz11.png

Donc du coup, j'ai voulu réduire la taille et là impossible.
Voici la partie de mon CSS concerné

Code:

/*CATEGORIES*/
  /*Cadre de chaque catégorie*/
.cate_bloc_cadre {
border: 2px solid #402203;
margin-bottom: 15px;
padding: 2px;
padding-left: 4px;
padding-right: 4px;
}
/*Bloc de chaque catégorie*/
.cate_bloc {
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #402203;
padding: 5px;
padding-left: 15px;
padding-right: 15px;
text-align: center;
}
/*Titre de catégorie*/
.cate_title h2 {
display: inline-block;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
border-radius: 15px;
box-shadow: 2px 2px 1px #ffffff;
margin: 0px;
margin-right: 5%;
  padding: 10px;
      padding-left: 180px;
      padding-right: 180px;
color: #402203;
font-family: Papyrus, cursive;
font-size: 20px;
text-shadow: 0 2px 2px #fefdb1;
text-align: center;
text-transform: uppercase;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transition: 1s;
-webkit-transition: 1s;
}
.cate_title h2:first-letter{
color: #c7819f;
text-shadow: 2 2px 2px #c0a583;
font: bold 48px papyrus;
}
/*Titre de catégorie au survol*/
.cate_title h2:hover {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
/* FIN DES CATEGORIES*/

Je n'arrive pas à trouver ce que je dois modifier pour réduire mon cadre de catégories. Merci de votre aide

[professeur felyne]

Bonsoir. ^^

Regarde tes lignes 35-36-37

Code:

transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);

Ce sont des propriétés de rotation hors c'est une rotation d'un élément qui fait que ça dépasse.
Essai de diminuer les valeurs.

Autre solution, si tu ne veux pas changer la rotation de l'élément, augmente la marge entre l'ensemble de la catégorie et le bloc du titre de la catégorie en utilisant un margin-top : https://developer.mozilla.org/fr/docs/Web/CSS/margin-top

[BiKinou]

Bonjour et merci de ta réponse. Je vais d'abord tester le margin top car j'ai déjà réduit  mon padding  à la ligne 27 et 28 de 180, je suis passée à 120 px et du coup cela ne chevauche pas sur mon texte  voir les messages .

J'ai aussi un souci lié à cela justement, hier en voulant réduire mon padding c'était impossible, il fallait que je ferme  et que j'ouvre à nouveau pour voir le changement. Une idée ?

Edit : C'est nickel merci pour tout