L'image derrière ma catégorie est décalée

[Kalhyra]

Bonsoir

Pour commencer, je vous présente mon forum : http://elevezundragon.forumsgratuits.com/
C'est un phBB3, et je suis administratrice, mais pas fondatrice : je ne m'occupe que du design.
J'utilise Chrome, mais le soucis est visible chez les autres admin qui utilisent d'autre navigateur.
Je n'ai pas modifié de templates (d'ailleurs je crois que je n'y ai pas accès ?), mais j'ai fait du CSS et du JavaScript.

J'ai utilisé la fonction rechercher, je suis tombée sur quelques topic qui parlaient du même sujet que moi, mais pas du même problème. J'ai toutefois essayé les codes donnés, en vain.

Ce que j'aimerais faire, c'est pouvoir intégrer différentes images dans le titre des catégories.
J'ai d'abord mis une image simple dans le PA - Images - Image du fond des titres.
J'ai ensuite mis en pratique ce tuto : https://forum.forumactif.com/t346338-placer-une-image-comme-titre-de-forum#2957128, mais en le plaçant dans le titre de la catégorie, et non dans le titre du forum.
Et je pense que cela n'est pas adapté car je me retrouve avec ceci :

Vous pouvez voir, avec le dragon orange, l'image de base de toutes les catégories, bien placée ; puis avec le dragon rouge, celle que je souhaite appliquer à la catégorie Forum, qui est décalée par rapport au titre.

Je remets les codes de mon CSS :

Code:

/* Fond des catégories/titres */
a.forumlink span, a.forumtitle span { display: none; }
a.forumlink img, a.forumtitle img { display: inline!important; }


Je n'ai pas mis le second morceau du code du tuto, car il ne me sert pas vraiment, et m'enlève le titre de la catégorie.

Et mon code dans le titre direct de ma catégorie :

Code:

<span>Le Forum</span><img style="displayne" src="http://i56.servimg.com/u/f56/18/25/94/13/titre210.png" />

D'après mes observations, le titre de la catégorie « Le Forum » ne veut pas se poser SUR l'image, mais juste avant, car quand, dans le titre de la catégorie, je mets le span après le img, le « Le Forum » se retrouve en dessous de l'image.

Je pense donc que mon soucis se réglerait si je trouvais comment intégrer l'image derrière le titre, un peu comme un background.
Quelqu'un saurait comment lui ordonner ? ^o^

Merci, bonne soirée =D

[Kalhyra]

Bonsoir, j'ai toujours besoin d'aide :3

[[Nihil]]

Ce que j'aimerais faire, c'est pouvoir intégrer différentes images dans le titre des catégories.

J'ai une petite question, pourrais tu détailler davantage ce que tu cherches à obtenir ? (avec une screen ou une schéma en plus ça serait top )

[Kalhyra]

Bien sûr ! Merci ^^
Voici :


Il s'agit donc de mettre des dragons différents en fond selon la catégorie du forum.
Actuellement, le premier dragon est celui mis par défaut derrière toutes les catégorie

[[Nihil]]

J'ai bien relu ton message, tu y détailles ce que tu as essayé ^^, mais tout cela est enlevé de ton forum maintenant c'est bien ça ?
Le plus simple serait d'y aller avec du javascript je pense.
Le titre de ta catégorie serait quelque chose comme ça :

Code:

<span id="le-forum">Le forum</span>

Dans ton JS tu mettrais quelque chose comme ceci :

Code:

$(function() {
 $("#le-forum").closest("ul.topiclist").addClass(".le-forum");
});

Et dans ton CSS :

Code:

ul.topiclist.le-forum {
    background-image: url("URL_DE_TON_IMAGE");

Le principe :
On trouve dans ton page l'élément avec l'id "le-forum". C'est ton titre. Ensuite, à partir de là, il va regarder ton code HTML jusqu'à trouver la barre de fond catégorie la plus proche. Une fois qu'il l'a retrouvée, il lui ajoute une classe. Avec cette classe, tu peux changer le background-image.

[Kalhyra]

Bonjour, oui je l'avais enlever pour le screen puis j'ai oublié de l'y remettre ^^'

Alors j'ai bien repris ce que tu as noté aux bons endroits, avec mon url, mais ça n'a pas l'air de fonctionner :s L'image reste la même : celle du 1er dragon

[[Nihil]]

C'est ma faute, j'ai laissé un point en trop dans le JS au niveau du nom de la class à rajouter

Code:

        $(function() {
        $("#le-forum").closest("ul.topiclist").addClass("le-forum");
        });

[Kalhyra]

Merci beaucoup, ça marche pour la partie Le Forum ! =D
Et j'ai réussi à l'adapter pour le reste de mes titres x)
Merci encore
Je clos !