Codage de Chatbox Problème de CSS Bouton_activeCodage de Chatbox Problème de CSS Bouton_hoverCodage de Chatbox Problème de CSS Fb-hoverCodage de Chatbox Problème de CSS Fb-active
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!

Derniers sujets
» Système d'onglets simple et personnalisable
Codage de Chatbox Problème de CSS EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Codage de Chatbox Problème de CSS EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Codage de Chatbox Problème de CSS EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Codage de Chatbox Problème de CSS EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Codage de Chatbox Problème de CSS EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Codage de Chatbox Problème de CSS EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Codage de Chatbox Problème de CSS EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Codage de Chatbox Problème de CSS EmptySam 11 Fév 2023, 06:04 par Krager

Le deal à ne pas rater :
Boutique Nike : -25% dès 50€ sur TOUT le site Nike avec le code ...
Voir le deal

Partagez
 

Codage de Chatbox Problème de CSS

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://galerie-esmeria.forumperso.com
Angie
{ Membre }
{ Membre }

Féminin Messages : 94



Codage de Chatbox Problème de CSS Empty
Voila j'ai trouver le code pour mettre la chatbox sur toute les page, sur le coté, comme sur ce forum, j'ai aussi trouver ce code qui m'a paru très utile :
misslilly a écrit:
Il te suffit simplement d'intégrer la mise en page que tu souhaites dans le css, comme ceci :
Code:
#lnrbox
{position: fixed;
top: 100px;
left: 0px;
background-color: #f3d19a;
background-image: url(' ');
border: 2px solid #915743;
z-index: 999;}

Explications:

position: fixed;
fait que ta chatbox reste toujours fixe

top: 100px;
définit la taille par rapport au haut de ton forum, si tu veux qu'elle 'commence' en bas, tu remplaces top par bottom
100 px signifie qu'elle sera décollée de 100px du haut de ton forum, plus tu augmentes, plus l'écart sera grand

left: 0px;

définit la taille par rapport à la gauche de ton forum, si tu veux qu'elle soit à droite, tu remplaces left par right
0px signifie qu'elle sera collée au bord de ton forum, plus tu augmentes, plus l'écart sera grand

background-color: #f3d19a;
définit la couleur de fond de ta chatbox, tu peux mettre un code hexadécimal ou le nom de ta couleur

background-image: url(' ');
si tu veux insérer une image dans le fond de ta chatbox, pense à choisir une image de la même taille que ta chatbox, et si possible une image plutôt faible en opacité

border: 2px solid #915743;
cela concerne le contour de ta chatbox, 1px pour la taille, solid pour le type de bordure (solid = pleine, dotted = pointillés, dashed = tirets, groove = en relief ...)

J'ai personnalisé le code comme ceci :

Code:
#lnrbox
{position: fixed;
top: 100px;
right: 0px;
background-color: #B2BDDF;
border: 2px grove #3E4D8F;
z-index: 999;}

Et ça n'a rien changé du tout. J'aimerais savoir ou est le problème dans mon code.


Pendant que j'y suis, j'aimerais aussi savoir comment changer les images ouvrir, fermer la chatbox.

Merci d'avance !
MessageSujet: Codage de Chatbox Problème de CSS   Codage de Chatbox Problème de CSS EmptyDim 04 Avr 2010, 14:27
Revenir en haut Aller en bas
http://www.css-actif.com
Orange
Orange
RocketMan
RocketMan

Masculin Messages : 3086



Codage de Chatbox Problème de CSS Empty
Donne nous le code HTML de ta chatbox (pas le CSS) et on devrait être en mesure de t'expliquer comment faire ce que tu souhaites Wink.

Merci.
MessageSujet: Re: Codage de Chatbox Problème de CSS   Codage de Chatbox Problème de CSS EmptyLun 05 Avr 2010, 13:12
Revenir en haut Aller en bas
http://galerie-esmeria.forumperso.com
Angie
{ Membre }
{ Membre }

Féminin Messages : 94



Codage de Chatbox Problème de CSS Empty
Voila le html de la template overall-header-new (j'espère que c'est bien ça qu'il faut que je donne)

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>
   <!-- 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_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 -->
   <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 -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 600px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"/></td></tr></table>
   <!-- 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}
            <br />
            <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>
                     <br />
                     <span class="gen">{SITE_DEscriptION}<br />  </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><br />
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <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>
                     <br />
                     <span class="gen">{SITE_DEscriptION}<br />&nbsp; </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 -->
            <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 -->
MessageSujet: Re: Codage de Chatbox Problème de CSS   Codage de Chatbox Problème de CSS EmptyLun 05 Avr 2010, 13:16
Revenir en haut Aller en bas
http://www.css-actif.com
Orange
Orange
RocketMan
RocketMan

Masculin Messages : 3086



Codage de Chatbox Problème de CSS Empty
En fait, la seule chose que j'avais besoin était la partie que tu avais ajoutée, pas le code au grand complet Wink.

Donc remplace ceci:
Code:
<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 600px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"/></td></tr></table>

Par cela:
Code:
<table class="chat"><tr><td><iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 600px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"/></td></tr></table>

Et dans ton code CSS, colle ceci (tu peux évidemment le modifier comme tu veux):
Code:
.chat {
position: fixed;
top: 100px;
right: 0px;
background-color: #B2BDDF;
border: 2px grove #3E4D8F;
z-index: 999;
}

Une fois cela fait, pour modifier les images ouvrir et fermé tu n'as qu'à remplacer les quatre https://i.servimg.com/u/f81/11/21/85/73/ouvrir10.png par quatre fois le lien de ton image ouvrir.

Pour l'image fermer, tu remplace https://i.servimg.com/u/f81/11/21/85/73/fermer10.png par le lien de ton image fermer.

Si tu me donnes les images, je peux le faire à ta place.

Problème résolu ?
MessageSujet: Re: Codage de Chatbox Problème de CSS   Codage de Chatbox Problème de CSS EmptyLun 05 Avr 2010, 13:23
Revenir en haut Aller en bas
http://galerie-esmeria.forumperso.com
Angie
{ Membre }
{ Membre }

Féminin Messages : 94



Codage de Chatbox Problème de CSS Empty
Problème résolu mais j'en ai un nouveau, la chatbox, une fois ouverte ne se referme plus.

Edit :par contre je trouve la chatbox un peu haute, comment faire pour changer la dimension ?

Edit 1 : J'ai voulu essayer de changer de bouton mais la transparence passait pas alors j'ai refait le meme mais avec un fond de meme couleur que le fond du forum et maintenant aucun bouton n'apparait ^^"

Voila le code :
Code:
<table class="chat"><tr><td><iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 600px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="http://moe.mabul.org/up/moe/2010/04/05/img-192306sir7b.png"
 onClick="document.getElementById('chatboxpop').style.display=(this.src=='http://moe.mabul.org/up/moe/2010/04/05/img-192306sir7b.png')?'block':'none';this.src=(this.src=='http://moe.mabul.org/up/moe/2010/04/05/img-192306sir7b.png')?'http://moe.mabul.org/up/moe/2010/04/05/img-1926029v601.png':'http://moe.mabul.org/up/moe/2010/04/05/img-192306sir7b.png';"/></td></tr></table>

Image fermer :
Code:
http://moe.mabul.org/up/moe/2010/04/05/img-192915verls.png
Image Ouvrir :
Code:
http://moe.mabul.org/up/moe/2010/04/05/img-19295396h6v.png
MessageSujet: Re: Codage de Chatbox Problème de CSS   Codage de Chatbox Problème de CSS EmptyLun 05 Avr 2010, 13:35
Revenir en haut Aller en bas
http://generation.geek.chez.com
Boow
Boow
{ Membre actif }
{ Membre actif }

Masculin Messages : 866



Codage de Chatbox Problème de CSS Empty
Votre problème est-il résolu ?
MessageSujet: Re: Codage de Chatbox Problème de CSS   Codage de Chatbox Problème de CSS EmptyMer 14 Avr 2010, 13:33
Revenir en haut Aller en bas
http://nin-gai.forum2ouf.com/
Imari
Imari
{ Membre hyper-actif }
{ Membre hyper-actif }

Féminin Messages : 1538



Codage de Chatbox Problème de CSS Empty
Bonjour,

Aucune relance de la part du créateur du sujet ! Je considère donc ce problème comme étant résolu et je le déplace pour céder la place aux problèmes en cours.

Si vous avez d'autres questions, merci d'ouvrir un nouveau topic en respectant les règles de l'entraide.
MessageSujet: Re: Codage de Chatbox Problème de CSS   Codage de Chatbox Problème de CSS EmptyMar 20 Avr 2010, 06:57
Revenir en haut Aller en bas
Contenu sponsorisé




Codage de Chatbox Problème de CSS Empty
MessageSujet: Re: Codage de Chatbox Problème de CSS   Codage de Chatbox Problème de CSS Empty
Revenir en haut Aller en bas
 

Codage de Chatbox Problème de CSS

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Probleme avec le codage chatbox coulissante
» problème de codage.
» Chatbox latérale : positionnement et codage
» Problème de codage html
» Probleme de codage de PA

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit