Positionnement des images-icônes de forums

[Cloo]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Toujours depuis que j'ai mis des icônes de forum
Lien du forum : http://accrosjardin.forumactif.ws/

Description du problème

Bonjour,

J'ai mis il y a quelque temps déjà des images-icônes de forum sur la page d'accueil, comme ceci:


Je pensais qu'il était normal que le titre normal soit écrit au-dessus, et en dessous l'image et la description.

Or, j'ai vu sur ce forum-ci, page d'accueil, qu'il est possible d'avoir l'image à gauche, et ensuite, bien alignés, l'un en dessous de l'autre, le nom du forum et sa description. Copie écran partielle de la page d'accueil de ce forum-ci:


Ma question... que faire pour que je puisse avoir la même chose? L'image à gauche du bloc de texte composé du nom du forum et de la description?

Dans le PA, Général, Forum, Configuration, Structure des pages, j'ai 40 et 45 dans les champs Hauteur et Largeur de la cellule image catégorie/forum. J'ai essayé de mettre des valeurs supérieures pour la hauteur, mais ça ne changeait rien. La plupart de mes images font 40x40. ou une dimension max 40 et l'autre plus petite.

Merci beaucoup!

[Invité]

Bonsoir cloo j'ai un tuto qui pourrait éventuellement, vous intéresser. Cordialement
https://forum.forumactif.com/t337420-alignement-texte-icones-dans-les-categories-forums

[Cloo]

Bonjour Misslena,

Mon problème est en effet le même que celui décrit dans le sujet mentionné.

Cependant, tout comme dans le sujet mentionné... j'ai ajouté ceci dans ma feuille CSS:

Code:

a.forumtitle div span {
    padding-left: 60px;}

Et ça ne fonctionne pas.

Mais j'ai mis plus simplement ceci, et ça fonctionne pour le titre du forum:

Code:

a.forumtitle {
    padding-left: 60px;}

Première chose résolue!

La deuxième chose qui y est indiquée pour aligner la description, c'est d'ajouter ceci à la description pour chaque forum:

Code:

<div style="margin-left: 60px;">
    Une question à poser ou un problème lors de votre enregistrement? <br />N'hésitez pas à nous contacter!
</div>


Ça fonctionne, sauf qu'il faut le rajouter dans chaque forum... n'y aurait-il pas plutôt un seul paramètre à rajouter à la feuille CSS pour obtenir le même résultat?

Enfin, dans le post mentionné, il n'y a pas de réponse pour remonter l'image pour la recentrer.


Veuillez noter que je fais mes essais sur le forum test:
http://accrosjardintest.forumactif.com/

[Invité]

C'est déjà un bon début, je chercherai un tuto, si je trouve "centrer les images", je vous le mettrai, j'ai celui-ci mais le problème c'est que cela va tout centrer, je pense. Jetez-y un coup d'oeil, on ne sait jamais. Peut-être un autre membre aura une réponse plus précise. Une belle soirée à vous.

https://forum.forumactif.com/t372988-comment-centrer-le-titre-et-l-image

[Cloo]

En effet, ce dernier sujet parle plutôt de centrer horizontalement, ce n'est pas ce que je désire, mais remonter l'image verticalement.

[Cloo]

J'ai fait des recherches et des essais avec mon forum test, je devrais arriver à ce que je veux avec ceci dans le CSS:

/* Alignement des icônes de forum en page d'accueil */
/* pour le titre du forum */
a.forumtitle {
padding-left: 55px;}

/* margin-top pour remonter l'image du forum et margin-right pour aligner la description avec le titre du forum */
ul.topiclist img {
margin-right: 15px;
margin-top: -15px;
}

et en retouchant quelques images pour qu'elles aient toutes 40px de large exactement.

Voici ce que ça donne pour le moment sur le forum test:
http://accrosjardintest.forumactif.com/
Il y a quelques décalages là où l'image ne fait pas exactement 40px de large, ça sera corrigé demain.


Je vais faire le tout sur mon forum principal demain, ça devrait fonctionner!

[Cloo]

Voilà... c'est fait... ça donne ceci:
http://accrosjardin.forumactif.ws/

Avec le code indiqué dans le message juste au-dessus dans le CSS, et retouche des images avec une largeur de 40px.


Edit: en fait, je vais faire quelques ajustements encore, car ces paramètres ont aussi de l'impact sur l'affichage de la liste des sujets, dans les forums et dans "Voir les nouveaux messages", voir ci-dessous:

J'ai mis:
a.forumtitle {
padding-left: 50px;}
ul.topiclist img {
margin-right: 10px;
margin-top: -15px;
}



Mais je vais peut-être réduire mes images à 35px et mettre 45px et 5px, ça devrait être parfait!

En tout cas... c'est sur ces paramètres qu'il faut jouer pour obtenir l'alignement désiré!

[Cloo]

Bon... rien n'est parfait... ça a un impact sur l'alignement des sujets dans "Voir les nouveaux messages":



Le 3ème sujet, il y a un décalage entre le titre sur la 1ère ligne et les infos (auteur, date) sur la 2ème ligne.


En fait, il vaudrait mieux jouer sur la marge du texte de la description des forum (sur la page d'accueil) que sur la marge de droite des images, mais ça, je n'arrive pas à trouver le paramètre-clé... si quelqu'un sait???