Alignement vertical des icônes de champs de profil

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 le 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

Deidei
**

Masculin
Messages : 51
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 Milouze14 le 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 Valider

a++
avatar

Milouze14
Membre actif

Masculin
Messages : 4689
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 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 le 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.

Deidei
**

Masculin
Messages : 51
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 le Mar 6 Déc 2016 - 1:17

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

ZYVHK
***

Messages : 132
Inscrit(e) le : 05/03/2016

http://www.arcadia-forum.com
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 le 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
avatar

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 le Mar 6 Déc 2016 - 2:16

Merci

  Mr. Green
avatar

lilas
*****

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

http://lefofodemacopine.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 Milouze14 le 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
avatar

Milouze14
Membre actif

Masculin
Messages : 4689
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 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 le 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.

Deidei
**

Masculin
Messages : 51
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 le 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;
}
avatar

ZYVHK
***

Messages : 132
Inscrit(e) le : 05/03/2016

http://www.arcadia-forum.com
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 le 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

Deidei
**

Masculin
Messages : 51
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 le 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
avatar

ZYVHK
***

Messages : 132
Inscrit(e) le : 05/03/2016

http://www.arcadia-forum.com
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 le 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.

Deidei
**

Masculin
Messages : 51
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 le 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;
}
avatar

ZYVHK
***

Messages : 132
Inscrit(e) le : 05/03/2016

http://www.arcadia-forum.com
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 le 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 ?

Deidei
**

Masculin
Messages : 51
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 le 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
avatar

ZYVHK
***

Messages : 132
Inscrit(e) le : 05/03/2016

http://www.arcadia-forum.com
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 le 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

Deidei
**

Masculin
Messages : 51
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 le Mar 6 Déc 2016 - 15:36

Au plaisir Smile
avatar

ZYVHK
***

Messages : 132
Inscrit(e) le : 05/03/2016

http://www.arcadia-forum.com
ZYVHK a été remercié(e) par l'auteur de ce sujet.

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


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