Alignement vertical des icônes de champs de profil

[Deidei]

Détails techniques

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

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir

Je souhaiterais aligner et centrer horizontalement les icônes de champs de profil de sorte à ce qu'il n'y ai plus de décalage entre les images et le texte. J'ai encadré en rouge dans le screen afin que vous puissiez comprendre ce que je cherche à rectifier J'ai essayé de multiples combinaisons dans le template viewtopic_body mais impossible d'obtenir le résultat escompté =/ Quelqu'un aurait-il la solution à mon problème ?

Cordialement, Deidei.

[Invité]

Hello Deidei,
Si c'est pour centrer, il suffit de trouver ces trois variables:

Code:


{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}


Ensuite tu les entoures de la balise center:

Code:

 
<center>
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                                  </center>


Penses a enregistrer les modifications en cliquant respectivement sur et :check:

a++

[Deidei]

Bonjour Milouze14

Merci de votre réponse rapide mais ce n'est pas ce que je cherche à faire ^^ Je souhaite seulement centrer les icônes des champs de profil par rapport au texte. En général, les images sont légèrement décalées vers le haut de quelques pixels comme vous pouvez le voir sur le screen.

Cordialement, Deidei.

[ZYVHK]

Bonsoir Deidei,
Pour avoir l'effet suivant :

Il suffit de se rendre dans la feuille de CSS de votre forum et d'insérer les lignes données plus bas.
Panneau d'administration » Affichage » Images et Couleurs : Couleurs » Feuille de style CSS

Code :

Code:

.postbody img[longdesc] {
    vertical-align: middle; }

Après, selon certains forums et smileys, le rendu peut être différent. On pourrait dans ce cas opter pour une légère modification du code ci-dessus pour avoir un centrage visuel et non technique :

Code :

Code:

.postbody img[longdesc] {
    vertical-align: sub; }

[Shadows du 78]

Je souhaiterais aligner et centrer horizontalement les icônes de champs de profil de sorte à ce qu'il n'y ai plus de décalage entre les images et le texte.

Dans ce cas c'est un alignement vertical. Et en effet, ça se corrige en CSS en rajoutantant la propriété vertical-align et la valeur middle sur tes emoticones.

Code:

img[longdesc] {
vertical-align: middle;
}

Si middle ne te convient pas tu as les autres valeurs disponibles pour cette propriété :

Code:

baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

[lilas]

Merci

 

[Invité]

Hello Deidei,

en laissant les balises center tu peux via ce style aligner les icônes:

Code:


.postdetails.poster-profile center img{vertical-align: middle;}


si tu ne souhaites pas garder ces balises, il faudra tout de même en ajouter une autre .

Un span par exemple:

Code:

<span>
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
</span>

La css sera alors:

Code:


.postdetails.poster-profile span img{vertical-align: middle;}


a

[Deidei]

Merci Milouze14, ZYVHK et Shadows du 78 pour l'aide que vous m'avez apporté ! J'ai dû changer middle en top pour que l'alignement entre mes icônes de champs de profil et le texte soit correct. Et si je souhaite obtenir le même résultat uniquement dans le profil des membres ? Que dois-je placer dans le CSS ? Car les icônes apparaissent là aussi et ne sont pas alignées

Cordialement, Deidei.

[ZYVHK]

Essaie l'un de ces deux codes pour voir, ça devrait te satisfaire :B ;

Code:

.postdetails.poster-profile img {
    vertical-align: sub;
}

Code:

.postdetails.poster-profile img {
    vertical-align: top;
}

[Deidei]

Oui, c'est bien le second que j'ai mis pour les mini-icônes du profil apparaissant dans les sujets ^^ Mais je voulais parler des icônes présentes dans le profil avancé :

Spoiler:

Il subsiste aussi un décalage que je souhaiterai corriger à cet endroit

[ZYVHK]

Autant pour moi, j'ai mal compris. Dans ce cas-là, on irait pour l'un des codes suivants :

Code:

.profile-advanced-details img {
    vertical-align: sub;
}

Code:

.profile-advanced-details img {
    vertical-align: top;
}

ÉDIT ZYVHK : Corrigé.

[Deidei]

Malheureusement, l'icône ne veut pas s'aligner au texte =/ J'ai essayé avec sub, top, middle et bottom au cas où mais le résultat reste le même.

[ZYVHK]

Je suis définitivement vraiment idiot. Versions corrigées :

Code:

#profile-advanced-details img {
    vertical-align: sub;
}

Code:

#profile-advanced-details img {
    vertical-align: top;
}

[Deidei]

Maintenant ça fonctionne, j'arrive à déplacer l'icône vers le haut et le bas mais elle ne souhaite toujours pas s'aligner malgré les différents procédés proposés plus haut par Shadows du 78 :

Code:

baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

Le problème vient peut-être de la taille de mon icône par rapport au texte. Car j'ai adapté la taille de mon image en fonction de la balise small dans le profil présent dans les sujets et comme cette taille ne s'applique que dans les sujets, ça pourrait expliquer que je ne puisse pas correctement aligner. Après je ne fais qu'une supposition ^^ Je me demandais d'ailleurs s'il était possible d'essayer de régler l'alignement manuellement en jouant avec les pixels ?

[ZYVHK]

C'est bien possible. Soit avec du margin, soit avec un position: relative. Je te conseille largement la deuxième option :

Code:

#profile-advanced-details img {
    position: relative;
    top: -1px;
    left: 1px;
}

A toi de modifier les valeurs et jouer avec. N'hésite pas à remplacer top par bottom ou left par right selon tes besoins

[Deidei]

Tout marche à la perfection désormais !

Un énorme merci à toi ZYVHK ainsi qu'à Shadows du 78 et Milouze14. Sans vous, j'aurais pu chercher encore longtemps dans les templates xD

Ce sujet est résolu

[ZYVHK]

Au plaisir