Profil qui s'affiche en largeur, mais pas en hauteur.

[Trw]

Bonjour!  

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : changement de code pour le profil
Lien du forum : https://thereverseworld.forumactif.com/

Description du problème

Suite au changement de visuel de notre forum nous avons changer le code du profil, cependant, le profil s'affiche en largeur avec une scroll barre, et coupe les nombreuses informations, mais nous aurions aimer qu'il soit possible de "changer" le sens pour que tout s'affiche en hauteur afin que rien ne soit couper. Est-ce possible?

Merci d'avance pour votre aide...
Voici les visuels du problème


Ainsi que le template modifié:

Code:

<div class="profile_arte">
 <div class="block_left_profile">
 <div class="rank_profilemember">{POSTER_RANK}</div>
 <div class="avatar_member_a">
 {AVATAR_IMG}
 </div>
 <div class="infos_members">
 <div>
 dernière visite
 </div>
 <span>{LAST_VISIT_TIME}</span>
 <div>
 voir les
 </div>
 <span><a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a></span>
 <div>
 voir les
 </div>
 <span><a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a></span>
 </div>
 <div id="online">{postrow.displayed.ONLINE_IMG}</div>
 </div>
 <div class="block_right_arte">
 <div class="pseudo_member_a">
 {L_VIEWING_PROFILE}
 </div>
 <div class="member_i_ch">
 <!-- BEGIN profile_field -->
 <div class="champ_profile">
 {profile_field.LABEL}
   <center><span>{profile_field.CONTENT}</span></center>
 </div>
                  <!-- END profile_field -->
 </div>
 </div>
 <div class="contact_profile">
 <!-- BEGIN contact_field -->
 {contact_field.LABEL} {contact_field.CONTENT}
 <!-- END contact_field -->
 </div>
</div>
<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>

Et le CSS:

Code:

/**************************AFFICHAGE*PROFIL*********/

.profile_arte {
  width: 850px;
  height: 500px;
  background: url(https://zupimages.net/up/17/46/t4i9.png);
  margin: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 2px solid #101010;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 20px;
  color: white;
  font: 10px calibri;
  position: relative;
  
}

.block_left_profile {
  width: 170px;
  height: 320px;
  
}

.avatar_member_a {
  border: 1px solid white;
  border-radius: 0%;
  width: 109px;
  height: 173px;
  padding: 20px;
  position: relative;
  margin-bottom: 20px;
}

.avatar_member_a img {
  border-radius: 0%;
  display: block;
  position: relative;
  z-index: 9;
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  width: 109px;
  height: 173px;
  -o-object-fit: cover;
     object-fit: cover;
  
}

.avatar_member_a img:hover {
  -webkit-filter: grayscale(1);
          filter: grayscale(1)
}



.infos_members {
  text-align: center;
  width: 140px;
}

.infos_members > div {
  background: white;
  color: black;
  text-transform: uppercase;
  margin-bottom: 2px;
  margin-top: 10px;
  padding: 2px;
}

.infos_members a {
  text-decoratione: none !important;
  color: white;
}



.block_right_arte
{
  width: 620px;
  height: 430px;
  overflow: auto;

}

.pseudo_member_a {
  width: 100%;
  height: 50px;
  font-size: 0;
  letter-spacing: -2px;
  text-transform: lowercase;
  position: relative;
}

.pseudo_member_a span {
  display: block;
  font: 20px georgia;
  text-transform: lowercase;
    font-style: italic;
  color: white;
  
}

.rank_profilemember {
  display: block;
  font: 10px calibri;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-top: -10px;
}

.pseudo_member_a:after {
  content: " ";
  border-top: 1px solid white;
  width: 100%;
  position: absolute;
  right: 0;
  bottom: 15px;
}

.member_i_ch {
  height: 200px;
  width: 100%;
  -webkit-columns: 2;
     -moz-columns: 2;
          columns: 2;
  line-height: 20px;
}

.champ_profile {
  text-transform: uppercase;
  border: 1px solid #1f1f1f;
  padding: 2px;
  background: #101010;
  margin: 3px;
}

.champ_profile:first-child {
  margin-top: 0;
}

.member_i_ch span {
  text-transform: uppercase;
}

.field_uneditable {
  display: inline-block;
}

.contact_profile {
  padding: 5px;
  background: #1f1f1f;
  width: 830px;
  height: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.contact_profile a {
  margin: 0 3px;
}


Merci d'avance s'il vous est possible de nous aider

[Invité]

Hello Trw,


dans ta feuille de style, tu as ceci:

Code:

.member_i_ch {
  height: 200px;
  width: 100%;
  -webkit-columns: 2;
    -moz-columns: 2;
          columns: 2;
  line-height: 20px;
}

Supprimes ces trois lignes:

Code:

  -webkit-columns: 2;
    -moz-columns: 2;
          columns: 2;


a++

[Trw]

merci beaucoup !

Tu nous sauves la vie!
Je met en résolu!