Alignement vertical des icônes de champs de profil

4 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Alignement vertical des icônes de champs de profil

Message par Deidei Lun 5 Déc 2016 - 19:52

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 Smile

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 Wink 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 ? Wink

Cordialement, Deidei.


Dernière édition par Deidei le Mar 6 Déc 2016 - 14:47, édité 2 fois
avatar

Deidei
**

Masculin
Messages : 58
Inscrit(e) le : 18/03/2015

http://dragonball-evolution.forumactif.com
Deidei a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des icônes de champs de profil

Message par Invité Lun 5 Déc 2016 - 20:55

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 :enreg: et :check:

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des icônes de champs de profil

Message par Deidei Lun 5 Déc 2016 - 21:12

Bonjour Milouze14 Smile

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.
avatar

Deidei
**

Masculin
Messages : 58
Inscrit(e) le : 18/03/2015

http://dragonball-evolution.forumactif.com
Deidei a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Alignement vertical des icônes de champs de profil

Message par ZYVHK Mar 6 Déc 2016 - 1:17

Bonsoir Deidei,
Pour avoir l'effet suivant :

Alignement vertical des icônes de champs de profil Jvuc9Bh

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 :

Alignement vertical des icônes de champs de profil N77ijzm

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

ZYVHK
***

Masculin
Messages : 134
Inscrit(e) le : 05/03/2016

ZYVHK a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Alignement vertical des icônes de champs de profil

Message par Shadows du 78 Mar 6 Déc 2016 - 1:39

Deidei a écrit: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;


Dernière édition par Shadows du 78 le Mar 6 Déc 2016 - 2:19, édité 1 fois
Shadows du 78

Shadows du 78
****

Masculin
Messages : 254
Inscrit(e) le : 28/09/2007

http://blog.milanricoul.com/
Shadows du 78 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des icônes de champs de profil

Message par lilas Mar 6 Déc 2016 - 2:16

Merci

  Mr. Green
lilas

lilas
*****

Féminin
Messages : 973
Inscrit(e) le : 07/08/2004

http://lesmusessamusent.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des icônes de champs de profil

Message par Invité Mar 6 Déc 2016 - 5:12

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 Wink .

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
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des icônes de champs de profil

Message par Deidei Mar 6 Déc 2016 - 13:13

Merci Milouze14, ZYVHK et Shadows du 78 pour l'aide que vous m'avez apporté ! Very Happy 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 Smile

Cordialement, Deidei.
avatar

Deidei
**

Masculin
Messages : 58
Inscrit(e) le : 18/03/2015

http://dragonball-evolution.forumactif.com
Deidei a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des icônes de champs de profil

Message par ZYVHK Mar 6 Déc 2016 - 13:29

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;
}
ZYVHK

ZYVHK
***

Masculin
Messages : 134
Inscrit(e) le : 05/03/2016

ZYVHK a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des icônes de champs de profil

Message par Deidei Mar 6 Déc 2016 - 13:43

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 Smile
avatar

Deidei
**

Masculin
Messages : 58
Inscrit(e) le : 18/03/2015

http://dragonball-evolution.forumactif.com
Deidei a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des icônes de champs de profil

Message par ZYVHK Mar 6 Déc 2016 - 13:46

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é.


Dernière édition par ZYVHK le Mar 6 Déc 2016 - 13:57, édité 1 fois
ZYVHK

ZYVHK
***

Masculin
Messages : 134
Inscrit(e) le : 05/03/2016

ZYVHK a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des icônes de champs de profil

Message par Deidei Mar 6 Déc 2016 - 13:54

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.
avatar

Deidei
**

Masculin
Messages : 58
Inscrit(e) le : 18/03/2015

http://dragonball-evolution.forumactif.com
Deidei a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des icônes de champs de profil

Message par ZYVHK Mar 6 Déc 2016 - 13:57

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;
}
ZYVHK

ZYVHK
***

Masculin
Messages : 134
Inscrit(e) le : 05/03/2016

ZYVHK a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des icônes de champs de profil

Message par Deidei Mar 6 Déc 2016 - 14:12

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 :

Shadows du 78 a écrit:
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 ?
avatar

Deidei
**

Masculin
Messages : 58
Inscrit(e) le : 18/03/2015

http://dragonball-evolution.forumactif.com
Deidei a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des icônes de champs de profil

Message par ZYVHK Mar 6 Déc 2016 - 14:35

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 Wink
ZYVHK

ZYVHK
***

Masculin
Messages : 134
Inscrit(e) le : 05/03/2016

ZYVHK a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des icônes de champs de profil

Message par Deidei Mar 6 Déc 2016 - 14:46

Tout marche à la perfection désormais ! Razz

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 Smile
avatar

Deidei
**

Masculin
Messages : 58
Inscrit(e) le : 18/03/2015

http://dragonball-evolution.forumactif.com
Deidei a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des icônes de champs de profil

Message par ZYVHK Mar 6 Déc 2016 - 15:36

Au plaisir Smile
ZYVHK

ZYVHK
***

Masculin
Messages : 134
Inscrit(e) le : 05/03/2016

ZYVHK a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum