CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| Soucis de Chat Box latérale... | |
| Baphomet
{ Membre }
Messages : 9
| Salut tout le monde,
Voilà ca va faire une heure maintenant que je bataille pour installer la chatbox latérale et je ne comprends pas pourquoi ca ne marche pas... Bref, je vous montre une image, c'est beaucoup plus parlant.
https://nsa16.casimages.com/img/2010/08/05/100805023802947416.gif
De plus, quand je déroule le forum, la box ne suis pas. Enfin je veux dire par là que quand je descends pour voir les catégorie par exemple et bien elle reste bloquer en haut...
Voilà mon template : - Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" xmlns="http://www.w3.org/1999/xhtml"> <head> <table id="lnrbox"><tr><td> <iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"> <img src="http://nsa16.casimages.com/img/2010/08/05/100805021832261040.png" onClick="document.getElementById('chatboxpop') .style.display=(this.src=='http://nsa16.casimages.com/img/2010/08/05/100805021832261040.png')?'block':'none'; this.src=(this.src=='http://nsa16.casimages.com/img/2010/08/05/100805021832261040.png')?' 'http://nsa16.casimages.com/img/2010/08/05/100805021938191.png'' :'http://nsa16.casimages.com/img/2010/08/05/100805021832261040.png';"/></td></tr></table> <!-- BEGIN meta_emulate_ie7 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <!-- END meta_emulate_ie7 --> <title>{SITENAME_TITLE}{PAGE_TITLE}</title> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING};" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> {META_FAVICO} {META} <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" /> {T_HEAD_STYLESHEET} {CSS} <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" /> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" /> <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> <!-- BEGIN switch_fb_login --> <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js"></script> <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script> <!-- END switch_fb_login --> <!-- BEGIN switch_ticker --> <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script> <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" /> <!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new --> <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */ var tickerDirParam = "{switch_ticker.DIRECTION}"; var slid_vert = false; var auto_dir = 'next'; var h_perso = parseInt({switch_ticker.HEIGHT});
switch( tickerDirParam ) { case 'top' : slid_vert = true; break;
case 'left': break;
case 'bottom': slid_vert = true; auto_dir = 'prev'; break;
case 'right': auto_dir = 'prev'; break;
default: slid_vert = true; }
$(document).ready(function() { var w_cont = $('#fa_ticker_container').width();
if (w_cont > 0) { $('#fa_ticker_container').width(w_cont);
/* Affichage de la liste */ $('#fa_ticker_content').css('display','block');
/* Calcul des dimensions du conteneur et des �l�ments */ var width_max = $('ul#fa_ticker_content').width(); var width_item = Math.floor(width_max / {switch_ticker.SIZE}); var height_max = h_perso;
/* Calcul de la hauteur maximale du contenur en fonction des �l�ments et de la hauteur personnalis�e dans l'admin */ $('ul#fa_ticker_content li').each( function () { if ($(this).height() > height_max) { height_max = $(this).height(); } } );
/* Redimensionnement des �l�ments et des images trop larges */ $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () { if ($(this).width() > width_item) { var ratio = $(this).width() / width_item; var new_height = Math.round($(this).height() / ratio); $(this).height(new_height).width(width_item); } });
/* Redimensionnement et centrage du conteneur en mode vertical */ if (slid_vert) { $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto'); }
/* Initialisation du caroussel */ $('#fa_ticker_content').jcarousel({ vertical: slid_vert, wrap: 'circular', auto: {switch_ticker.STOP_TIME}, auto_direction: auto_dir, scroll: 1, size: {switch_ticker.SIZE}, height_max: height_max, animation: {switch_ticker.SPEED} }); } else { $('ul#fa_ticker_content li:not(:first)').css('display','none'); $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center'); } }); //]]> </script> <!-- END switch_ticker_new -->
<script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ <!-- BEGIN switch_enable_pm_popup --> pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); pm.focus(); <!-- END switch_enable_pm_popup --> <!-- BEGIN switch_report_popup --> report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}'); report.focus(); <!-- END switch_report_popup --> <!-- BEGIN switch_ticker --> ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME}); <!-- END switch_ticker --> });
<!-- BEGIN switch_login_popup --> var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false; <!-- END switch_login_popup --> //]]> </script>
{GREETING_POPUP} <!-- BEGIN hitskin_preview --> <style type="text/css"> #hitskin_preview { margin: 0; padding: 0; position: fixed; top: 0; left: 0; width: 100%; height: 65px; background: url('http://2img.net/i/fa/hitskin/hitskin_bar.png') repeat-x left -15px; color: #fff; } * html #hitskin_preview { /* Fix for IE6 since it doesn't implement fixed positionning */ position: absolute; top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop); z-index: 2; background: transparent url('http://2img.net/i/fa/hitskin/hitskin_bar-ie6.gif') repeat-x left -15px; } * html { /* Gunlaug's Speed fix for the above positionning fix. Sorry for the fix for the fix */ background: #fff url(foo) fixed; } #hitskin_preview h1 { float: left; margin: 3px 0 0 0; padding: 0 0 0 10px; font: italic normal 25px Arial,sans serif; color: #fff; } #hitskin_preview h1 img { vertical-align: middle; } #hitskin_preview em { color: #7CBA2C; font-weight: bold; } #hitskin_preview a { color: #fff; } #hitskin_preview a:hover { text-decoration: underline; }
#hitskin_preview .content { text-align: right; } #hitskin_preview .content p { margin: 4px 1em 0px 1em; font-size: 13px; line-height: 1.8em; color: #fff; font-weight: bold; } #hitskin_preview .content p span { font-weight: normal; font-size: 0.8em; } body { margin-top: 40px !important; } {hitskin_preview.HITSKIN_RTL_CSS} </style> <!-- END hitskin_preview -->
<!-- BEGIN switch_ticker_new --> <style> .jcarousel-skin-tango .jcarousel-item { text-align:center; width: 10px; }
.jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: {switch_ticker.SPACING}px; }
.jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: {switch_ticker.SPACING}px; }
</style> <table id="lnrbox"><tr><td> <!-- END switch_ticker_new --> </head> <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}"> <!-- BEGIN hitskin_preview --> <div id="hitskin_preview" style="display: block;"> <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1> <div class="content"> <p> {hitskin_preview.L_THEME_SITE_PREVIEW}
<span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span> </p> </div> </div> <!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup --> <div id="login_popup"> <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0"> <tr height="25"> <td class="catLeft"> <span class="genmed module-title">{SITENAME}</span> </td> </tr> <tr height="{LOGIN_POPUP_MSG_HEIGHT}"> <td class="row1" align="left" valign="top"> <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="mainoption" value="{L_LOGIN}" /> <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" /> <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" /> </form> </div> <span class="genmed">{LOGIN_POPUP_MSG}</span> </td> </tr> </table> </div> <!-- END switch_login_popup -->
<a name="top"></a> {JAVASCRIPT} <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center"> <tr> <td class="bodyline"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <!-- BEGIN switch_logo_left --> <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td> <td align="center" width="100%" valign="middle"> <div class="maintitle">{MAIN_SITENAME}</div>
<span class="gen">{SITE_DESCRIPTION} </span> </td> <!-- END switch_logo_left -->
<!-- BEGIN switch_logo_center --> <td align="center" width="100%" valign="middle"> <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<div class="maintitle">{MAIN_SITENAME}</div>
<span class="gen">{SITE_DESCRIPTION}</span> </td> <!-- END switch_logo_center -->
<!-- BEGIN switch_logo_right --> <td align="center" width="100%" valign="middle"> <div class="maintitle">{MAIN_SITENAME}</div>
<span class="gen">{SITE_DESCRIPTION} </span> </td> <td> <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a> </td> <!-- END switch_logo_right --> </tr> </table>
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}"> <tr> <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td> </tr> </table>
<div style="clear: both;"></div>
<!-- BEGIN switch_ticker_new --> <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td {CLASS_TABLE_TYPE} align="left" class="row1"> <div id="fa_ticker_container"> <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;"> <!-- BEGIN ticker_row --> <li>{switch_ticker.ticker_row.ELEMENT}</li> <!-- END ticker_row --> </ul> </div> </td> </tr> </table> </div> <!-- END switch_ticker_new -->
<!-- BEGIN switch_ticker --> <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td {CLASS_TABLE_TYPE} align="left" class="row1"> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content"> <!-- BEGIN ticker_row --> <div>{switch_ticker.ticker_row.ELEMENT}</div> <!-- END ticker_row --> </div> </div> </div> </td> </tr> </table> </div> <!-- END switch_ticker -->
<div id="page-body"> <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <table cellpadding="0" cellspacing="0" width="100%" class="three-col"> <tbody> <tr> <td valign="top" width="{C1SIZE}"> <div id="{ID_LEFT}"> <!-- BEGIN giefmod_index1 --> {giefmod_index1.MODVAR} <!-- BEGIN saut --> <div style="height:{SPACE_ROW}px"></div> <!-- END saut --> <!-- END giefmod_index1 --> </div> </td> <td valign="top" width="100%"> <!-- BEGIN html_validation --> </td> </tr> </tbody> </table> </div> </div> </td> </tr> </table> </body> </html> <!-- END html_validation --> Merci d'avance a ceux qui pourront m'aider... | | |
| | | Kaiji
Blanche-Neige
Messages : 5578
| Bonjour,
Votre problème est-il résolu ? Si oui, merci de cocher dans "icône du sujet" l'icône "résolu" en éditant votre 1er post.
| | |
| | | Baphomet
{ Membre }
Messages : 9
| Bonjour, non toujours pas mais j'aime pas faire des up c'est pour ca que c'est toujours vide ^^ | | |
| | | Liliana
{ Membre actif }
Messages : 997
| Bonsoir, Alors après bataille avec le template, j'ai réussi à le faire fonctionner \o/ Devait y avoir un problème de code; soit un point virgule manquant soit un truc du genre (j'ai du reprendre le code en entier xD) Pour l'image qui montait, il fallait juste rajouter un "position: fixed" à la table. J'ai aussi fait en sorte que la chatbox soit en bas de la page; mais ça se change facilement =) Pour ce qui est de l'ouverture et de la fermeture, ça devait être un problème dans les images en fait .. Ce code là marche [J'ai pas remis le template en entier, celui sur mon forum de test est déjà modifié; mais ce bout est en haut du template] - Code:
-
<table style="position: fixed; bottom: 50px; left: -10px; z-index:10000;"><tr> <td> <iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe> </td>
<td style="vertical-align: bottom;"> <img src="http://nsa16.casimages.com/img/2010/08/05/100805021832261040.png" onClick="document.getElementById('chatboxpop') .style.display=(this.src=='http://nsa16.casimages.com/img/2010/08/05/100805021832261040.png')?'block':'none';this.src=(this.src=='http://nsa16.casimages.com/img/2010/08/05/100805021832261040.png')?'http://nsa16.casimages.com/img/2010/08/05/100805021938191.png':'http://nsa16.casimages.com/img/2010/08/05/100805021832261040.png';"/> </td> </tr></table> <br clear="all" />
Dis moi si ça fonctionne =) | | |
| | | Baphomet
{ Membre }
Messages : 9
| Bonsoir,
C'est bon, merci beaucoup, ca marche ! Sincèrement merci parce qu'on arrêtait pas de me demander ou était passer la CB ^^' Tu m'enlèves une sacrée épine du pied ^^
Merci encore ♥
On peut clore le sujet maintenant ^^
EDIT : A si j'ai un soucis xD Quand je l'ouvre, l'image de fermeture est décalée de la CB =p |
Dernière édition par Baphomet le Sam 14 Aoû 2010, 14:39, édité 1 fois | |
| | | Liliana
{ Membre actif }
Messages : 997
| Fallait la remettre en bas du forum en attendant xD
Sinon, de rien c'est mon boulot =) Je classe alors | | |
| | | Baphomet
{ Membre }
Messages : 9
| Ouais c'est pas bête xDDD J'y avais pas du tout pensé xD Han attends, j'ai juste un petit soucis d'image, quand la box est ouverte, j'arrive pas a coller l'image de fermeture a la Box ^^' | | |
| | | Liliana
{ Membre actif }
Messages : 997
| Hum ... En essayant ceci : (j'avais pas vu ton édit, excuse xD) - Code:
-
<table style="position: fixed; bottom: 50px; left: -7px; z-index:10000;" cellspacing="0" cellpadding="0"><tr> <td> <iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe> </td>
<td style="vertical-align: bottom;"> <img src="http://nsa16.casimages.com/img/2010/08/05/100805021832261040.png" onClick="document.getElementById('chatboxpop') .style.display=(this.src=='http://nsa16.casimages.com/img/2010/08/05/100805021832261040.png')?'block':'none';this.src=(this.src=='http://nsa16.casimages.com/img/2010/08/05/100805021832261040.png')?'http://nsa16.casimages.com/img/2010/08/05/100805021938191.png':'http://nsa16.casimages.com/img/2010/08/05/100805021832261040.png';"/> </td> </tr></table> <br clear="all" /> J'ai juste rajouté un cellspacing="0" et un "cellpadding="0" dans la table =) | | |
| | | Baphomet
{ Membre }
Messages : 9
| Pas de soucis on ne peut pas tout voir non plus Merci beaucoup c'est ok ^^
Tu peux classer et encore merci ^^ | | |
| | | Liliana
{ Membre actif }
Messages : 997
| De rien =) Je classe | | |
| | | Contenu sponsorisé
| | | | | Soucis de Chat Box latérale... | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|