Chatbox - Problème : Le "En ligne" passe par dessus les pseudos

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Chatbox - Problème : Le "En ligne" passe par dessus les pseudos

Message par Darkaanisty le Ven 4 Déc 2015 - 18:19

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Opera
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://ikebukuro-keepout.forumactif.org/

Description du problème

Bonjour ou bonsoir,

Tout d'abord, je tiens à m'excuser si par hasard, il y avait déjà des topics résolvant ce problème ci. J'ai déjà chercher, mais je vous avoue que je ne sais pas trop quoi écrire par rapport à mon soucis...

Quoi qu'il en soit, je vous l'explique.
Il n'est pas très compliqué à comprendre, ni même très embêtant, mais cela gâche beaucoup l'esthétique du forum et peut entraîner des difficultés à lire le pseudo du premier membre de la liste.
J'ai remarqué donc récemment que le "En ligne" indiquant les membres en ligne et actif de la Chatbox croquait un bout du pseudo du membre en haut de la liste. Je vous avoue ne pas savoir comment régler ce problème, et c'est pourquoi je viens solliciter votre aide aujourd'hui.

Voici une capture d'écran du soucis :
Capture d'écran:


Je vous remercie d'avance pour votre précieuse aide.

Cordialement,
Darkaanisty


Dernière édition par Darkaanisty le Sam 5 Déc 2015 - 20:51, édité 1 fois

Darkaanisty
Nouveau membre

Messages : 5
Inscrit(e) le : 14/09/2014

http://shingeki-rpg.forumactif.org/
Darkaanisty a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Chatbox - Problème : Le "En ligne" passe par dessus les pseudos

Message par Feuilla' le Ven 4 Déc 2015 - 18:42

Bonsoir,
ajoutez ceci à votre Feuille de style CSS :
Code:
#chatbox_members .member-title {
  margin-right:30px;
  margin-bottom:10px;
}
ce code rajoute de l'espace sur la droite et en bas, pour que rien ne se "croque" comme vous dites. Smile
Bien sûr on peut changer le "30" et/ou le "10" pour agrandir/rétrécir selon les besoins.
Bonne soirée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Chatbox - Problème : Le "En ligne" passe par dessus les pseudos

Message par Darkaanisty le Ven 4 Déc 2015 - 18:59

Bonsoir !

Tout d'abord, merci beaucoup pour cette réponse rapide !
Mais malheureusement, cela ne fonctionne pas... Je précise aussi que le problème ne s'applique pas lorsque les membres sont en absent. C'est seulement le En ligne qui bug ainsi.

Peut-être auriez-vous besoin de ma feuille de style ? Je doute que le problème soit dans les Template puisqu'il y a simplement une balise sans détail pour la Chatbox.

Je vous montre par conséquent ma feuille de style, au cas où.

Code:
 

 /* -------------------------------- QEEL -------------------------------- */

        /*** MISE EN FORME LIENS AU SURVOL ***/
        a:hover {
          text-decoration: none !important;
        }

        /*** MISE EN FORME FONT DU QEEL ***/
        .fond_qeel {
          width: 780px;
          border-radius: 0px 0px 25px 25px;
          background-color: #FFFFFF;
          margin: auto;
          height: 620px;
          position: relative;
        }

        /*** MISE EN FORME TITRE PRINCIPAL ***/
        .titre_principal {
          color: #77677A;
          font-family: georgia;
          font-size: 28;
          letter-spacing: 5px;
          text-align: center;
        }

        /*** MISE EN FORME SOUS-TITRE "Et à qui se fier ?" ***/
        .titre_secondaire {
          color: #D5D1D5;
          font-family: georgia;
          font-size: 14px;
          text-align: center;
        }

        /*** MISE EN FORME BLOC STATISTIQUES ***/
        .bloc_stat {
          background-color: #EBE8EB;
          padding: 15px;
          width: 200px;
          height: 150px;
          overflow: auto;
          font-size: 11px;
          border: 2px solid #77677A;
          text-align: justify;
          color: #515151;
          position: absolute;
          left: 3em;
          z-index: 1;
        }

        /*** MISE EN FORME BLOC DES GROUPES ***/
        .bloc_groupes {
          background-color: #EBE8EB;
          padding: 15px;
          width: 420px;
          height: 50px;
          overflow: auto;
          font-size: 20px;
          border: 2px solid #77677A;
          text-align: center;
          font-family: 'Six Caps', sans-serif;
          position: absolute;
          left: 14.5em;
          z-index: 1;
        }

        /*** MISE EN FORME BLOC DES CONNECTES LES 24H ***/
        .bloc_connectes {
          background-color: #EBE8EB;
          padding: 15px;
          width: 420px;
          height: 50px;
          overflow: auto;
          font-size: 20px;
          border: 2px solid #77677A;
          text-align: center;
          font-family: 'Six Caps', sans-serif;
          position: absolute;
          left: 14.5em;
          z-index: 1;
        }

        /*** COULEUR ET TRANSPARENCE DU FOND DES 24H ***/
        #kaboum .row1 {
          background-color : transparent;
        }

        #kaboum span.gensmall {
          color: #515151;
        }

        /*** MISE EN FORME DES TITRES (simple + survol) ***/
        .titre_bloc {
          font-family: 'Dancing Script', cursive;
          font-size: 24px;
          font-weight: bold;
          color: #58485B;
          position: absolute;
          z-index: 2;
          margin-top: -18px;
        }

        .titre_bloc:hover {
          color: #58485B;
        }

        /*** GROUPES A ONGLETS ***/
        /* Mise en forme des noms de groupe */
        .groupe_onglet {
          display: inline-block;
          padding: 10px;
        }

        /* Mise en forme du bloc en transparence de description */
        .contenu_groupe_onglet {
          padding: 15px;
          display: none;
          width: 315px;
          height: 115px;
          overflow: auto;
          font-size: 11px;
          color: #414141;
          text-align: justify;
          background-color: #EBE8EB;
          position: absolute;
          top: 14em;
          left: 21em;
          filter: alpha(opacity = 50);
          opacity: 0.8;
        }

        /* Mise en forme des liens */
        .contenu_groupe_onglet a{
          text-decoration: none !important;
        }

        /*** MISE EN FORME DES CREDITS ***/
        .credits {
          text-align: right;
          margin-right: 10px;
          font-size: 9px;
          margin-top: 10px;
        }

        .credits a{
          color: #554055;
        }

        /* -------------------------------- FIN QEEL -------------------------------- */

     



.nbgr {
    color: #FFF;
    font-family: Times New Roman;
    font-size: 9px;
    text-align: center;
    text-transform: uppercase;
}

.left {
float: left;
  padding:10px;
  margin-top:15px;
}

    .predef {
  padding:4px;
  border:1px solid #94DA54;
      position: absolute;
      display: block;
      width: 150px;
      height: 90px;
      overflow: hidden;
      font-size: 10px;
      color: #000000;
      text-align: justify;
    }
   
.topamis
    {
    width: 200px;
    height: 150px;
  background-color: white;
    position:fixed;
    top: 50px;
    right: 10px;
    }

.back{
  background-image: url(\'http://image.noelshack.com/fichiers/2015/23/1433264730-kuy.png\');
  width:200px;
  height:40px;
}

.descri{
    padding-top:12px;
    background-color: #FDFDFD;
    border: 6px solid #DFDFE7;
    height: 180px;
    overflow: auto;
}

.secondarytitle, .secondarytitle h2 {
    color: #fff;
    font-family:Times New Roman;
    text-transform: uppercase;
    font-size: 30px;
    margin: 0px;
    text-shadow: 1px 2px 0px #BBBBCC;
    padding: 0px;
}

.fondmois:hover {
    opacity: 1;
}
.fondmois{
    background-color: transparent;
    width: 188px;
    height: 41px;
    opacity: 0;
    overflow: auto;
    padding: 4px;
    color: #000;
    text-align: center;
    font: 10px arial;
    transition: all 0.2s ease 0s;
}
.persomois {
    width: 196px;
    height: 49px;
}
.tpdef {
    text-align: center;
    font: 14px Oswald;
    color: #fff;
}




 /* --------------------------------- CATEGORIES --------------------------------- */

    /**** POSITIONNEMENT IMAGES New, no new, lock ****/
    .img_new {
      position: relative;
      left: 12.8em;
      top: -8em;
    }

    /**** STATISTIQUES ****/
    /* Ronds bleus */
    .stats {
      background-color: #D6CCD8;
      color: white;
      width: 60px;
      height: 60px;
      border-radius: 100px;
      position: relative;
      top: -5.8em;
      left: 5em;
    }

    /* Contenu des ronds */
    .stats_1 {
      position: relative;
      top: 0.7em;
    }

           
    /**** ILLUSTRATIONS DES FORUM ****/
    .imgforum {
      position: relative;
      display: block;
      left: 0.1em;
      top: -4.1em;
    }

    /**** FONDS GENERAUX ****/
    /* Contenu de l'ensembre des forum */
    .categorie {
      width: 400px;
      height: 70px;
      padding: 10px;
    }

    /* Fond titre catégorie */
    .cate_titre {
      position: relative;
    margin: auto;
      top: -4em;
    }

    /* Mise en forme nom de catégorie */
    h2 {
      font-size: 18px;
      font-family: arial;
      color: #EBE8EB;
      text-align: center;
    }

    /**** MISE EN FORME DES FORUM ****/
    /* Mise en forme du texte des titres de forum */
    .forumlink {
      color: #77677A !important;
      font-family: arial;
      font-size: 15px !important;
      font-weight: none !important;
      text-transform : uppercase;
      position: relative;
      top: -3.1em;
      left: 3.5em;
      z-index: 1;
      text-shadow:1px 1px 2px white;
      display: block;
    }

    .forumlink:hover {
      color: #77677A !important;
      text-decoration: none !important;
    }

    .forumlink a {
      font-size: 16px;
    }

    /**** MISE EN FORME DESCRIPTION ****/               
    .description {
      font-size: 11px;
      text-align: justify;
      color: #CBC0C6;
      position: relative;
      top: -12em;
      left: 4.5em;
      padding: 15px;
    }

    /**** DERNIERS MESSAGES ****/
    .last_mess {
      position: relative;
      left: 8.5em;
      top: -7.8em;
      color: #808080;
      font-size: 11px;
      text-align: center;
      width: 110px;
    }

    .last_mess a {
      color: black !important;
      text-decoration: none !important;
    }

    .last_mess a:hover {
      color: #CAC9C7 !important;
      text-decoration : none !important;
    }

    /*--------------------------------- FIN CATEGORIES --------------------------------- */

/*Coller la bannière au côtés du forum*/
.bodyline {
padding-left: 0px;
padding-right: 0px;
}
.bodyline {padding-top:0px !important;}

.bodyline {
position: center;
box-shadow: 3px 3px 43px  #000000;
border: 0px solid #000000;
}
 
 
.bandeau_fond {
width:175px;
padding:5px;
position:fixed;
background-image:url(http://imagesup.org/images12/1406735258-bordure.png);
height:100%;
right:0px;
top:0px;
z-index:100;
}

.bandeau_titre {
font-size:20px;
color:#503048;
display:block;
text-indent:45px;
margin-top:10px;
font-family: 'Love Ya Like A Sister', cursive;
}

.bandeau_image1 {
width:135px;
height:92px;
margin-left:30px;
overflow:hidden;
}

.bandeau_lien {
width:135px;
padding:5px;
height:11%;
overflow:hidden;
margin-left:25px;
font-family: 'Indie Flower', cursive;
}

.bandeau_lien_zoom {
font-size:12px;
opacity:0.8;
text-align:center;
}

.bandeau_lien_zoom:hover {
font-size:14px;
opacity:1;
text-align:center;
}

.bandeau_news {
background-color:white;
width:125px;
padding:5px;
height:15%;
margin-left:30px;
font-size:12px;
color:black;
text-align:justify;
overflow:auto;
border-radius:15px;
font-family: 'Indie Flower', cursive;
}

.bandeau_interphone1 {
width:135px;
padding:5px;
height:7%;
overflow:hidden;
margin-left:25px;
}

.bandeau_interphone2 {
text-align:justify;
font-size:12px;
color:black;
display:block;
font-family: 'Indie Flower', cursive;
}

.bandeau_image2 {
display:inline-block;
width:68px;
height:67px;
border-radius:100px;
overflow:hidden;
margin-top:5px;
}

a.ALice_credit {
font-size:12px;
text-decoration:none;
display:block;
text-align:center;
color:white;
margin-top:5px;
}



/***********************************************************************************
                                    PA - Début PAR BATTY
***********************************************************************************/
.battypa_contenent {
 width: 610px;
 overflow: hidden;
 padding-top:5px;
 margin-left:auto;
 margin-right:auto;
}

.battypa_titre{
 background-image: url("http://i21.servimg.com/u/f21/19/31/25/10/bander10.jpg");
  background-repeat:no-repeat;
  text-align:center;
  height: 80px;
  width:770px;
  margin-left:auto;
margin-right:auto;
margin-bottom: -25px;
padding-top:19px;
font-family: 'Fjalla One', sans-serif;
font-size:21px;
  text-transform : uppercase;
color:#000000;
}

.battypa_blocleft {
 width: 180px;
 float: left;
}

.battypa_blocright {
 width: 280px;
 float: right;
 text-align:center;
}

.battypa_blocright img {
 margin: 3px;
}

.battypa_blocmidel {
 overflow: hidden;
}

.battypa_slidshow{
 width:175px;
 height:250px;
 background-color:#E3E04B;
 border: 3px solid #202020 ;
 display:inline-block;
}

.slideshow,
.slide {
    width:175px;
 height:250px;
}

.slideshow {
    overflow: hidden;
    background-color: black;
}

.slideshow div{
    position: relative;
    top: 0;
    left: 0;
}
   
.slide {
    margin: 0;
    display: inline-block;
    vertical-align: middle;
 }

.battypa_staff{
 width:150px;
 height:75px;
 background-color:#E3E04B;
 margin-bottom:7px;
 margin-top:7px;
 position:relative;
 overflow:hidden;
 text-align:center;
 font-size:12px;
 color:#858584;
}

.battypa_staff span{
 font-family: 'Lobster', cursive;
 font-size:20px;
}

.battypa_staff a{
text-decoration:none;
font-variant:small-caps;
color:#858584;
font-weight:bold;
  font-size:11px;
}

.battypa_staff img{
  position: absolute;
  left: 0;
  top: 0;
  transition: all 2s;
  -moz-transition: all 2s;
  -o-transition: all 2s;
  -webkit-transition: all 2s;
  }

.battypa_staff:hover img{
transform: translatex(-150px);
  -moz-transform: translatex(-150px);
  -o-transform: translatex(-150px);
  -webkit-transform: translatex(-150px);
}

.battypa_contexte{
 width:255px;
 height:195px;
 background-color:#E3E04B;
 border: 3px solid #202020 ;
 display:inline-block;
 padding:5px;
 text-align: justify;
 font-size:11px;
 color:#858584;
}

.battypa_contexte a{
 text-decoration:none;
  font-size:11px;
 color:#605863;
  font-variant: small-caps;
}

.battypa_blocleft2 {
 font-family: 'Lobster', cursive;
 font-size:20px;
 text-align:center;
 width: 50px;
 float: left;
 color:#605863;
}

.battypa_blocleft2 img {
  margin:2px;
}

.battypa_blocright2 {
 float: right;
 width:160px;
}

.battypa_blocmidel2{
 overflow: hidden;
 width:400px;
}

.battypa_New{
 width:386px;
 height:152px;
 background-color:#202020;
 padding:5px;
 text-align: justify;
 font-size:11px;
 color:#858584;
 overflow:auto;
}

.battypa_textenew1{
display:block;
width:auto;
background-color:#E3E04B;
padding:3px;
}

.battypa_textenew2{
display:block;
width:auto;
padding:3px;
}

.battypa_copyright{
 width:150px;
 height:150px;
 background-color:#77677A;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 border-radius:100px;
 text-align:center;
 font-size:11px;
 overflow:hidden;
 display:table-cell;
 vertical-align:middle;
 color: #f8f4ef;
  padding:5px;
}

.battypa_copyright a{
  text-decoration:none;
      font-variant:small-caps;
      color: #f8f4ef; !important;       
}

.battypa_info{
 width: 650px;
 padding:5px;
  margin-top:10px;
 margin-left:auto;
 margin-right:auto;
 background-color: #E3E04B;
  border: 3px solid #202020 ;
 font-size: 12px;
 font-family: "Arial";
 text-transform:uppercase;
 color: #858584;
 text-align:center;
}
/***********************************************************************************
                                    PA -END
***********************************************************************************/
body {
  background-image:url(http://i21.servimg.com/u/f21/19/31/25/10/fond_c15.jpg);
  background-size: 100% auto;
}






 






 

/* MISE EN FORME DES LISTES DE SUJETS */

.bloc_sujets
{
  width: 775px;
  margin: auto;
  background: #77677A;
  border: 1px solid #77677A;
  box-shadow: 0px 0px 3px #868686;
  -o-box-shadow: 0px 0px 3px #868686;
  -moz-box-shadow: 0px 0px 3px #868686;
  -webkit-box-shadow: 0px 0px 3px #868686;
  -htm-box-shadow: 0px 0px 3px #868686;
  padding: 5px;
 
}
.sujets
{
  background: #D1C5D3;
  border: 1px dotted #C4AEC8;
  box-shadow: 0px 0px 3px #868686;
  -o-box-shadow: 0px 0px 3px #868686;
  -moz-box-shadow: 0px 0px 3px #868686;
  -webkit-box-shadow: 0px 0px 3px #868686;
  -htm-box-shadow: 0px 0px 3px #868686;
  padding: 3px;
  margin-top: 15px;
  margin-bottom: 10px;
}
.topictitle
{
  font-variant: small-caps;
  font-size: 12px;
}
.sujets_auteur
{
  display: block;
  width: 200px;
  font-size: 11px;
}
.sujet_last
{
  display: block;
  width: 180px;
  height: 40px;
  background: #F6F0F7;
  border-left: 3px solid #9e9e9e;
  border-right: 3px solid #9e9e9e;
  padding-top: 10px;
  font-size: 11px;
}
.sujets_stats
{
  width: 775px;
  text-align: right;
  padding-top: 1px;
}
.sujets_stats_contenu
{
  font-size: 10px;
  color: #F6F0F7;
}



a:hover{
text-decoration: none !important;
}
 
a {
text-decoration: none !important;
}
 
a:link {
text-decoration: none;
}
 
a:visited {
text-decoration: none;
}

#i_logo {
margin-top: -10px;
}



/* MISE EN FORME DU PROFIL ET DES MESSAGES */

.bloc_message
{
  width: 789px;
  margin-left: 0px;
 
}
.profil
{
  width: 100%;
  height: 250px;
  background: #77677A;
  border-top: 2px solid #4E3A52;
  border-left: 0px solid #4E3A52;
  border-right: 0px solid #4E3A52;
  border-bottom: 2px dotted #4E3A52;
  margin-top: 20px;
}
.message
{
  width: 80%;
  margin-left: 40px;
  background: #FFFFFF;
  margin-bottom: 20px;
  border-bottom: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  padding-top: 10px;
}
.online
{
  display: block;
  clear: both;
  position: absolute;
  margin-top: -6px;
  margin-left: -6px;
}
.avatar_profil
{
  display: block;
  float: right;
  margin-right: 100px;
  margin-top: -20px;
 
}
.avatar_profil img
{
  position: absolute;
  width: 150px;
  border: 5px solid #EBE8EB;
  box-shadow: 3px 3px 3px #000000;
  -moz-box-shadow: 3px 3px 3px #000000;
  -htm-box-shadow: 3px 3px 3px #000000;
  -webkit-box-shadow: 3px 3px 3px #000000;
  -o-box-shadow: 3px 3px 3px #000000;
 
}

.bloc_profil
{
  margin-left: 90px;
}
.rang_img
{
  position: relative;
  float: left;
}
.pseudo_membre
{
  display: block;
  width: 90%;
  font-size: 24px;
  letter-spacing: 2px;
  border-bottom: 2px dotted #EBE8EB;
  margin-left: 0px;
}
.rang
{
  display: block;
  margin-left: 50px;
  font-weight: bold;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 4px;
  color: #EBE8EB;
}
.profil_contenu
{
  clear: both;
  width: 70%;
  height: 140px;
  margin-top: 20px;
  overflow: auto;
  background-color: #EBE8EB;
  border: 1px solid #665f57;
  padding: 4px;
  font-size: 11px;
  text-align: justify;
}
.message_contenu
{
  font-size: 11px;
  text-align: justify;
  padding: 10px;
}
.signature_div
{
  width: 100%;
  height: 200px;
  margin: auto;
  background: #FFFFFF;
}



/*-----------Modification Chatbox------------*/
#chatbox_header, td.catBottom, #chatbox_header.main-head {
  background: #77677A;
}
#chatbox_members {
  background: #EBE8EB;
}



#chatbox_members .member-title {
  background: #EBE8EB;
}



#chatbox {
  background: #EBE8EB;
}


.chatbox_row_1 {
  background: #EBE8EB;
}
 


.chatbox_row_2 {
  background: #EBE8EB;
}


#chatbox_messenger .catBottom, body.chatbox, #chatbox_footer {
  background: #77677A;
}


#chatbox_footer #message {
  background: #EBE8EB;
}


#chatbox_members .member-title {
  margin-right:30px;
  margin-bottom:10px;
}

Darkaanisty
Nouveau membre

Messages : 5
Inscrit(e) le : 14/09/2014

http://shingeki-rpg.forumactif.org/
Darkaanisty a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Chatbox - Problème : Le "En ligne" passe par dessus les pseudos

Message par R-max le Ven 4 Déc 2015 - 22:28

bonsoir et bienvenue sur forumactif Very Happy

ce code dans votre css agis sur tous les en ligne ,dans les (sujets) et (ailleurs) ,comme la chat*box

Code:
.online
{
  display: block;
  clear: both;
  position: absolute;
  margin-top: -6px;
  margin-left: -6px;
}

bonne soirée ,

R-max
# Tropactif #

Masculin
Messages : 1517
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Chatbox - Problème : Le "En ligne" passe par dessus les pseudos

Message par Darkaanisty le Sam 5 Déc 2015 - 20:50

Bonsoir, et merci ! =D

Génial ! J'ai retiré cette partie du code, et cela fonctionne ! Je vous remercie !

Le sujet est donc résolu. Bonne soirée !

Darkaanisty
Nouveau membre

Messages : 5
Inscrit(e) le : 14/09/2014

http://shingeki-rpg.forumactif.org/
Darkaanisty a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum