Problème "en ligne" de la ChatBox sur pseudonyme

[Banpaia]

Bonjour ! Voilà, je crois que mon problème est fréquent néanmoins je n'ai pas trouvé comment le réparer en cherchant sur internet et dans les archives de ce site...

Voici donc le problème en question :

Spoiler:

Le "En ligne" sur ma ChatBox est au-dessus du premier pseudonyme et je ne vois pas comment les séparer...
Je me laisse guider par vos bons conseils !

Merci d'avance.

[Neptunia]

Bonjour, et bienvenue sur le Forum des Forums Forumactif

Pourrions nous avoir le CSS de votre forum ainsi que les éventuels javascripts agissant au niveau de la chatbox ?

[Banpaia]

Merci de me souhaiter la bienvenue.

Voici le CSS :

Code:

body {
margin: 0px;
}
.bodylinewidth
{
width: 738px;
margin: 15px auto;
}

#i_logo
{
margin: 0px;
}

.bodyline
{
padding: 0;
  box-shadow: 0px 10px 15px #000000;
  -moz-box-shadow: 0px 10px 15px #000000;
  -o-box-shadow: 0px 10px 15px #000000;
  -htm-box-shadow: 0px 10px 15px #000000;
  -webkit-box-shadow: 0px 10px 15px #000000;
}

/*modifier l'apparence des scrollbars de tout le forum*/
::-webkit-scrollbar {
  width: 12px; /*largeur de la scrollbar verticale*/
  height: 5px; /*hauteur de la scrollbar horizontale*/
  background-color: #000000;
}
::-webkit-scrollbar-track {
  background-color: #e3adad; /*couleur du fond de la scrollbar*/
}
::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
  background: url(http://2img.net/s/t/20/31/37/i_background.png); /*couleur de l'ascenseur*/;
}
/********* DÉBUT CATÉGORIES ***********/
/* Mise en place du conteneur d'onglets */
#conteneur_onglets_cate {
  /* Taille (largeur et hauteur) */
  width: 90%;
  height: 25px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 30px;
  overflow: visible;
  /* Couleur de fond */
  display: none;
  text-align: center;
 
}
 

/* Mise en forme des noms d'onglets */
#conteneur_onglets_cate div {
  display: inline-block;
  verctical-align: bottom;
  position: relative;
  bottom: 25px;
  margin: 6px;
 /* Couleur */
  color: #944345;
  text-shadow : 1px 1px 1px #e3adad;
  font-size: 14pt;
  /* Police d'écriture */
  font-family: 'Andalus';
  transition: all ease 1s;
}

/* Effet au passage de la souris sur les noms d'onglets */
#conteneur_onglets_cate div:hover {
  color: #e3adad;
  text-shadow : 1px 1px 1px #944345;
  transform: rotate(-390deg);
  font-family: 'Andalus';
  transition: all ease 1s;
}
 
/* CSS pour les onglets */
.onglet_cate {
  cursor: pointer;
}

/* CSS pour retirer le contour de catégories */
.categorie .forumline {
  border: 0px solid;
}

/* Mise en pace du titre de catégorie */
.secondarytitle {
  width: 100%;
  text-align: center;
}

/* Contour des sous-forums */
.conteneur_forum {
  width: 780px;
  margin: auto;
  padding: 10px;
  border-radius: 05px;
  /* Couleur de fond */
  background: url(http://i39.servimg.com/u/f39/18/86/94/25/fond210.png);
  box-shadow: 1px 2px 2px #000000;
}

/* Mise en forme du titre de sous-forum 8position) */
.titre_forum {
  width: 90%;
  margin: auto;
  margin-bottom: -10px;
  text-align: left;
  color: #944345;
}

/* Mise ne forme du lien de sous-forum */
a.forumlink, a.forumlink:link, a.forumlink:active, a.forumlink:visited {
  /* Couleur, taille et police */
  color: #141A28;
  font-size: 16pt;
  font-family: 'Andalus';
  /* Mise ne place de l'effet */
  letter-spacing: 0px;
  transition: all ease 1s;
}

/* Effet au passage de la souris sur les liens de sous-forum */
a.forumlink:hover {
  color: #45576B;
  text-decoration: none !important;
  letter-spacing: 2px;
  transition: all ease 1s;
}


/* Countour de la description de sous-froums */
.description_forum {
  display: inline-block;
  vertical-align: top;
  box-shadow: 1px 1px 2px #000000;
  /* Taille */
  width: 460px;
  height: 90px;
  padding: 2px;
  margin: 5px;
  margin-left: 60px;
  border-radius: 03px;
  /* Couleur de fond */
  background-color: #E6E3DE;
  overflow: hidden;
}

/* Position de l'image dans la description */
.description_forum img {
  float: left;
  margin-right: 10px;
  border-radius: 5px;
}

/* Mise en forme du texte dans la description */
.description_forum p {
  width: 340px;
  height: 100px;
  margin: 0px;
  overflow: auto;
  /* Couleur du texte */
  color: #43586B;
  text-align: justify;
}

/* Conteneur des statistiques et dernier message */
.conteneur_stats {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin-right: 10px;
  box-shadow: 10px;
  /* Taille */
  width: 150px;
  height: 92px;
  padding-bottom: 10px;
  margin: 5px;
  overflow: hidden;
  border-radius: 07px;
  box-shadow: 1px 1px 1px #000000;
  /* Couleur de fond */
  background-color: #E6E3DE;
}

/* Arrondi sur l'image de nouveau/pas de nouveaux/verrouillé */
.conteneur_stats .folder_img {
  border-radius: 0px;
}

/* Mise en forme de X messages dans X sujets */
.conteneur_stats .stats {
  text-align: center;
  /* Couleur */
  color: #43586B;
  font-size: 8pt;
  font-family: italic 'Andalus';
}

/* Mise en forme du lien du dernier sujet */
.conteneur_stats .gensmall a {
  color: #3C4A55;
  text-decoration: none !important;
  transition: all ease 1s;
}

/* Effet au hover */
.conteneur_stats .gensmall a:hover {
  color: #B2B2B2;
  text-decoration: none !important;
  transition: all ease 1s;
}

/* Conteneur des liens déflants du sous-forum */
.conteneur_liens_ss_forums {
  /* Taille */
  width: 610px;
  height: 15px;
  padding-top: 5px;
  margin: auto;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 10px;
  /* Couleur de fond */
  background-color: #E6E3DE;
}

/* Mise en forme des liens vers les sous-forums */
.conteneur_liens_ss_forums a {
  color: #3C4A55;
  text-decoration: none !important;
  transition: all ease 1s;
}

/* Effet au Hover */
.conteneur_liens_ss_forums a:hover {
  color: #B2B2B2;
  text-decoration: none !important;
  transition: all ease 1s;
}
/********* FIN CATÉGORIES ***********/
/*NAV*/
#navigation
{
  position: fixed;
  z-index: 999;
  height: 30px;
  width: 200;
  margin-left: -8px;
}
#navig
{
  width: 200px;
  margin: auto;
  text-align: center;
  background: #944345;
  border-bottom: 2px solid #e3adad;
  padding-bottom: 3px;
    box-shadow: 0px 0px 10px #000000;
  -moz-box-shadow: 0px 0px 10px #000000;
  -o-box-shadow: 0px 0px 10px #000000;
  -htm-box-shadow: 0px 0px 10px #000000;
  -webkit-box-shadow: 0px 0px 10px #000000;
  font-size : 24px;
}
#navig a
{
  font-weight: bold;
}

#navig a
{
  font-weight: bold;
  color: #e3adad !important;
  text-shadow: 1px 1px 0px #000000;
}
#navig a:hover
{
  color: #e3adad !important;
}a:link, a:link hover
{
  text-decoration: none !important;
}
#navigation
{
  position: fixed;
  z-index: 999;
  width: 200;
  margin-top: 30px;
  margin-left: 70px;
  padding: 5px;
  text-align : center;
}
/*FIN*/
/*TOOLBAR VAVA*/
.fa_avatar {
  width: 25px;
  height: 25px;
  position: relative;
  top: -3px;
  margin-right: 5px;
  border-radius: 3px;
  margin-bottom: -10px;
}
/*FIN*/
/* MISE EN FORME DES LISTES DE SUJETS */

.bloc_sujets
{
  width: 700px;
  margin: auto;
  background: url(http://2img.net/s/t/20/31/37/i_background.png);
  border: 1px solid #ececec;
  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: #ececec;
  border: 1px dotted #ffffff;
  padding: 3px;
}
.topictitle
{
  font-variant: small-caps;
  font-size: 12px;
}
.sujets_auteur
{
  display: block;
  width: 100px;
  font-size: 11px;
}
.sujet_last
{
  display: block;
  width: 150px;
  height: 40px;
  background: #f4f4f4;
  border-left: 3px solid #9e9e9e;
  border-right: 3px solid #9e9e9e;
  padding-top: 10px;
  font-size: 11px;
}
.sujets_stats
{
  width: 700px;
  text-align: right;
  margin-bottom: 10px;
}
.sujets_stats_contenu
{
  font-size: 10px;
  color: #ffffff;
  text-shadow: 2px 3px 2px #000000;
}
/*FIN*/
/* MISE EN FORME DU PROFIL ET DES MESSAGES */

.bloc_message
{
  width: 700px;
  margin: auto;
}
.profil
{
  width: 100%;
  height: 260px;
  background: url(http://i39.servimg.com/u/f39/18/86/94/25/fond210.png);
  border-top: 1px solid #665f57;
  border-left: 1px solid #665f57;
  border-right: 1px solid #665f57;
  border-bottom: 2px dotted #665f57;
  margin-top: 20px;
}
.message
{
  width: 100%;
  margin: auto;
  background: #f2efef;
  margin-bottom: 20px;
  border-bottom: 1px solid #665f57;
  border-left: 1px solid #665f57;
  border-right: 1px solid #665f57;
  padding-top: 2px;
}
.online
{
  display: block;
  clear: both;
  position: absolute;
  margin-top: -6px;
  margin-left: -6px;
}
.avatar_profil
{
  display: block;
  float: right;
  margin-right: 120px;
  margin-top: -20px;
  transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -htm-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
}
.avatar_profil img
{
  position: absolute;
  width: 150px;
  border: 5px solid #e9e3dc;
  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;
    transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.avatar_profil img:hover
{
  width: 200px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.bloc_profil
{
  margin-left: 90px;
}
.rang_img
{
  position: relative;
  float: left;
}
.pseudo_membre
{
  display: block;
  width: 80%;
  font-size: 24px;
  letter-spacing: 2px;
  border-bottom: 2px dotted #e0d5c9;
  text-shadow: 2px 3px 2px #000000;
  margin-left: 50px;
}
.rang
{
  display: block;
  margin-left: 100px;
  font-weight: bold;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 4px;
  color: #ffffff;
  text-shadow: 2px 3px 2px #000000;
}
.profil_contenu
{
  clear: both;
  width: 70%;
  height: 140px;
  margin-top: 20px;
  overflow: auto;
  background-color: #e6e6e6;
  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: 500px;
  height:90%;
  min-height:80px;
  max-height:600px;
  margin: auto;
  background: #f2efef;
}
/*FIN*/
/* QEEL */
.trans .row1 {

}


.titreqeel {
  color: #2E3454;
  font-family: 'Finger Paint', cursive;
  font-size: 24px;
  text-align: center;
}

.cadreqeel {
  background: url(http://2img.net/s/t/20/31/37/i_background.png);
  color: #000000;
 
  padding: 10px;
  width: 200px;
  height: 140px;
  text-align: justify;
  font-family: arial;
  font-size: 10px;
  margin-left: -10px;
  box-shadow: -1px 2px 5px 3px rgba(0, 0, 0, 0.3) inset;
  opacity: 0.95;
}

.cadreqeel1 {
  background: url(http://2img.net/s/t/20/31/37/i_background.png);
  color: #000000;
  padding: 10px;
  width: 200px;
  height: 140px;
  text-align: justify;
  font-family: arial;
  font-size: 10px;
  opacity: 0.95;
box-shadow: -1px 2px 5px 3px rgba(0, 0, 0, 0.3) inset;
}

.cadreqeel2 {
  background: url(http://2img.net/s/t/20/31/37/i_background.png);
  color: #000000;
  text-shadow: 1px 1px 1px #ffffff;
  padding: 10px;
  width: 500px;
  height: 80px;
  overflow: auto;
  text-align: justify;
  font-family: arial;
  font-size: 10px;
  opacity: 0.80;
box-shadow: -1px 2px 5px 3px rgba(0, 0, 0, 0.3) inset;
}

.boite10 {
  margin-left: 10px;
  margin-top: -05px;
  width: 180px;
  height: 210px;
  overflow: auto;
}

.groupes {
  font-family: 'Gabriela', serif;
  text-align: center !important;
  font-size: 20px;
}
/*FIN*/




/*********************************** PA ***********************************/

/*** PARTENAIRES ET TOPS ***/
.img_partenaires {
  opacity: 0.5;
}

.img_partenaires:hover {
  opacity: 1;
}



/*** IMAGES DU STAFF ***/

.imgPA {
  border-radius: 10px;
  width: 100px;
  height: 100px;
 
}

.info {
  position: relative;
  z-index: 24;
  text-decoration: none;
}
 
c.info:hover {
  z-index: 25;
}
 
c.info span {
  display: none;
}
 
c.info:hover span {
  display: block;
  position: absolute;
  top: -9.3em;
 left: -0.3em;
  border-radius: 10px;
  width: 105px;
  height: 105px;
  background-color: #bababa;
  box-shadow: 1px 2px 1px #000000;
  color: #fffffff;
  text-align: center;
  font-weight: none;
}



/*** IMAGES DES PREDEFINIS ***/
.imgwidget {
  border-radius: 25%;
  width: 100px;
  height: 100px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.imgwidget:hover {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

.info {
  position: relative;
  z-index: 24;
  text-decoration: none;
}

d.info:hover {
  z-index: 25;
}
 
d.info span {
  display: none;
}
 
d.info:hover span {
  display: block;
  position: absolute;
  top: -2em;
 left: -2em;
  width: 140px;
  height: 50px;
  overflow: auto;
  background-color: #bababa;
  color: #944345;
  text-align: center;
  font-weight: none;
}



/*** EFFET DU CONTEXTE ***/

.contexte {
  width: 400px;
  height: 200px;
  overflow: hidden;
  background-color: #e4e4e4;
  border-radius: 05px;
  position: relative;
  top: -2.2em;
}
   
.contexte_img {
  position: relative;
  z-index: 2;
  width: 400px;
  height: 200px;
  margin-left: 0px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  -transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.contexte:hover .contexte_img {
  margin-top: -200px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
   
.contexte_description {
  position: relative;
  z-index: 1;
  width: 350px;
  height: 140px;
  color: #D18888;
  padding: 25px;
  text-align: justify !important;
  font-size: 11px;
  overflow: auto;
  box-shadow: -1px 2px 5px 3px rgba(0, 0, 0, 0.3) inset;
}

.contexte_description a {
  text-decoration: none !important;
}



/*** SYSTEME D'ONGLETS ***/

.paonglet {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  padding: 10px;
  cursor: pointer;
  background: url(http://2img.net/s/t/20/31/37/i_background.png);
  color: #E0E0E0;
  opacity:0.75;
  box-shadow: 1px 2px 2px #000000;
}
           
.paonglet_0 {
  border-radius: 05px;
}

.paonglet_1 {
  border-radius: 10px;
  color: #e3adad;
  opacity:1;
  box-shadow: -1px 2px 5px 3px rgba(0, 0, 0, 0.3) inset;
}

.contenu_paonglet {
  padding: 25px;
  display: none;
  width: 720px;
  height: 450px;
  border-radius: 05px;
  background: url(http://i39.servimg.com/u/f39/18/86/94/25/fond210.png);
 
}

.contenu_paonglet a{
  text-decoration: none !important;
}



/*** BLOC DE TEXTE DE LA PA ***/

.bloc_pa {
  background-color: #e4e4e4;
  border-radius: 05px;
  color: #e3adad;
  padding: 25px;
  text-align: justify !important;
  position: relative;
  top: -2.2em;
  box-shadow: -1px 2px 5px 3px rgba(0, 0, 0, 0.3) inset;
}

.bloc_pa a {
  text-decoration: none !important;
  color: #D18888 !important;
}

/*** TITRES DES BLOCS ***/

.titre_pa {
  font-family: 'Pacifico', 'cursive';
  font-size: 30px;
  position: relative;
  top: -0.3em;
  color: #e3adad;
  text-shadow: 1px 2px 2px #000000;
  z-index: 999;
}

.titre_pa:hover {
  color: #944345;
}

/*********************************** FIN PA ***********************************/
/*Chatbox*/

#chatbox_header .cattitle:before { content: "La Morgue"; }
#chatbox_header .cattitle strong { visibility: hidden;}
body.chatbox {
    background-color: #f2e6e6;
}
#chatbox_header .catBottom .cattitle {
    color: #f2e6e6;
  text-shadow: 1px 1px 1px #000000;
}
 .chatbox_row_1,.chatbox_row_2,.chatbox_row_3 {
      font-size: 13px; }
 .chatbox {
  font-size : 15px;
 }
.chatbox .msg span[style="color:red;"] strong {
color:#6D276F;
  text-shadow: 1px 1px 1px #cc9999;
}
.chatbox .msg span[style="color:green;"] strong {
color: #CC9999;
  text-shadow: 1px 1px 1px #ffffff;
}
 
#chatbox_members{
margin-top: 20px;
  color: #ffffff;
}


Et la Javascripts :

Code:

$(function() {
  setTimeout(function() {
    for(var c = 0, a = 0;a < window.frames.length;a++) {
      try {
        "/chatbox/index.forum" == eval("window.frames[a].location.pathname") && ++c && window.frames[a].eval('function ajax_refresh_chatbox(b,c){if(""==b||void 0==b)b="?achives=0";if(window.XMLHttpRequest)var a=new XMLHttpRequest;else window.ActiveXObject&&(a=new ActiveXObject("Microsoft.XMLHTTP"));a.onreadystatechange=function(){if(4==a.readyState&&200==a.status&&(eval(a.responseText),chatbox_last_update>chatbox_updated||c))null!=document.getElementById("chatbox").innerHTML&&chatbox_messages_old!=chatbox_messages&&(my_setcookie("CNM",1,1,0),chatbox_messages_old=document.getElementById("chatbox").innerHTML=chatbox_messages,document.getElementById("chatbox").scrollTop=document.getElementById("chatbox").scrollHeight+document.getElementById("chatbox").offsetHeight,document.getElementById("chatbox").scrollTop=999999),null!=document.getElementById("chatbox_members").innerHTML&&(document.getElementById("chatbox_members").innerHTML=chatbox_memberlist),chatbox_updated=chatbox_last_update};a.open("GET","/chatbox/chatbox_actions.forum"+b+"&mode=refresh",!0);a.send(null)};$(window).focus(function(){my_setcookie("CHF",1,1,0);my_setcookie("CNM","",0,0)}).blur(function(){my_setcookie("CHF","",0,0);my_setcookie("CNM","",0,0)}).trigger("focus");')
      }catch(d) {
      }
    }
    0 < c && function() {
      $(window).focus(function() {
        my_setcookie("CHF", 1, 1, 0);
        my_setcookie("CNM", "", 0, 0)
      }).blur(function() {
        my_setcookie("CHF", "", 0, 0);
        my_setcookie("CNM", "", 0, 0)
      }).trigger("focus");
      var a = document.title, b = function() {
        !my_getcookie("CHF") && my_getcookie("CNM") ? (document.title = a == document.title ? "!! Nouveau message !!" : a, setTimeout(b, 300)) : (document.title = a, setTimeout(b, 5E3))
      };
      b()
    }()
  }, 5E3)
});

[Neptunia]

Le problème ne vient pas du javascript

Essayez de rajouter ceci à votre css

Code:

ul.online-users {
margin-top: 20px !important;
}

[Banpaia]

Oh merci c'est parfait !