Discussion :

[laurentSc]

Bonjour,
j'ai dans un site wordpress une page avec du code html auquel je souhaite appliquer du CSS. Cela se passe bien si je teste le code html+css hors wordpress, mais quand je mets ce code dans wordpress, le style n'est pas pris en compte. Pour éviter un conflit, j'ai utilisé des noms de classe personnalisés. Peut-on m'aider ?

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="table-mentions">
  <div class="cell-mentions">
    <h3>Editeur du site</h3>
    <p>bla bla 1</p>
 
    <h3>Conditions d&rsquo;utilisation</h3>
    <p>bla bla 2</p>
 
  </div>
  <div class="milieu-mentions cell-mentions">
    <p></p>
  </div>
  <div class="cell-mentions">
 
 
    <h3>Hébergeur</h3>
    <p>bla bla 3</p>
    <h3>Recherche</h3>
   <p>bla bla 4</p>
 
  </div>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
.table-mentions{
    display: table;
}
 
.cell-mentions{
 
    display: table-cell;
}
 
.milieu-mentions{
    display:block;
    width:60px;
    /*padding:50px;*/
}

Quand je dis que le style n'est pas pris en compte, ça signifie qu'en principe, je devrais avoir un affichage tabulaire avec 2 colonnes alors que là, pas de table...

[Pytet]

Bonjour Laurent,

Essaye d'utiliser les outils de développement de ton navigateur (Inspecteur) pour voir le style pris en compte sur ta page wp.

Tu devrais constater que la règle css .table-mentions { display: table; } n'est pas prise en compte.
Ceci est dû à une erreur de syntaxe dans ton css deux lignes plus haut : la syntaxe pour les commentaires css est /* commentaire */ et non // commentaire

Le display block appliqué sur le l'élément .milieu-mentions va également poser problème : les éléments à aligner sur une ligne doivent être défini en table-cell.
Néanmoins, tu devrais plutôt utiliser flexbox à la place de display table et table-cell.

[laurentSc]

Merci pour ta réponse.

Je ne parviens pas ici à utiliser l'inspecteur car il me signale plein de feuilles de style CSS et aucune idée de celle qui correspond au CSS défini dans le Apparence/personnaliser/CSS additionnel de Wordpress.
Sinon, je ne vois pas comment tu as pensé que je m'étais trompé dans la syntaxe des commentaires dans le CSS, mais l'erreur était bien celle-là, mais dans une partie non montrée ici !

Enfin pour ça :

Néanmoins, tu devrais plutôt utiliser flexbox à la place de display table et table-cell.

Vu que le problème est résolu et que je n'ai pas trouvé comment utiliser flexbox pour mon cas, on va en rester là...