Affichage du gif

[Argimpasa]

Détails techniques

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

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 07/05/2023
Lien du forum : https://royalemasquerade.forumactif.com/

Description du problème

Bonjour,

Comme vous pouvez le voir, le gif déborde sur le profil.
J'aimerais savoir comment faire pour que le gif s'adapte à la largeur des informations du profil.

Je vous donne mes codes CSS et Template :

Code:

#page-header {
text-align: center;
}
/* BARRE DE NAVIGATION ET NOTIFIFCATION */

.navvy {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
    background: #f1f0f4;
    list-style: none;
    height: 50px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}
.barredenav a[href="/faq"] {
  display:none;
}
.barredenav li a:nth-child(1) {
    padding: 10px;
}
a.mainmenu img {
  height:20px;
}
.barredenav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 450px;
}
.js-avatar {
    width: 104px;
    height: 104px;
    border-radius: 100%;
    overflow: hidden;
    border: solid 2px #f1f0f4;
}
.js-avatar img {
  width:100%;
}
.fa_tbMainElement#fa_left,
.fa_tbMainElement#fa_search,
.fa_tbMainElement#fa_share,
#fa_menu,
.rightHeaderLink#fa_hide,
.fa_tbMainElement#fa_right a.rightHeaderLink {
  display:none!important;
}
#fa_toolbar {
    background-color: transparent!important;
    top: -42px;
    position: absolute;
    padding: 5px;
    width: 99%;
    z-index: 9999 !important;
}
#fa_right {
    float: left !important;
    font-size: 1.3rem;
}
.fa_tbMainElement#fa_right a.rightHeaderLink#fa_notifications {
    display: block!important;
    position: absolute;
    z-index: 999;
    height: 30px;
    width: 30px;
    top: 44px;
    left: 0;
    margin-left: 86%;
    text-align: center;
    background-image: url(https://i.imgur.com/hyrAhLB.png);
    background-repeat: no-repeat;
    border-radius: 0px;
    text-decoration: none!important;
    font-size: 0px;
}
#fa_toolbar #fa_right #notif_list li:first-child{
    background-size: 100%;
  padding-top:10px;
}
#fa_toolbar #fa_right #notif_list li hr{
  margin:0 -10px 9px;
}
#fa_menu:hover:visited, #fa_toolbar > #fa_right.notification > #fa_notifications {
    background-image: url(https://i.imgur.com/2rejpb1.png);
    background-color: #f1f0f4;
    width: 25px;
}
#fa_toolbar #fa_right.fa_tbMainElement {
    position: relative;
    width: 29%;
}
#fa_toolbar #fa_right.notification #notif_list {
    top: 100px!important;
    left: 80% !important;
    max-width: 400px;
    min-width: 170px;
    padding: 5px;
    background: #f1f0f4;
    border: none;
    background-position: bottom;
    border-radius: 0px !important;
    box-shadow: none !important;
}
#fa_toolbar #fa_right #notif_list li .content,
#fa_toolbar #fa_right #notif_list li {
  font-size:12px;
}
#fa_toolbar #fa_right #notif_list li{
  padding:10px;
}
#fa_toolbar #fa_right #notif_list li .contentText {
    overflow: visible!important;
    width: 340px !important;
    height: auto!important;
    color: #0d0c0b!important;
    font-family: Calibri;
}
.fa_tbMainElement#fa_right a.rightHeaderLink.unread#fa_notifications {
    background-image: url(https://i.imgur.com/2rejpb1.png);
    background-color: #f1f0f4;
    width: 25px;
}
#fa_toolbar #fa_right #notif_list li.unread {
    background: #f9f9f9;
    font-weight: lighter;
}
#fa_toolbar #fa_right #notif_list li.see_all {
    text-align: center!important;
    background: #f1f0f4;
    padding: 5px!important;
    font: 10px calibri !important;
}
#fa_toolbar #fa_right #notif_list li.see_all a{
  color:black;
  text-decoration:none !important;
  font-style:italic;
}
#fa_toolbar #fa_right #notif_list li .contentText a {
    color: #262929!important;
    font-weight: bold;
    font-style: italic;
}
#fa_toolbar #fa_right #notif_list li a.delete{
color:#393b51;
}

/* FIN NAV ET NOTIF */

/***TRUCS***/
.module{
    background-color: #F1F0F4!important;
}
@font-face {
  font-family: 'Hamilton';
  src: url('https://files.jcink.net/uploads/shine/fonts/Hamilton.ttf');
}

/*modifier l'apparence des scrollbars de tout le forum*/
::-webkit-scrollbar {
  width: 5px; /*largeur de la scrollbar verticale*/
  height: 5px; /*hauteur de la scrollbar horizontale*/
  background-color: #f6f5f8;}

::-webkit-scrollbar-track {
  background-color: #262929; /*couleur du fond de la scrollbar*/
  border: 2px solid #f6f5f8;
}

::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
  background-color: #262929 /*couleur de l'ascenseur*/;
  border: 1px solid #f6f5f8;
 }

.body{
  margin:0;
  overflow-x: hidden;
}

.bodyline{
  padding:0;
}

a, a:link, a:hover, a:link{
  text-decoration: none!important;
  font-weight: !important;
}

.copyright-body {
  border-color: #f6f5f8;
}

#logo{
 float: none!important;
}

#logo img{
    width:100%;
  margin-top: -5px;
}
.panel {
    background: #F6F5F8!important;
    box-shadow: none!important;
    width: 100%;
}
.panel.introduction {
    background: transparent!important;
    box-shadow: none!important;
}

.the_msg img {
    max-width: 550px!important;
}
#wrap{
 padding: 0!important;
}

.selectCode{
float: right;
}

.mentiontag:link, .mentiontag:visited {
    color: #C07C59;
    background-color: transparent!important;
    font-weight: bold!important;
}

/* FLECHE NAV */

.haut {
    position: fixed;
    bottom: 15%;
    right: 50px;
    z-index: 999;
}
.basbas {
    position: fixed;
    bottom: 10%;
    right: 50px;
    z-index: 999;
}

.haut span {
    font-size: 20px;
    transition: 1s linear;
    color: #c07c59;
}
.basbas span {
    font-size: 20px;
    transition: 1s linear;
    color: #c07c59;
}

/*FIN FLECHE NAV */

/*========== WIDGET DÉBUT ==========*/

#widgets {
  float: right;
  margin-top: 221px;
  margin-bottom: -213px;
  margin-right: -175px;
  width: 160px;
  text-align: center;
}


a.widget_carte, #widgets h2 {
  display: block;
  color: #1d1f22;
  font: 11px DM Serif Display;
  text-transform: uppercase;
}
#widgets a.votation {
  font: 16px DM Serif Display;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-block;
}

/*========== WIDGET FIN ==========*/


/*CATES MYRDDIN */

.bigtitle {
    text-align: center;
}
.bigtitle h2 {
    color: #262929;
    font: 30px DM Serif Display;
    text-transform: uppercase;
}
.sousligne {
    font: 31px Hamilton;
    text-transform: initial;
    margin: -20px 0px 15px 0px;
    padding-left: 100px;
    color: #c07c59;
}
.categorie {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: #f1f0f4;
    padding: 10px;
    margin-bottom: 10px;
    height: 110px;
}
.newmessage {
    width: 4px;
    height: 90px;
}
.blok {
    width: 234px;
    padding-left: 20px;
}
.titlefo {
  text-align:center;
  padding-bottom:5px;
}
.titlefo a{
    font: 15px DM Serif Display;
    color: #262929;
    text-transform: uppercase;
}
.blok div:nth-child(2){
    font: 10px roboto;
    text-align: left;
    height: 64px;
    overflow: auto;
}
.blok div:nth-child(2) a{
    color: #c07c59;
    display: inline-block;
    width: 49%;
    text-align: left;
}

.descriptionfo {
    width: 250px;
    height: 75px;
    padding: 0px 10px 10px 10px;
    overflow: auto;
    text-align: justify;
    font: 10px roboto;
    color: #262929;
}
.lastpostvava {
    width: 59px;
    height: 71px;
    overflow: hidden;
    margin: 10px 10px 0px 10px;
    border: solid 2px #f6f5f8;
    box-shadow: 1px 1px 10px #f1f1f1;
}
.lastpostvava img {
  width:100%;
}
.lastpost {
    width: 120px;
    text-align: center;
    padding-top: 26px;
    line-height: 16px;
    font: 10px roboto;
    color: #262929;
}
.lastpost a {
    font-size: 11px;
    color: #c07c59;
}
.stats {
    width: 70px;
    padding: 0px 5px 5px 8px;
}
.sujetsstat {
    font: 50px DM Serif display;
    color: #262929;
    margin-top: -10px;
    letter-spacing: -4px;
}
.messstats {
    font: 50px DM Serif display;
    color: #c07c59;
    margin-top: -44px;
    padding-left: 10px;
    letter-spacing: -4px;
}
.cat_linkbottom {
  width: 900px;
  margin: 0 auto 30px;
  text-align: center;
}
.cat_linkbottom a {
  color: #C07C59;
  font: 9px Roboto;
  text-transform: uppercase;
  display: inline-block;
  margin: 0 9px;
}

/***FIN CATE MYRDIN***/

/**** QEEL MYRDDIN ****/

#page-footer {
    margin-bottom: 10px !important;
    font: 9px roboto;
    color: #dad9df;
    padding: 5px;
    line-height: 0;
    text-align: center;
    background: #f6f5f8 !important;
    width: 100%!important;
}
#page-footer a {
    color: #dad9df;
    letter-spacing: 1px;
    font:9px roboto;
}

.welcometoi {
    font: 55px Hamilton;
    text-align: center;
    color: #c07c59;
    margin: 80px 0px -40px 0px;
}
#dernier_membre {
    text-align: center;
}
#dernier_membre strong {
    font: 30px DM Serif Display;
    text-transform: uppercase;
}
#dernier_membre a {
  color: #262929;
}
.totalqeel {
    background: #f1f0f4;
    padding: 10px;
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.blokco {
    width: 300px;
}
.blokco h1 {
    color: #262929;
    font: 20px DM Serif Display;
    text-transform: uppercase;
}
.totalusers{
    font: 8px roboto;
    color: #c07c59;
}
#jambon {
    width: 300px;
    padding: 10px 10px 10px 0px;
    height: 90px;
    overflow: auto;
    text-align: justify;
    font-size: 11px;
}
#jambon br {
display:none;
}
.bloklast {
    width: 230px;
}
.premier {
    width: 64px;
    height: 64px;
    padding: 16px 10px 10px 10px;
    background: #c07c59;
    text-align: center;
    color: #f6f5f8;
    margin: -35px auto;
    font: 10px roboto;
    vertical-align: middle;
    border-radius: 100%;
    transition: 1.2s linear;
    border: solid 2px #f6f5f8;
    box-shadow: 1px 1px 10px #f1f1f1;
}
#avatar_dernier_membre {
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 100%;
    opacity: 0;
    margin: -42px -30px -30px -30px;
    position: absolute;
    transition: 1.2s linear;
}
.premier:hover #avatar_dernier_membre {
  opacity:1;
  transition-duration: 1s;
  transition-timing-function: ease;
}
#avatar_dernier_membre img {
  width:100%;
}
.groupsqeel {
    padding: 10px;
    text-align: center;
    margin-top: 40px;
}
.groupsqeel img {
  padding:0px 5px 0px 5px;
}
.bloklastco {
    width: 300px;
}
.bloklastco h1 {
    color: #262929;
    font: 20px DM Serif Display;
    text-transform: uppercase;
}
#mayonnaise {
    width: 300px;
    padding: 0px 10px 10px 0px;
    height: 90px;
    overflow: auto;
    text-align: justify;
}

#mayonnaise a {
font-size: 11px;
}

#jambon a {
font-size: 11px;
}
/**** FIN QEEL MYRDDIN ****/

/* --------- AFFICHAGES MESSAGES (C) SUNHAE --------- */

#wrap-topic {
    width: 800px;
    margin: auto;
    display: flex;
    flex-flow: wrap;
}

#header-topic {
    background-color: #f1f0f4;
    width: 100%;
    color: #c07c59;
    font-size: 11px;
    font-style: italic;
    line-height: 27px;
    height: 80px;
    display: flex;
    align-content: center;
    flex-flow: wrap;
    justify-content: center;
}

#header-topic .sousligne {
    font: 11px 'Roboto', sans-serif;
    font-style: italic;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    display: inline-block;
}

#header-topic a:not(:first-of-type) {
    color: #c07c59;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: -0.5px;
}

#header-topic a:first-of-type {
    color: #262929;
    font-family: 'DM Serif Display', serif;
    font-size: 23px;
    text-transform: uppercase;
    font-style: normal;
    line-height: 30px;
    width: 100%;
    text-align: center;
}

.new-reply-topic,
.topic-pagination {
    display: flex;
    align-content: center;
    flex-flow: wrap;
}

.topic-pagination,
#pagination_memberlist {
    margin-left: auto;
    text-transform: uppercase;
    font-family: initial;
    font: 11px 'Roboto', sans-serif;
    letter-spacing: -1px;
    color: transparent;
}

.topic-pagination>div,
#pagination_memberlist>div {
    margin: 20px 0 5px;
}

.topic-pagination>div a,
#pagination_memberlist>div a {
    color: #c07c59;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    text-transform: lowercase;
    font-style: italic;
    letter-spacing: -0.5px;
}

.new-reply-topic a {
    padding: 28px 17px 28px 25px;
}

.topic-pagination span strong,
#pagination_memberlist strong {
    padding: 0 0 0 5px;
}

.topic-pagination span,
#pagination_memberlist span {
    color: #262929;
}

.topic-pagination strong,
#pagination_memberlist strong {
    color: #c07c59;
    padding: 0 2px;
}

.topic-pagination .pag-img,
#pagination_memberlist .pag-img {
    display: none;
}

.header-message {
    width: 100%;
    height: 86px;
    display: flex;
    flex-flow: wrap;
    justify-content: flex-end;
    align-content: center;
    position: relative;
    padding: 0 50px 0 0;
    color: #f6f5f8;
    font: 10px 'Roboto', sans-serif;
    font-weight: lighter;
    font-style: italic;
    background-color: #262929;
}

.header-message div {
    position: absolute;
    left: 35px;
    bottom: 22px;
}

.header-message span,
.header-message a[href*="/u"] {
    width: 100%;
    text-align: right;
}

.header-message span {
    font: 20px 'DM Serif Display', serif;
    font-style: normal;
    margin-right: -20px;
}

.header-message span,
.header-message>a {
    width: 100%;
}

.header-message strong {
    color: #f6f5f8;
    font-weight: 100;
}

.header-message>div img {
    padding: 0 2px;
}

.wrap-topic-content {
    background-color: #F1F0F4;
    display: flex;
    flex-flow: wrap;
    justify-content: space-evenly;
    width: 100%;
    padding: 19px 0;
}

.topic-content {
    width: 538px;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-content: flex-start;
    padding-top: 6px;
}

.topic-content,
.topic-content>a {
    color: #C3C3C3;
    font: 10px 'Roboto', sans-serif;
    font-weight: lighter;
    font-style: italic;
}

.topic-content>div a {
    font-weight: bold !important;
}

.topic-content>div {
    color: #262929;
    font-style: normal;
    text-align: justify;
    font-weight: normal;
    font-size: 12px;
    border-top: 1px solid #C3C3C3;
    padding: 18px 0;
    margin-top: 8px;
    width: 100%;
}

.topic-content>div img {
    max-width: 100%;
}

.topic-avatar {
    border: 2px solid #F6F5F8;
    overflow: hidden;
    width: 196px;
    height: 396px;
    position: relative;
}

.topic-avatar>div img {
    max-width: 100%;
}

.topic-avatar>a img {
    width: 196px;
}

.topic-avatar>div {
    position: absolute;
    top: 396px;
    background-color: #ffffffe0;
    width: 200px;
    height: 320px;
    transition: all 1s;
    padding: 5px 20px 10px;
    font: 11px 'Roboto', sans-serif;
    letter-spacing: -0.5px;
    overflow-y: auto;
    overflow-x: hidden;
}

.topic-avatar:hover>div {
    top: 0;
}

.feuille-de-perso a[href*="/u"],
.title-profil {
    font: 30px 'Hamilton', cursive;
    color: #c07c59;
    text-align: right;
    display: block;
    height: 32px;
    text-transform: lowercase;
  white-space: nowrap;
}

.topic-avatar .label {
    text-transform: uppercase;
    font-weight: bold;
    line-height: 15px;
    color: #262929
}

.topic-avatar>div .label span,
.feuille-de-perso {
    color: #262929 !important;
}

.feuille-de-perso textarea {
    min-width: 100%;
    max-width: 100%;
    display: block;
    height: 50px;
    background-color: #F6F5F8;
    padding: 6px;
    overflow: auto;
    margin-bottom: 10px;
    font-size: 10px;
    text-align: justify;
    line-height: 12px;
}

/*.feuille-de-perso br { display: none; }*/

.topic-avatar .contact_link_p {
    position: sticky;
    bottom: 5px;
    margin: 10px -10px 0 0;
    font-size: 0;
    text-align: right;
}

.topic-avatar .contact_link_p a:first-child {
    padding-right: 7px;
}

.separation {
    width: 555px;
    margin: auto;
    height: 1px;
    background-color: #C3C3C3;
    margin: 15px 0 2px;
}

.signature-topic {
    width: 100%;
    max-height: 280px;
    padding: 5px;
    overflow: auto;
}

.signature-topic img {
    max-width: 100%;
}

#wrap-topic a[name="quickreply"]+.h3 {
    display: none;
}

#wrap-topic form#quick_reply {
    width: 100%;
}

#wrap-topic .sceditor-container,
#wrap-topic .sceditor-container iframe,
#wrap-topic .sceditor-container textarea,
#wrap-topic .sceditor-toolbar {
    background-color: #F1F0F4 !important;
    width: 100% !important;
    font-family: 'Roboto', sans-serif;
}

#wrap-topic #quick_reply #textarea_content {
    box-shadow: none;
}

#wrap-topic #quick_reply #textarea_content+div input {
    background-color: #ECEBF0;
    box-shadow: none;
    border-radius: 0;
    font: 15px 'DM Serif Display', serif;
    color: #c07c59;
    text-transform: uppercase;
    margin: 0px 10px 10px 10px;
    height: 35px;
    padding: 0 15px;
}

#topic-form label {
    font-size: 0;
}

#topic-form select {
    background-color: #F1F0F4;
    border: none;
    font-size: 10px;
    padding: 3px 5px;
}

#topic-form fieldset {
    margin: 55px 0 28px;
}

#topic-form input {
    background-color: #ECEBF0;
    box-shadow: none;
    border-radius: 0;
    font: 12px 'DM Serif Display', serif;
    color: #c07c59;
    text-transform: uppercase;
    margin: 0 5px;
    height: 21px;
    padding: 0 5px;
}

/* Affichage du bloc des permissions */
.permissions {
    width: 100%;
    background-color: #F1F0F4;
    padding: 20px 25px;
    font: 11px 'Roboto', sans-serif;
}

.permissions a {
    color: #c07c59;
}

.permissions .h3 {
    border: none;
    font: 13px 'DM Serif Display', serif;
    text-transform: uppercase;
    margin-bottom: 5px;
}

/** CITATION CODE SPOILER **/
blockquote,
dl.codebox {
    margin: 0 0 20px;
    background: none;
    font: 12px 'Roboto', sans-serif;
    padding: 0;
    border: none;
}

blockquote {
    padding: 10px 30px;
}

dl.codebox code,
.spoiler dd,
.hidecode {
    background-color: #F6F5F8 !important;
    padding: 10px 30px !important;
}

.hidecode dt,
dl.codebox::before,
blockquote::before {
    display: none !important;
}

dl.codebox dt,
cite {
    border: none;
    color: #C38567;
    font: 11px 'Roboto', sans-serif;
    text-transform: uppercase;
    margin: 5px 0 8px 11px;
    font-weight: 500;
}

.spoiler dt {
    margin-bottom: 3px !important;
}

dl.codebox code {
    font-size: 12px;
}
  /* --------- FIN AFFICHAGE MESSAGES --------- */

/* --------- AFFICHAGE PROFIL (C) SUNHAE --------- */
#wrap-profil {
  background-color: #f1f0f4;
  width: 800px;
  margin: auto;
  display: flex;
  padding: 26px 77px 26px 38px;
  color: #262929;
  font-size: 11px;
}

#avatar-profil {
  text-align: center;
  margin-right: 28px;
}

#avatar-profil > div {
  width: 200px;
  height: 320px;
  overflow: hidden;
  border: 2px solid #F6F5F8;
  margin-bottom: 5px;
}

#avatar-profil > div img {
  width: 200px;
  height: 320px;
}

#avatar-profil a,
#avatar-profil {
  text-transform: uppercase;
  color: #c07c59;
  font-size: 11px;
}

#warp-infos-profil {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}

#warp-infos-profil > span {
  padding: 15px 0 25px 20px;
  width: 100%;
}

#warp-infos-profil > span span strong {
  font: 20px 'DM Serif Display', serif;
  text-transform: uppercase;
  font-weight: normal;
}

.title-infos {
  font: 20px 'DM Serif Display', serif;
  margin-top: -10px;
}

.title-infos-sd {
  color: #c07c59;
  font: 35px 'Hamilton', serif;
  margin-top: -25px;
}

.infos-profil {
  height: 420px;
  width: 200px;
  font-size: 10px;
}

.infos-profil:first-of-type {
  padding-left: 22px;
  border-left: 4px solid #c07c59;
}

.infos-profil:first-of-type > div:last-of-type {
  height: 188px;
  overflow: auto;
  line-height: 13px;
}

.infos-profil > div > span,
.infos-profil .label-profil {
  text-transform: uppercase;
  font-weight: bold;
}

.infos-profil > div > div:not(.invisible) {
  display: inline-block;
}

.infos-profil > a > img {
  margin-right: 6px;
}

.infos-profil textarea {
  font-size: 10px;
  text-align: justify;
  height: 50px;
  max-height: 50px;
  max-width: 156px;
  margin-left: 18px !important;
  padding: 0;
  border: none;
}

.infos-profil input[type="submit"] {
  font: 12px 'DM Serif Display', serif;
  background: #F6F5F8;
  width: 95px !important;
  height: 22px;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #c07c59;
  text-transform: uppercase;
  line-height: 22px;
  padding: 0;
}

#warp-infos-profil > span:last-of-type {
  text-align: center;
  padding: 0;
  color: #c07c59;
  position: relative;
  top: 22px;
}

#warp-infos-profil > span:last-of-type * {
  font: 9px 'Roboto', sans-serif;
  font-weight: bold;
  color: #c07c59;
  text-transform: none;
}
/* --------- FIN AFFICHAGE PROFIL --------- */

/* --------- AFFICHAGES TOPIC LIST (C) SUNHAE --------- */
#wrap-topic.lshg-topiclist {
    width: 778px; /* largeur de la liste des sujets */
    margin:auto;
}

.lshg-topiclist > #header-topic {
    margin-top: 45px;
}

#wrap-topic .forumbg {
    all: unset;
    width: 100%;
}

#wrap-topic .announcement {
    margin-bottom: 17px;
}

/* Bloc conteneur d'un sujet */
.topiclisty {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    background: #f1f0f4;
    padding: 14px 30px 14px 12px;
    margin-bottom: 10px;
    height: 63px;
    box-sizing: initial;
    font-family: 'Roboto', sans-serif;
}

/* Affichage du titre d'un sujet */
.titletopiclist {
    width: 265px;
    padding-left: 5px;
}

.titletopiclist a {
    font: 13px 'DM Serif Display', serif;
    color: #252929;
    line-height: 15px;
}

/* Affichage de la description d'un sujet */
.topic-description {
    font: 10px 'Roboto', sans-serif;
    width: 253px;
    padding-left: 17px;
    display: block;
    text-align: justify;
    max-height: 22px;
    min-height: 12px;
    overflow: auto;
    margin-top: 5px;
    line-height: 11px;
}

/* Affichage de l'auteur du sujet */
.author_topic {
    width: 125px;
    text-align: center;
    font-size: 11px;
    font-style: italic;
}

.author_topic strong, .infos_topiclist strong {
    font-weight: 300;
}

/* Affichage de la pagination (sous l'auteur du topic) */
.author_topic .pagination {
    float: none;
    font-size: 11px;
}

.author_topic .pagination span.page-sep {
    display: inline-block;
}

.author_topic .pagination a {
    background: none !important;
    color: #252929 !important;
    display: inline !important;
    line-height: 9px !important;
    font-size: 11px !important;
    font-style: initial;
    margin: 0 !important;
}

/* affichage des statistiques */
.stat_topiclist {
    font: 40px 'DM Serif display', sans-serif;
    letter-spacing: -2px;
    line-height: 19px;
    color: #c07c59;
    width: 110px;
    text-align: center;
}

.stat_topiclist > div {
    margin-left: 18px;
    color: #252929;
}

/* Affichage dernier message posté */
.infos_topiclist {
    font: 10px 'Roboto', sans-serif;
    letter-spacing: -0.5px;
    width: 115px;
    text-align: center;
    line-height: 10px;
}

.infos_topiclist a {
    font-size: 11px;
}

/* Affichage de l'avatar */
.topiclisty > .lastpostvava {
    margin:0;
}

/* --------- FIN AFFICHAGES TOPIC LIST --------- */

Profil view body

Code:

<div id="wrap-profil">
  <div id="avatar-profil">
    <div>{AVATAR_IMG}</div>
    <!-- BEGIN switch_auth_user -->
    {ADMINISTRATE_USER}{BAN_USER}
    <!-- END switch_auth_user -->
    <script type="text/javascript">
      //<![CDATA[
      $('#avatar-profil').html($('#avatar-profil').html().replace(/-/g,'|'));
      //]]>
    </script>
  </div>
 
  <div id="warp-infos-profil">
    <span>
      {USERNAME}<br />
      {L_LAST_VISITED}: {LAST_VISIT_TIME}
    </span>
 
    <div class="infos-profil">
      <div class="title-infos">Informations</div>
      <div class="title-infos-sd" style="margin: -23px 0 0 55px;">basiques</div>
   
      <div>
        <!-- BEGIN profile_field -->
        <span>{profile_field.LABEL}</span> {profile_field.CONTENT}<br />
        <!-- END profile_field -->
      </div>
      <!-- BEGIN contact_field -->
      {contact_field.CONTENT}
      <!-- END contact_field -->
    </div>
 
    <div class="infos-profil">
      <div class="title-infos-sd">feuille de</div>
      <div class="title-infos" style="margin: -25px 0 0 15px;">personnage</div><br />
   
      <!-- BEGIN switch_rpg -->
      <!-- BEGIN rpg_fields -->
      <span class="label-profil">{switch_rpg.rpg_fields.F_NAME} :</span> {switch_rpg.rpg_fields.F_VALUE_NEW}<br />
      <!-- END rpg_fields -->
   
      <fieldset class="submit-buttons">
        {U_ADMIN_RPG_NEW}
      </fieldset>
      <!-- END switch_rpg -->
    </div>
 
    <span>
      <a rel="nofollow" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS}</a> |
      <a rel="nofollow" href="/sta/{PUSERNAME}">Voir tous les {L_TOPICS} répondus</a> |
      <a rel="nofollow" href="/spa/{PUSERNAME}">Voir tous les {L_POSTS}</a>
    </span>
  </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>

Je vous remercie d'avance.

[MlleAlys]

Bonjour,
Est-il possible d'avoir le gif problématique visible sur votre forum pour inspecter directement ?

[Argimpasa]

Bonjour,

Le voici :
https://zupimages.net/up/23/18/59x9.gif

[MlleAlys]

Pardon, je me suis mal exprimée, je voulais dire, affiché directement dans le profil, pour le voir dépasser sur votre forum et pas seulement sur la capture.
Mais ça devrait le faire sans, tentez ceci :
La hauteur ne s'adapte pas au contenu parce qu'elle est fixée en px. En retirant la hauteur fixe, le bloc s'adaptera normalement automatiquement à ce qu'il contient.

Dans votre css, localisez le code suivant :

Code:

.infos-profil {
  height: 420px;
  width: 200px;
  font-size: 10px;
}

Supprimez la ligne "height: 420px;".

Enregistrez.

[Argimpasa]

Du coup c'est tout bon ^^
Je vous remercie !

[Lixyr]

Afin de faciliter la gestion des problèmes, si le vôtre est résolu, pensez à : éditer votre premier message, cocher l'icône résolu et enregistrer Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton