Problème agencement titre catégorie

[Rubians]

Bonjour,

Pour le design de mon forum, j'ai voulu utiliser des images pour les titres des catégories de mon forum (voir screen 1). J'ai donc mis un lien avec une image dans le titre de la catégorie, dans le panneau d'administration. Si cela marche parfaitement pour la page d'accueil, cela créé des problèmes dans les catégories et les forums (voir screen 2 couleur rouge). De plus, pour caler l'image afin que ça ne "déborde pas", j'ai bougé le texte, mais ne fonctionnant plus sur les titres des forums (voir screen 2 couleur bleue). J'aimerais donc savoir s'il y a un moyen de caler tout ceci. Ce qui m'arrangerait c'est que le titre simple de la catégorie apparaisse dans le chemin (ex : Domus Test::Hall d'Entrée::Bring Me The Horizon et non pas Domus Test::[IMAGE]::Bring Me The Horizon), si c'est possible. Et également pouvoir recentrer mon texte qui n'est pas impacté par les images des titres. Je ne sais pas si je dois toucher aux templates ou même si j'y arriverai, c'est pourquoi j'en viens à vous demander votre aide !

Voici le lien du forum test : https://domus-test.forumactif.com/

Merci d'avance pour le temps que vous m'accorderez, je me tiens à votre disposition pour vous donner mes codes si vous avez besoin !

Fichiers joints

Screen 1.PNG Vous n'avez pas la permission de télécharger les fichiers joints.(668 Ko) Téléchargé 8 fois

Screen 2.PNG Vous n'avez pas la permission de télécharger les fichiers joints.(971 Ko) Téléchargé 2 fois

[MlleAlys]

Bonjour,

- En titre de catégorie, il vous faudra mettre l'image + le titre texte entre balises span
par exemple :

Code:

<img src="https://images2.imgbox.com/48/fc/YcQeZa9e_o.png"><span>Hall d'entrée</span>

- Puis dans le css, ce code permettra d'effacer le bon élément au bon endroit :

Code:

.tleCAT h2 span, .nav a.nav img{
  display:none;
}


".tleCAT h2 span" correspond au texte dans les titres des catégories, et ".nav a.nav img" correspond aux images dans la navigation.

[Rubians]

Bonjour !

Merci de cette réponse !

Alors dans un premier temps, ça marche super, merci, ça résout une grande partie de mon problème ! Maintenant, j'en ai également une autre, ce n'est pas centré. Alors à coup de top: xxpx, et de left, ça fonctionne sur la PA mais malheureusement, ça décale les titres également (vu que c'est lié), à l'intérieur des catégories... :/

Y existe-t-il une solution ? :/

[Lixyr]

Bonjour,

Tout est centré de mon côté. Pouvez-vous indiquer à quel endroit vous avez le problème, ainsi que le navigateur utilisé ?

[MlleAlys]

Bonjour,
L'image n'est pas centrée parce qu'elle est plus grande que son contenant, et que la taille de celui-ci est limitée. Du coup, elle déborde.
Pour corriger ça, on va supprimer les dimension fixes et marges superflues, et limiter la taille de l'image par rapport au contenant.

Dans votre css :

1) Localisez le code css de .tleCAT :

Code:

.tleCAT {
  background: #ffc0cb;
  background-attachment: fixed;
  background-image: url(https://i.imgur.com/TbaKPz7.png);
  background-size: 100%;
  height: 50px;
  left: -10px;
  margin: auto;
  padding: 30px;
  position: relative;
  width: 865px;
}

Remplacez-le par :

Code:

.tleCAT {
  background-attachment: fixed;
  background-image: url(https://i.imgur.com/TbaKPz7.png);
  background-size: 100%;
  margin: auto;
  width: 900px;
  margin-bottom: 15px;
}

2) Localisez le code de .tleCAT h2

Code:

.tleCAT h2 {
  color: #fff;
  font-family: Cinzel;
  font-size: 46px;
  position: relative;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  top: -45px;
}

Remplacez-le par :

Code:

.tleCAT h2 {
  margin: 0;
  color: #fff;
  font-family: Cinzel;
  font-size: 46px;
  line-height: 100px;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}

3) Ajoutez le code css suivant :

Code:

.tleCAT h2 img {
  display: block;
  max-width: 100%;
  margin: auto;
}

Au passage, je viens de me rendre compte qu'il semble y avoir un problème de balise dans votre template, le bloc stpentour ne contient que le premier titre et le premier forum de la page, alors que je suppose qu'il devrait contenir surement l'ensemble des catégories ?

[Rubians]

Tout marche parfaitement avec vos codes, merci beaucoup en tout cas !

(Ah oui, sûrement, pour le template... Est-ce que déplacer la fermeture de la balise à la fin suffit ? (C'est ce que je comprends du code.))

En attendant, je marque le sujet comme résolu, merci encore !