Avatar non centré

[Elwilya]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
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
Problème apparu depuis : 01/12/2020
Lien du forum : https://shelbycompagny.forumactif.com

Description du problème

Bonjour,

Je viens de créer de ce forum et d'y intégrer le thème. Mon soucis (outre le CSS immonde que j'y ai découvert), est que je n'arrive pas à centrer l'avatar sur le bloc profil, ni à adapter le bloc profil en fonction de la taille de l'avatar. J'ai testé avec une taille d'avatar plus importante et ça dépasse à gauche, c'est très moche.

Je vous mets un morceau du code, mon soucis devrait se trouver là-dedans. Je m'excuse sincèrement de ne pas avoir prit le temps de le remettre totalement en forme :

Code:

.postprofile-details{text-align:center;}

.postprofile img{
margin:6px 0;
border-radius:10px;
background-position : center;
}

.post .post-header{background-image:url('https://i.servimg.com/u/f35/11/95/30/70/35px10.png');}

.post .post-footer{background-image:url('https://i.servimg.com/u/f35/11/95/30/70/t310.jpg');}

.postbody{background-image:url('https://i.servimg.com/u/f35/11/95/30/70/fond_c13.jpg'); background-position:left; border:1px solid  #000;}

.postprofile-head .popmenubutton-new-out{background-color:transparent; border:none; text-align:center !important;}

.post .popupmenu{background-color:#23201b;border:1px solid #2e2b26;-moz-border-radius:12px 0px 12px 0px;-webkit-border-radius:12px 0px 12px 0px;border-radius:12px 0px 12px 0px;padding:7px;-moz-box-shadow:0px 0px 6px #000;-webkit-box-shadow:0px 0px 6px #000;box-shadow:0px 0px 6px #000;}

.postprofile-head ul{background-color:#191919; border:1px solid #2e2b26;border-bottom:none; border-top:none; padding:7px;}

.postprofile-head ul li{background-color:#28251f;border:1px solid #2e2b26;border-bottom:none;border-top:none;}

.post .avatar{background-color:#23201b;
  border:1px solid #2d2d2d;
  -moz-border-radius:12px 0px 12px 0px;
  -webkit-border-radius:12px 0px 12px 0px;
  border-radius:12px 0px 12px 0px;}

Je vous remercie par avance de votre coup de main !

[Self]

Bonsoir, tout est bien centré mais l'image de fond nous donne l'impression que non. On peut corriger ça en ajoutant un padding-left à la règle suivante :

Code:

.postprofile-details {
    text-align: center;
}

Qui donnerait :

Code:

.postprofile-details {
    text-align: center;
    padding-left: 26px;
}

[Elwilya]

Bonsoir,

Merci pour la réponse rapide ! Ça fonctionne convenablement ! Est-il toute fois possible que cet ajustement se fasse tout seul si j'agrandi la taille des avatars ? Ou devrais jouer avec le padding ?

Edit : là je viens de passer l'avatar en 200*300 pour tester et ça donne ça :

[Self]

Ok, on reprend cette partie la :

Code:

.postprofile-details {
    text-align: center;
    padding-left: 26px;
}

Et on remplace par :

Code:

.postprofile-details {
    text-align: center;
    margin-left: 7px;
}

Puis on trouve ce passage :

Code:

.post{border:1px solid #000;background-image:url('https://i.servimg.com/u/f30/13/30/32/72/t_fond10.jpg');background-position: right;}

Qu'on remplace par :

Code:

.post{border:1px solid #000;background-image:url('https://i.servimg.com/u/f30/13/30/32/72/t_fond10.jpg');}

Mais on ne pourra pas augmenter la taille de l'avatar plus que la.

[Elwilya]

Bonjour, un très grand merci pour ton aide, c'est fonctionnel !