Informations du profil qui se placent en dessous

[Hitoki]

Détails techniques

Version du forum : PunBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Internet Explorer, Opera
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://deliquescence.actifforum.com/

Description du problème

Bonjour Bonjour

C'est encore moi !

Je rencontre un souci et je ne sais pas comment l'arranger.

En fait, les informations du profil, à la place d'être devant essences par ex, vont en dessous. J'ai mis une capture d'écran pour que ça vous paraisse plus clair.

Que dois je faire pour arranger ça ?

Voilà mon css

Code:

/****************************************** Profile_view_body ***************************************/

/* Contenant */

#block_profil {
  background: #101013;
    border: 1px solid #530f04;
  display: block;
  Palatino linotype,Arial,Helvetica,sans-serif;
  height: 410px;
  margin: auto;
  width: 850px;
}


/* Bloc profil */

.bloc_profil2 {
  margin-left: 9px;
}

/* Fond information profil */

div.info_profil2 {
 background: #1a1730;
      border: 1px solid #530f04;
      border-radius: 20px 20px;
  float: left;
  font-style: normal !important;
  height: 290px;
  padding: 10px 10px;
    margin: 15px 0 0 15px;
  width: 245px;


}


/* bloc fiche personnage */

div.fiche_perso2 {
background: #1a1730;
      border: 1px solid #530f04;
      border-radius: 20px 20px;
  float: left;
  font-style: normal !important;
  height: 290px;
  padding: 10px 10px;
    margin: 15px 0 0 15px;
  width: 245px;
 
}


/* Marge gauche bouton e-mail */

#i_icon_email, #i_icon_pm {
background: #1a1730;
      border: 1px solid #530f04;
      border-radius: 20px 20px;
  margin: 15px 15px;
  padding: 10px 10px;
}

/* Boutons MP EMAIL */



 .avat img{
  display: block;
    float: left;
  height: 400px;
  width: 300px;
}

/* Fond nom */

 .blockname2 {
 background: #100000;
  border: 1px solid #530f04;
  border-radius: 10px 10px 0 0;
      justify-content: center;
  height: 70px;
    align-items: center;
  margin: auto;
  padding: 10px 10px;
  text-align: center;
  width: 850px;

}

/* Nom */

div.name2 {
    font-family: 'Dancing Script', cursive !important;
    font-size: 30px;
  margin: auto;
  text-align: center;
 
}



Et mon template

Code:

<div class="blockname2"><div class="name2"> {USERNAME}</div>{POSTER_RANK}</div><div id="block_profil">

   <div>
         

         
              <div class="avat">    <span id="avatar_membre">{AVATAR_IMG}</span>
                                   <div class="info_profil2"><!-- BEGIN profile_field -->
         
                       
                        {profile_field.LABEL}{profile_field.CONTENT}
                 
      
         <!-- END profile_field -->
                 
                      <a rel="nofollow" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS} :</a>
    <br />&nbsp;- <a rel="nofollow" href="/sta/{PUSERNAME}">{L_TOPICS}</a>
    <br />&nbsp;- <a rel="nofollow" href="/spa/{PUSERNAME}">{L_POSTS}</a></div>
   
                                                                <div class="fiche_perso2"><!-- BEGIN switch_rpg -->
   

   
   
      

      <fieldset>
      <!-- BEGIN rpg_fields -->
         <dl>
            <dt>{switch_rpg.rpg_fields.F_NAME} :</dt>
            <dd>{switch_rpg.rpg_fields.F_VALUE_NEW}</dd>
         </dl>
      <!-- END rpg_fields -->
      </fieldset>
                                                             
       
      <br class="clear" />
      <fieldset class="frm-set clearfix">
         <div class="frm-buttons">
            {U_ADMIN_RPG}
         </div>
      </fieldset>
      <br />
                                                  <!-- END switch_rpg --></div> 
   </div>
                  
            



                               <div class="boutonsprofil2"><!-- BEGIN contact_field -->
{contact_field.CONTENT}
            
            <!-- END contact_field --></div>
</div>

</div>

   <br class="clear" />   <br />   <br />
<script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
   $(document).ready(function(){
      $('[id^=field_id]').each(function(){
         if ( $(this).find('.field_editable').is('span, div') )
         {
            $(this).hover(function()
            {
               if( $(this).find('.field_editable.invisible').is('span, div') )
               {
                  $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
                  $(this).find('.ajax-profil_edit').attr({
                        alt: "{L_FIELD_EDIT_VALUE}",
                        title: "{L_FIELD_EDIT_VALUE}"
                     }).click(function(){
                     $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
                     $(this).prev().find('.ajax-profil_valid').attr({
                        alt: "{L_VALIDATE}",
                        title: "{L_VALIDATE}"
                     }).click(function(){
                        var content = new Array();
                        $(this).parent().find('[name]').each(function(){
                           var type_special = $(this).is('input[type=radio],input[type=checkbox]');
                           if ( (type_special && $(this).is(':checked')) || !type_special )
                           {
                              content.push(new Array($(this).attr('name'), $(this).attr('value')));
                           }
                        });
                        var id_name = $(this).parents('[id^=field_id]').attr('id');
                        var id = id_name.substring(8, id_name.length);
                        $.post(
                           "{U_AJAX_PROFILE}",
                           {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
                           function(data){
                              $.each(data, function(i, item){
                                 $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
                              });
                           },
                           "json"
                        );
                     });
                     $(this).remove();
                  });
               }
            },function()
            {
               if( $(this).find('.field_editable.invisible').is('span, div') )
               {
                  $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
                  $(this).find('.ajax-profil_edit').remove();
               }
            });
         }
      });
   });
//]]>
</script>

Merci d'avance à la personne qui m'aidera à résoudre mon problème !

['Christa]

Hellow !

Alors il va falloir recoder un petit peu tout ça parce que si on se contente d'une touche de CSS, tout va se retrouver sur une ligne XD

Cherche cette partie dans le HTML de ton profil :

Code:

<!-- BEGIN profile_field -->                
    {profile_field.LABEL}{profile_field.CONTENT}
<!-- END profile_field -->

Et rajoute un élément div pour être bien sûr que chaque champ de profil aura son conteneur :

Code:

<!-- BEGIN profile_field -->                
    <div class="chProfil">
        {profile_field.LABEL}{profile_field.CONTENT}
    </div>
<!-- END profile_field -->

Par la suite, en principe, tout ce qu'il te restera à faire sera de forcer la partie qui affiche la valeur d'un champ à s'afficher en ligne. Je ne sais plus si ça interfère avec l'édition à la volée du profil ou pas, donc à voir entre display:inline ou display:inline-block.

Code:

.chProfil .field_uneditable { display : inline }

[Hitoki]

Oh yeah, c'est tout à fait ça OO

Tout est dorénavant nickel !

Gros merci à toi !

Le sujet est résolu !