Alignement des liens contacts dans le profil

[minibela]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, 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://prendsunplaid.forumactif.com (ce codage n'est pas encore installé sur le forum, je le fais sur un forum test à côté)

Description du problème

Cela fait plusieurs heures que je cherche la solution, j'ai ouvert différents sujets qui parlaient peut-être de ça dans forumactif, mais je ne trouve pas la solution pour mon problème. Il s'agit ici de l'aperçu du profil lorsqu'on clique sur le pseudo d'une personne et non le profil dans les messages.

Je souhaiterais que les icons des contacts (mp, e-mail, etc.) soient alignés sur une même ligne et centré. J'ai réussi à les mettre ici sur une même ligne, mais cela marche seulement avec la fonction float left, dès que j'essaye de centrer, les images se remettent les unes en-dessous des autres.. Merci d'avance pour les personnes qui pourront m'aider  

voici le code css :

Code:

/*PROFIL APERCU*/
.apercugeneral {border: 3px solid #DED6D5; width: 600px; padding-left: 70px; padding-right: 70px;}
.pseudoprofil {font-family: oswald; color: #7d7d7d; text-align: center; text-transform: lowercase; font-size: 28px !important;
  text-decoration: none !important; font-weight: lighter !important;}
.rangprofil {font-family: oswald; color: #7d7d7d; text-align: center; text-transform: uppercase; font-size:11px !important;
  text-decoration: none !important; font-weight: lighter !important; margin-top: -5px;}
.infosmessages {text-align: center; letter-spacing: 2px; font-size: 9px; text-transform: uppercase; background-color: #F7F0EF; display: inline;
  padding: 7px; margin-left: 7px; margin-right: 7px; margin-top: -5px; font-family: oswald;}
.lienspro {text-align: center;}
.infogeneral {font-size: 10px !important; background-color: #F7F0EF; padding: 10px; text-transform: lowercase; height: 320px;
  width: 340px; border: 1px solid #DED6D5; line-height: 5px;overflow: auto; display: inline-block; !important;}
.avapro {position relative; width:200px; height:320px; overflow:hidden; padding: 10px; background-color: #F7F0EF; border: 1px solid #DED6D5;}
.profil1 h1{background-color: #EBE3E2; margin-bottom: 3px; margin-top: -1px;}
.infoprofila {background-color: #F7F0EF; border: 1px solid #DED6D5; padding: 3px; height: 40px; margin-top: 5px;}
pp1{font-family: oswald; text-transform: uppercase; font-size: 14px; color: #613F3D; margin-top: 5px;}
.pp2 {font-family: oswald, sans-serif; text-transform: lowercase; font-size: 12px; color: #613F3D; margin-top:-3px;}
aa1 {line-height: 10px;}
#contactpro {background-color: #F7F0EF; border: 1px solid #DED6D5; height: 40px; padding: 3px; text-align: center; margin-top: 5px;}
.contactpro img {float: left; margin-top: 10px; padding: 2px;}

et mon template :

Code:

 <table width="50%" align="center" class="apercugeneral"><tr>  
    
    <td colspan="2">  <h1 class="h_member"><div class="pseudoprofil">{L_VIEWING_PROFILE}</div><div class="rangprofil">{POSTER_RANK}</div></h1>
    <!-- BEGIN profile_field -->
 <!-- BEGIN profil_type_user_posts -->
                         <div class="lienspro"><div class="infosmessages">
 <upq><a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">ses {L_TOPICS}</a></upq>
                              </div><div class="infosmessages">
 <upq><a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">ses {L_POSTS} postés</a></upq>
                              </div><div class="infosmessages" colspan="2">
    <upq><a rel="nofollow" class="genmed" href="/st/{PUSERNAME}">ses sujets ouverts</a></upq>
                           </div></div>                          <!-- END profil_type_user_posts -->
                  <!-- END profile_field --><br></td></tr><tr><td>
                  <div class="infogeneral">                    
                   <!-- BEGIN profile_field -->
                    <table> <tr id="field_id{profile_field.ID}"> <td><aa1>{profile_field.LABEL}</aa1></td><td><aa1>{profile_field.CONTENT}</aa1></td></tr>
  </table>
                                
 <!-- END profile_field -->
                    </div>        
  <!-- BEGIN switch_auth_user -->
                <div class="infoprofila"> <center>  <span class="gen"><pp1>{USER_ONLINE} ~ {ADMINISTRATE_USER}</pp1></span>
  <!-- END switch_auth_user -->
      
  <span class="gen"><div class="pp2">{L_LAST_VISITED}: {LAST_VISIT_TIME} ✩ {L_PRIVATE_MSG}: {PRIVATE_MSG}</div></span>
                  
    </center> </div>              
          </td>
    <td align="center" valign="top" height="120" width="250"><div class="avapro"><span class="gen"><span id="avatar_membre">{AVATAR_IMG}</span></span>
                  </div>
     <div id="contactpro"><!-- BEGIN contact_field -->
      <center><div class="contactpro">{contact_field.CONTENT}</div></center>
       <!-- END contact_field --></div>  </td></tr>

[minibela]

un petit up

[*Splash*]

Hi,
Le template en question c'est bien le profile_view_body ?

[minibela]

Oui tout à fait j'ai oublié de le préciser

[*Splash*]

Essaie d'ajouter un margin-left à cette ligne de ton code CSS :

Code:

.contactpro img {float: left; margin-top: 10px; padding: 2px;margin-left: 5px;}

[minibela]

ça peut effectivement permettre de les décaler un petit peu, mais ça ne me les centre pas. en sachant que là j'ai toutes ces icons comme sur mon image, mais les membres ne verront par exemple par les e-mails donc l'alignement ne donnera pas la même chose chez eux.. alors que si je pouvais vraiment les centrer ça serait pareil peu important le nombre d'icons tu vois ?

en fait, je comprends pas pourquoi, si je mets par exemple float: center, bah les icons vont se mettre les unes en-dessous des autres du coup..

[*Splash*]

OK, regarde ce lien qui parle de la propriété display: flex au lieu d'utiliser un float :
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/3298561-faites-votre-mise-en-page-avec-flexbox

[minibela]

super je ne connaissais pas du tout et c'est clairement hyper utile
merci beaucoup pour ton aide, ça fonctionne parfaitement

[*Splash*]

De rien