Comment centrer le pseudo avec l'avatar ?

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

Résolu Comment centrer le pseudo avec l'avatar ?

Message par Johan Shura le Dim 14 Mai 2017 - 17:52

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://joueur-pc.forumactif.com/

Description du problème

Bonjour à tous,

Pouvez vous m'expliquez étape par étape, pour centrer le pseudo avec l'avatar svp ?

Merci


Dernière édition par Johan Shura le Mer 17 Mai 2017 - 19:39, édité 1 fois
avatar

Johan Shura
Nouveau membre

Masculin
Messages : 19
Inscrit(e) le : 14/05/2017

http://joueur-pc.forumactif.com/
Johan Shura a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment centrer le pseudo avec l'avatar ?

Message par lmc38510 le Dim 14 Mai 2017 - 18:27

Bonjour "Johan Shura"

Centrer l'ensemble dans la colonne de gauche Avatar - Pseudo

En agissant sur ".postprofile"
Met ceci dans ton CSS :
Code:
/* Centrer elements colonne du Profil */
.postprofile{text-align: center;}

tu peux en profiter pour diminuer sa largeur au profit de la colonne de droite
En agissant sur "width" de ".postprofile" et ".postbody
Avec ce CSS:
Code:
/* Largeur colonne gauche et droite*/
.postprofile{width: 18% !important;}
.postbody {width: 81% !important;}

Comme ta colonne de gauche a un espace important sur son coté gauche
Tu peux le réduire en agissant sur ".postprofile" et le "margin"
Avec ceci en CSS:
Code:
/* Diminuer espace gauche colonne du Profil */
.postprofile{margin: 5px 0 0 -10px !important;}

Augmente ou diminue en agissant sur " -10px " Very Happy
avatar

lmc38510
*****

Masculin
Messages : 891
Inscrit(e) le : 22/02/2012

http://lacaverneauxgrimoire.forumactif.org/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment centrer le pseudo avec l'avatar ?

Message par Johan Shura le Dim 14 Mai 2017 - 20:07

Bonsoir lmc38510, merci pour votre aide, alors pour ce qui le centrage pseudo avatar c'est ok. par contre les 2 autres codes ça m'embrouille et je comprend pas ce que chaque % fait exactement entre le 18%, 81%, 5px et -10px ? j'ai tenté mais ça donne pas comme il faut et je comprend pas svp.
avatar

Johan Shura
Nouveau membre

Masculin
Messages : 19
Inscrit(e) le : 14/05/2017

http://joueur-pc.forumactif.com/
Johan Shura a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment centrer le pseudo avec l'avatar ?

Message par lmc38510 le Dim 14 Mai 2017 - 23:17

Un 1ère chose de faite -> centrer le pseudo avec l'avatar (fait)

actuellement tu as ceci :

L'avatar est décentré dans la colonne ... ou tu le laisses ainsi ou tu as la possibilité de le recentrer .....
Voilà pourquoi je disais :
Comme il y a un espace important sur son coté gauche
Tu peux le réduire en agissant sur ".postprofile" et le "margin"
Avec ceci en CSS:
Code:
    /* Diminuer espace gauche colonne du Profil */
    .postprofile{margin: 5px 0 0 -10px !important;}

en augmentant " -10px " -> " -15px" tu réduis l'espace de gauche ...

( pour le CSS % .... c'est autre chose )
avatar

lmc38510
*****

Masculin
Messages : 891
Inscrit(e) le : 22/02/2012

http://lacaverneauxgrimoire.forumactif.org/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment centrer le pseudo avec l'avatar ?

Message par Johan Shura le Dim 14 Mai 2017 - 23:30

Ok, je pense que c'est mieux la ? j'ai mis 30px

Par contre possible de rétrécir la colonne ?
avatar

Johan Shura
Nouveau membre

Masculin
Messages : 19
Inscrit(e) le : 14/05/2017

http://joueur-pc.forumactif.com/
Johan Shura a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Comment centrer le pseudo avec l'avatar ?

Message par lmc38510 le Dim 14 Mai 2017 - 23:47

C'est justement mon histoire de " % "

La largeur de la colonne de gauche "postprofile" est en % et = 22% (actuellement)
La largeur de la colonne de droite " postbody " (le message) est en % et = 76% (actuellement)

Voilà pourquoi je disais:
tu peux en profiter pour diminuer sa largeur au profit de la colonne de droite
En agissant sur "width" de ".postprofile" et ".postbody
Avec ce CSS:

Code:
        /* Largeur colonne gauche et droite*/
        .postprofile{width: 18% !important;}
        .postbody {width: 81% !important;}

Par contre il va falloir diminuer le précédent CSS
@Johan Shura a écrit:Ok, je pense que c'est mieux la ? j'ai mis 30px
passe le à -19px

il faut toujours dans les pourcentages que %(1) + %(2) soit inférieur à 100% (maxi 99%)
exp du CSS 18% + 81% = 99% Very Happy



avatar

lmc38510
*****

Masculin
Messages : 891
Inscrit(e) le : 22/02/2012

http://lacaverneauxgrimoire.forumactif.org/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment centrer le pseudo avec l'avatar ?

Message par Johan Shura le Lun 15 Mai 2017 - 13:21

Ok je viens viens mettre ton code dans le CSS et mis l'ancien à 19px et regarde le résultat stp

avatar

Johan Shura
Nouveau membre

Masculin
Messages : 19
Inscrit(e) le : 14/05/2017

http://joueur-pc.forumactif.com/
Johan Shura a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Comment centrer le pseudo avec l'avatar ?

Message par lmc38510 le Lun 15 Mai 2017 - 13:29

Bonjour "Johan Shura"

Suis allez voir Very Happy

Pour moi c'est nickel ...

La colonne "postprofile" est réduite au minimum l'avatar et pseudo etc sont centrés (comme demandé)

La colonne "postbody" message -> qui est la plus importante ... prends la largeur maximum

et toi tu trouves cela comment Question
avatar

lmc38510
*****

Masculin
Messages : 891
Inscrit(e) le : 22/02/2012

http://lacaverneauxgrimoire.forumactif.org/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment centrer le pseudo avec l'avatar ?

Message par Johan Shura le Mer 17 Mai 2017 - 19:39

Salut, moi c'est bon merci beaucoup de m'avoir aidé
avatar

Johan Shura
Nouveau membre

Masculin
Messages : 19
Inscrit(e) le : 14/05/2017

http://joueur-pc.forumactif.com/
Johan Shura 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