Sujets similaires

Bonjour tout le monde,

J'essaye de placer mon QEEL et ma chatbox (dont les codes liés à l'apparence sont d'ailleurs amenés à entièrement évoluer) automatiquement par défaut sous le corps du forum. Malheureusement voici ce que cela donne, les liens du footer se retrouvant placés avant la chatbox et cette dernière n'étant qu'un carré vide : https://i.imgur.com/I3latnQ.png . De plus vous remarquerez que les images de fond sont étrangement décalées vers le haut.

Voici donc ma feuille CSS complète :

Code:: /*OVERALL HEADER*/
#i_logo {
   display: block;
   margin-top : 200px; /*marge en haut de la bannière*/
   margin-bottom : 10px; /*marge en bas de la bannière*/
   width: 1600px; /*largeur de la bannière*/
}
.maintitle h1 {
   display: none;
   margin: 0;
   padding: 0;
}
.description_site {
   display: none;
}

/*NAVIGATION*/

/*CORPS DU FORUM*/
body {
   background: url("http://nsa38.casimages.com/img/2015/09/10/150910011604699472.png") no-repeat scroll left bottom, url("http://nsa38.casimages.com/img/2015/09/10/150910120003933257.png") no-repeat scroll right bottom, url("http://nsa37.casimages.com/img/2015/07/14/150714115032896335.png") repeat scroll center top, #f6f5f3 none repeat scroll 0 0;
   bottom:320px;
   box-sizing:border-box;
   min-height:100%;
   padding:10px 10px 60px;
   position:relative;
}
.bodyline {
   position:relative;
   border:none
}
div#page-footer {
   bottom:-380px;
   left: 0;
   padding:5px 0;
   position:absolute;
   text-align:center;
   width: 100%;
}

/*POLICE*/
a {text-decoration: none;}
a:link {text-decoration: none;}
a:hover {text-decoration: none!important;}
a.forumlink {text-decoration: none;}
a.forumlink:hover {text-decoration: none!important;}
a.topiclink {text-decoration: none; }
a.topiclink:hover {text-decoration: none!important; }

/*ACCUEIL*/
.qeel {
   border-bottom:2px solid #5c5c5c;
   bottom:-300px;
   padding-top:15px;
   position:absolute;
   width:800px;
}
.chatbox{
   width: 100%;
   left: -2px;
   border-bottom: 2px solid #5c5c5c;
   position: absolute;
   overflow: hidden;
   z-index:-1;
   padding-top: 15px;
   margin-bottom: 0px;
   margin-top: 78px;
}
/*CATEGORIES ET FORUMS*/
/*oter le fond des categories*/
.secondarytitle h2 {
  background-color: transparent;}

/*fond des titres de catégories*/
.secondarytitle {
  background-image: url('http://i44.servimg.com/u/f44/16/64/78/25/barrre10.jpg');
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: bottom left;
  height:30px;
  width:180 px;
  text-align: left;
  padding-left: 5px;}

Et mon template index_body modifié :

Code:: {JAVASCRIPT}

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

<tr>
<td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>


<tr>
<td class="row1" rowspan="3" align="center" valign="middle">
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
</td>
</tr>

</table>


{CHATBOX_TOP}
{BOARD_INDEX}

<div class="qeel"><center>
<table width="950px" border="0" cellspacing="1" cellpadding="0" style="padding-left: 10px;">
<tr><td><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="catHead" colspan="2" height="28">

<span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>



<span class="cattitle">{L_WHO_IS_ONLINE}</span>

</td>
</tr>
<tr>
<td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
<td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</span></td>
</tr>
<tr>
<td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}</span></td>
</tr>
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
<tr>
<td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
</tr>

<tr>
<td class="row1">
<span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />

<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>

</span>
</td>
</tr>

</table>
</td></tr></table>
<div class="chatbox">{CHATBOX_BOTTOM}</div>


<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
</form>


<br clear="all" />

{AUTO_DST}

Ce que j'aimerais c'est d'éviter d'avoir à bidouiller pour placer ça correctement car un affichage différent, une résolution qui change, etc. et cela risque de tout bouger. Aussi je me demandais s'il ne serait pas possible de fixer un élément donné et d'imposer le qeel/chatbox de se placer automatiquement sous cet élément par défaut ? C'est une idée mais en réalité je m'y connais vraiment très peu en codage...

Merci d'avance pour votre aide. ♥

PS : Au cas où je tiens à préciser que les images sont empruntées au forum Dragon Age Les Chroniques de Thédas et la graphiste de celui-ci est parfaitement au courant que j'utilise ses images par défaut en attendant, pour travailler mon codage, c'est même elle qui m'a envoyé ici. ^^

Soucis avec affichage du QEEL et du chat sous le corps du forum

Soucis avec affichage du QEEL et du chat sous le corps du forum

Sujets similaires

Sujets similaires

Partenaires Or