Conflit entre image descriptive et code html dans la description

[Aurora Borealis]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : installation d'un template entrainant un conflit
Lien du forum : https://test-aurora.forumotion.com/

Description du problème

Bonjour,

Voici mon probleme:
J'ai installe des categories en modifiant mon template. Cela necessite de mettre une image descriptive donc j'ai mis le lien de l'image au dessu de la fenetre de description du forum dans la panneau de configuration.
Mais lorsque je souhaite mettre un logo ou une mini banniere dans la description du forum, lorsque je visionne le forum, les images se chevauchent (le logo ne se place pas dans la fenetre de description, mais au dessus de mon image descriptive).
Sur l'image jointe (capture d'ecran) la premiere image est belle et bien l'image descriptive, mais la seconde est la banniere qui se place redimensionnee au dessus de mon image descriptive.
Je suis certaine qu'il faut ou mettre un html particulier dans la fenetre de description, ou un css qui bloque de conflit... mais comme je n'y connais rien.
J'ai fait des recherche mais je n'ai absolument rien trouve dans le forum pour m'aider alors j'espere que vous pourrez le faire.
Je vous en remercie d'avance.

[mSyx]

Hello o/
Alors, dis-moi si j'ai bien compris parce que c'est pas très clair :b

Ici:


Il y a l'image avec le robot qui s'affiche, et je vois cette image dans l'inspecteur (qui n'est pas visible sur le forum):


Cette dernière image est censée prendre la place du robot ?

[Aurora Borealis]

C’est exactement ça. Et le robot, lui est normalement une bannière en code html qui devrait être dans la description

[Lixyr]

Bonjour,

*edit*

Je crois que j'ai compris votre code, et donc votre demande...

Donc en fait c'est simple. Dans votre CSS vous avez ceci (à peu près, je n'ai pas votre CSS) :

.categories_content p img {
position: absolute !important;
top: 0 !important;
left: -180px !important;
z-index: 1;
width: 380px;
height: 188px;
-o-object-fit: cover;
object-fit: cover;
-webkit-clip-path: polygon(0 0, 100% 0%, 69% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 69% 100%, 0% 100%);
border: 4px solid white;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
}

Il suffit de modifier

.categories_content p img

par

Code:

.categories_content p > img

Cela indique au CSS que le code ne doit s'appliquer qu'à l'image strictement enfant de la balise p , et non aux autres images.
Comme l'image du robot se trouve dans un lien, l'image du robot est enfant d'un lien, et non de la balise p.

Pour que ce code fonctionne, il faut que vous fassiez toujours la même chose : les images rectangulaires en description doivent être dans un lien (ou un span, ça fonctionne aussi) sinon elles seront impactées par le css.

[mSyx]

Re o/
Je pense avoir compris la même chose que Lixyr.

Si c'est bien ça, le z-index aurait dû suffire mais il y a un problème avec cette ligne dans le CSS:

Code:

.categories_content p img

Les deux images se trouvent dans un p de la div .categories_content; ça cause problème :b

Code:

.categories_content p > img

Avec le >, ça devrait sélectionner correctement l'image voulue ^^

edit: ah bah, Lixyr a modifié sa réponse :b

[Aurora Borealis]

J'etais persuadee que ce n'etait pas grand chose mais je ne suis pas une experte en codage, je sais que ca vient souvent du css, merci beaucoup pour votre aide, je retiendrais pour la prochaine fois j'en suis sure

Probleme donc resolu, merci encore