Comment centrer le pseudo avec l'avatar ?

[Johan Shura]

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

[lmc38510]

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 "

[Johan Shura]

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.

[lmc38510]

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 )

[Johan Shura]

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

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

[lmc38510]

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

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%

[Johan Shura]

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

[lmc38510]

Bonjour "Johan Shura"

Suis allez voir

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

[Johan Shura]

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