Code sur page d'acceuil

[Tit-Yosh]

Bonjour
Je voudrais faire quelques choses sur mon forum qui ressemblerais un peu à sa http://fanasiacreations.forumactif.com/forum.htm (sur la page d'acceuil) Quand tu mets ton curseur sur fanasia paradise ou l'images rouges il y à plusieurs informations qui y sont dans chaques onglet.

Quel est le code pour faire un travail qui ressemblerais à cela sur mon forum qui est http://naruto-rpg-ninja.forumactif.biz/index.htm

J'aimerais un onglet sur les statistiques des membres sur le forum (le tableau des villages), un sur les staff, un sur les partenaires et le dernier il y aurais une place pour tout sortes de musique (je ne me rappelle pas du nom)

S'il quelqu'un peut m'expliquer clairement de façon à ce que je comprenne ou s'inscrire sur le forum *je le metterais admin* pour qui mettes le tableau en place..


J'ai vu le tuto que vous avez mis http://www.johnstyle.fr/langage/javascript/creer-des-onglets-facilement/

Mais je comprend rieeennnn

Merci beaucoup en avance

[Lixyr]

Bonjour,

Nous avons déjà expliqué un nombre de fois comment ce tuto fonctionnait.

Je vous invite par exemple à lire ce sujet.

[Tit-Yosh]

Oui je sais et j'ai suivis chaque étape comme vous l'avez dit mais cela donner toujours rien je comprend rien :/. Je ne peux pas cliquer sur mes autres onglets. Je ne peux pas avec l'adresse du fichier puisque quand je l'héberge cela dit erreur

j'aurais besoin d'aide :/

Avec les modifications que vous avez faites moi sa me donne cela http://naruto-rpg-ninja.forumactif.biz/index.htm

[Lixyr]

Je peux avoir le code que vous avez mis ?

[Tit-Yosh]

Code:

<script src="ADRESSE_DU_FICHIER.js"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></ul>

Et en Css

Code:

ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #d8f8ca;
  border: 1px solid #68ce3e;
  cursor: pointer;
  margin-bottom: -1px;
} 
.mon_onglet:hover{
  background: #b8efa1;
}           
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #b8efa1;
  border-top: 1px solid #68ce3e;
  border-right: 1px solid #68ce3e;
  border-left: 1px solid #68ce3e; 
  border-bottom: 1px solid #b8efa1; 
  cursor: pointer; 
  margin-bottom: -1px;
}             
.clear{
  clear: both;
}

.mon_contenu{
  color: #666;
  background: #E6D1A1;
  border: 2px solid #DBB764;
  padding: 2px;
  margin-left: -40px;}


#mes_contenus, #mes_onglets{
  width: 100%;
  }

Merci beaucoup de m'aider

[Lixyr]

Si vous avez réellement mis le premier code dans votre PA n'espérez pas qu'il marche, vous n'avez pas le ficher java qui va avec :

<script src="ADRESSE_DU_FICHIER.js">

Il faut le remplir, ça, en hébergeant le fichier sur un site qui soutient les fichiers type JavaScript (JS).

Mettez ça, c'est mon fichier hébergé. Si vous ne faites pas de bêtises avec u_u

Code:

<script src="http://www.archive-host.com/files/597546/96de005e35ffd2b9823d2b1d229d90d18341a601/onglets_2.js"></script>

[Tit-Yosh]

Oui mais comme j'ai indiquer ci dessus quand je l'héberge à l'endroti que vous avez indiqué dans l'autre sujet cela me marque impossible, erreur.

Maintenant je peux cliquer sur les onglets mais comment je fais pour enlever le gros carré noir à droite? :/

http://naruto-rpg-ninja.forumactif.biz/index.htm

[Lixyr]

Oulà, ça ressemble à une erreur de codage ça. Oo

Vous avez touché aux templates ? Je peux avoir le code que vous avez mis dans la page d'accueil et le css entier ?

[Tit-Yosh]

Oui bien sur voila

Page d'acceuil:

Code:

<script src="http://www.archive-host.com/files/597546/96de005e35ffd2b9823d2b1d229d90d18341a601/onglets_2.js"></script>

.<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></ul>

Et le Css:

Code:

ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #d8f8ca;
  border: 1px solid #68ce3e;
  cursor: pointer;
  margin-bottom: -1px;
} 
.mon_onglet:hover{
  background: #b8efa1;
}           
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #b8efa1;
  border-top: 1px solid #68ce3e;
  border-right: 1px solid #68ce3e;
  border-left: 1px solid #68ce3e; 
  border-bottom: 1px solid #b8efa1; 
  cursor: pointer; 
  margin-bottom: -1px;
}             
.clear{
  clear: both;
}

.mon_contenu{
  color: #666;
  background: #E6D1A1;
  border: 2px solid #DBB764;
  padding: 2px;
  margin-left: -40px;}


#mes_contenus, #mes_onglets{
  width: 100%;
  }




/* Chatbox-------------------------------------------------------------*/body.chatbox {
   background-image: none;
   padding: 0;
   margin: 0;
   background-color: #ffffff;
   }
#chatbox_header {
   height: 30px;
   }
#chatbox_header.main-head {
   padding: 0 1.3em;
   color: #dedfdf;
   background-color: #000000;
   }
.chatbox-title,.chatbox-title a.chat-title {
   color: #dedfdf;
   text-decoration: none;
   }
.chatbox-title {
   float: left;
   margin: 0;
   padding: 2px 5px 0 5px;
   width: 15em;
   }
.chatbox-options {
   float: right;
   list-style: none;
   font-size: 11px;
   margin: 0.7em 0.5em 0.5em 0.5em;
   }
.chatbox-options li {
   display:inline;
   }
.chatbox-options li,.chatbox-options li a,.chatbox-options li label {
   color: #dedfdf;
   }
#chatbox_members {
   position: absolute;
   top: 30px;
   bottom: 30px;
   width: 180px;
   overflow: auto;
   background-color: #ffffff;
   border-right: 1px  solid #000000;
   }
#chatbox_messenger_form {
   margin: 10px 0 0 0;
   }
#chatbox_members .member-title {
   text-align: center;
   padding: 0.5em 0.25em;
   background-image: none;
   font-size: 12px;
   background-color: #ffffff;
   color : #11470E;
   font-family: Verdana,Arial,Helvetica,sans-serif;
   }
#chatbox_members ul {
   list-style: none;
   margin: 0 0 0 1em;
   }
#chatbox_members ul li {
   margin: 0.5em 0.5em 0.5em 0;
   }
#chatbox {
   position: absolute;
   top: 30px;
   left: 181px;
   right: 0;
   bottom: 30px;
   overflow: auto;
   line-height: 10px;
   }
#chatbox p {
   line-height: 1.2em;
   }
.chatbox_row_1 {
   padding: 4px;
   background-color: #ffffFF;
   }
.chatbox_row_2 {
   padding: 4px;
   background-color: #ffffff;
   }
.chatbox_row_3 {
   padding: 4px;
   background-color: #ffffFF;
   }
#chatbox .user {
   font-weight: bold;
   }
.memberlist_row_1 {
   background-color: #ffffff;
   }
#chatbox_footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   border-top: 1px  solid #000000;
   }
#message,#submit_button{
   border-width: 1px;
   }
.fontbutton {
   padding: 1px;
   cursor: pointer;
   text-align: left;
   }
.fontbutton_normal {
   background: #E1E1E2;
   }
.fontbutton_selected {
   background: #BBC7CE;
   border: 1px solid #000000;
   }
.fontbutton_clicked {
   background: #959595;
   border: 1px solid #000000;
   }
.fontbutton_hover {
   background: #E1E1E2;
   border: 1px solid #000000;
   }
.fontbutton {
   background:#E1E1E2 none repeat scroll 0%;
   border:medium none;
   color:#000000;
   float:left;
   margin-right:10px;
   padding:1px;
   }

/*Internet Explorer fixers and hacks for Chatbox *
/* html #chatbox-members {
   
/* IE expressions helping IE work in Standards mode */
height: expression(( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 3) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) ) + "px");
   }
* html #chatbox {
   
/* IE expressions helping IE work in Standards mode */
height: expression(( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 3) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) ) + "px");
   width: expression(( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 10) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 1) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 1.3) ) + "px");
   }
* html #chatbox-footer {
   
/* IE expressions helping IE work in Standards mode */
width: expression(( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 0) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 0) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) ) + "px");
   }
#chatbox_contextmenu {
   border: 2px solid black;
   background-color: #f3c4ff;
   }
#chatbox_contextmenu p {
   margin:0;
   padding: 1px 4px;
   font-family: verdana, arial, sans-serif;
   background: #ffd6fe;
   border-bottom:1px solid #777;
   }
#chatbox_contextmenu p.hover {
   background: #ecc5ff;
   }
#chatbox_contextmenu p.close {
   padding: 1px;
   font-size: 95%;
   color:#fff;
   background: url('');
   }
#chatbox_contextmenu p.close img {
   vertical-align: middle;
   padding-left: 20px;
   }
#chatbox_contextmenu a {
   color: #b225ff;
    text-decoration: none;
    font-size: 95%;
   }
#chatbox_contextmenu a:hover {
   color: ;
   }

.pun table.table td {
   padding: 0.6em 0 0.7em;
   border-width: 2px;
   border-style: dotted none none dotted;
   line-height: 130%;
   background-color: #DDDDFF;
   border-color: #FFFFFF;
   }
#pun-about {
   border-style: dotted;
   border-width: 2px;
   border-color: #FFFFFF;
   text-align: right;
   line-height: 150%;
   padding: 0.6em 1em;
   background-color: #DDDDFF;
   }
.pun .paged-head, .pun .paged-foot {
   border: 2px dotted #FFFFFF;
   background-color: #;
   background-image : none;
   background-repeat:no-repeat;
                margin: 0px;padding: 0px;
}
#onlinelist {
   border-top: 2px dotted #FFFFFF;
   padding: 0.6em 1em;
   background-color: #DDDDFF;
   }

[Lixyr]

Il n'y a rien dans le css qui fâche, mais vous ne m'avez pas donné la page d'accueil entière.

[Tit-Yosh]

ah désoler l'autre chose est le tableau je ne croyais pas que vous en auriez besoin, voila

Code:

<script src="http://www.archive-host.com/files/597546/96de005e35ffd2b9823d2b1d229d90d18341a601/onglets_2.js"></script>

.<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></ul>










<div style="margin:auto;text-align:center;width:100%"> <table border=1><tr><td align="left"><span style="font-size: 12px; line-height: normal">Village</span></td><td align="left"><span style="font-size: 12px; line-height: normal">Ninjas</span></td><td align="left"><span style="font-size: 12px; line-height: normal">Kage</span></td><td align="left"><span style="font-size: 12px; line-height: normal">Alliés</span></td><td align="left"><span style="font-size: 12px; line-height: normal">États</span></td><td align="left"><span style="font-size: 12px; line-height: normal">Guerre</span></td></tr><tr><td align="left"><span style="font-size: 9px; line-height: normal">Konoha</span></td><td align="left"><span style="font-size: 9px; line-height: normal">0</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Aucun</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Non</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Bon</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Non</span></td></tr><tr><td align="left"><span style="font-size: 9px; line-height: normal">Suna</span></td><td align="left"><span style="font-size: 9px; line-height: normal">0</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Aucun</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Non</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Bon</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Non</span></td></tr><tr><td align="left"><span style="font-size: 9px; line-height: normal">Kumo</span></td><td align="left"><span style="font-size: 9px; line-height: normal">0</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Aucun</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Non</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Bon</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Non</span></td></tr><tr><td align="left"><span style="font-size: 9px; line-height: normal">Oto</span></td><td align="left"><span style="font-size: 9px; line-height: normal">0</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Aucun</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Non</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Bon</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Non</span></td></tr><tr><td align="left"><span style="font-size: 9px; line-height: normal">Kiri</span></td><td align="left"><span style="font-size: 9px; line-height: normal">0</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Aucun</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Non</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Bon</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Non</span></td></tr><tr><td align="left"><span style="font-size: 9px; line-height: normal">Iwa</span></td><td align="left"><span style="font-size: 9px; line-height: normal">0</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Aucun</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Non</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Bon</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Non</span></td></tr><tr><td align="left"><span style="font-size: 9px; line-height: normal">Ame</span></td><td align="left"><span style="font-size: 9px; line-height: normal">0</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Aucun</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Non</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Bon</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Non</span></td></tr><tr><td align="left"><span style="font-size: 9px; line-height: normal">Kusa</span></td><td align="left"><span style="font-size: 9px; line-height: normal">0</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Aucun</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Non</span><

Pour les templates j'ai juste toucher à celle de index_body
Voila si vous en avez besoin

Code:


{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%"  class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle" align="right">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="facebook_login()" v="2" perms="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
         <!-- END switch_delete_cookies -->
         </span>
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%"  class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="facebook_login()" v="2" perms="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="catHead" colspan="2" height="28">   
      <!-- BEGIN switch_viewonline_link -->
      <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
      <!-- END switch_viewonline_link -->
      
      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle">{L_WHO_IS_ONLINE}</span>
      <!-- END switch_viewonline_nolink -->
      </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>
   <!-- BEGIN switch_chatbox_activate -->
   <tr>
      <td class="row1">
         <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
            <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>
            <!-- END switch_chatbox_popup -->
         </span>
      </td>
   </tr>
   <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />


<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
  <tr>
      <td align="center"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}"><br/>
      <span class="gensmall">{L_NEW_POSTS}</span></td>
      <td width="125">  </td>
      <td align="center"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}"><br/>
      <span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td width="125">  </td>
      <td align="center"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}"><br/>
      <span class="gensmall">{L_FORUM_LOCKED}</span></td>
  </tr>
</table>
<!-- END switch_legend -->



{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
     status: true,
     cookie: true,
     xfbml: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

[Lixyr]

C'est bien ce qui me semblait. Votre code dans la PA est disséqué. Regardez bien, il doit être trop long ça fausse tout le cadre :

Code:

line-height: normal">Aucun</span></td><td align="left"><span style="font-size: 9px; line-height: normal">Non</span><

Comme c'est un tableau en dernier, l'erreur vient de là je pense, comme il n'est pas terminé. Votre code est trop long.

[Tit-Yosh]

Daccord donc il suffit que je supprime le code de mon tableau pour que se soit correct?

[Lixyr]

Oui, dans ce cas là ce sera correcte.

Si vous voulez absolument le tableau, vous pouvez l'insérer dans votre template index_body au bon endroit.

[Tit-Yosh]

Daccord merci ^-^
Est-ce que je pourrais le mettre dans un de mes contenus sans problèmes?

J'ai voulu rajouter un onglet, mais en le rajoutant celui cio c'est comme lier au premier onlget et je ne saisit pas quel code est mauvais :/

Deplus j'aimerais savoir quel code de couleur je dois changer dedans pour que l'onglet choisis soit blanc au lieu de vert

Merci

CSS:

Code:

ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000000;
  background: #ACB5B4;
  border: 1px solid #000000;
  cursor: pointer;
  margin-bottom: -1px;
} 
.mon_onglet:hover{
  background: #ACB5B4;
}           
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000000;
  background: #b8efa1;
  border-top: 1px solid #ACB5B4;
  border-right: 1px solid #ACB5B4;
  border-left: 1px solid #ACB5B4; 
  border-bottom: 1px solid #ACB5B4; 
  cursor: pointer; 
  margin-bottom: -1px;
}             
.clear{
  clear: both;
}

.mon_contenu{
  color: #000000;
  background: #ACB5B4;
  border: 2px solid #000000;
  padding: 2px;
  margin-left: -40px;}


#mes_contenus, #mes_onglets{
  width: 100%;
  }

































/* Chatbox-------------------------------------------------------------*/body.chatbox {
   background-image: none;
   padding: 0;
   margin: 0;
   background-color: #ffffff;
   }
#chatbox_header {
   height: 30px;
   }
#chatbox_header.main-head {
   padding: 0 1.3em;
   color: #dedfdf;
   background-color: #000000;
   }
.chatbox-title,.chatbox-title a.chat-title {
   color: #dedfdf;
   text-decoration: none;
   }
.chatbox-title {
   float: left;
   margin: 0;
   padding: 2px 5px 0 5px;
   width: 15em;
   }
.chatbox-options {
   float: right;
   list-style: none;
   font-size: 11px;
   margin: 0.7em 0.5em 0.5em 0.5em;
   }
.chatbox-options li {
   display:inline;
   }
.chatbox-options li,.chatbox-options li a,.chatbox-options li label {
   color: #dedfdf;
   }
#chatbox_members {
   position: absolute;
   top: 30px;
   bottom: 30px;
   width: 180px;
   overflow: auto;
   background-color: #ffffff;
   border-right: 1px  solid #000000;
   }
#chatbox_messenger_form {
   margin: 10px 0 0 0;
   }
#chatbox_members .member-title {
   text-align: center;
   padding: 0.5em 0.25em;
   background-image: none;
   font-size: 12px;
   background-color: #ffffff;
   color : #11470E;
   font-family: Verdana,Arial,Helvetica,sans-serif;
   }
#chatbox_members ul {
   list-style: none;
   margin: 0 0 0 1em;
   }
#chatbox_members ul li {
   margin: 0.5em 0.5em 0.5em 0;
   }
#chatbox {
   position: absolute;
   top: 30px;
   left: 181px;
   right: 0;
   bottom: 30px;
   overflow: auto;
   line-height: 10px;
   }
#chatbox p {
   line-height: 1.2em;
   }
.chatbox_row_1 {
   padding: 4px;
   background-color: #ffffFF;
   }
.chatbox_row_2 {
   padding: 4px;
   background-color: #ffffff;
   }
.chatbox_row_3 {
   padding: 4px;
   background-color: #ffffFF;
   }
#chatbox .user {
   font-weight: bold;
   }
.memberlist_row_1 {
   background-color: #ffffff;
   }
#chatbox_footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   border-top: 1px  solid #000000;
   }
#message,#submit_button{
   border-width: 1px;
   }
.fontbutton {
   padding: 1px;
   cursor: pointer;
   text-align: left;
   }
.fontbutton_normal {
   background: #E1E1E2;
   }
.fontbutton_selected {
   background: #BBC7CE;
   border: 1px solid #000000;
   }
.fontbutton_clicked {
   background: #959595;
   border: 1px solid #000000;
   }
.fontbutton_hover {
   background: #E1E1E2;
   border: 1px solid #000000;
   }
.fontbutton {
   background:#E1E1E2 none repeat scroll 0%;
   border:medium none;
   color:#000000;
   float:left;
   margin-right:10px;
   padding:1px;
   }

/*Internet Explorer fixers and hacks for Chatbox *
/* html #chatbox-members {
   
/* IE expressions helping IE work in Standards mode */
height: expression(( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 3) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) ) + "px");
   }
* html #chatbox {
   
/* IE expressions helping IE work in Standards mode */
height: expression(( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 3) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) ) + "px");
   width: expression(( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 10) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 1) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 1.3) ) + "px");
   }
* html #chatbox-footer {
   
/* IE expressions helping IE work in Standards mode */
width: expression(( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 0) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 0) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) ) + "px");
   }
#chatbox_contextmenu {
   border: 2px solid black;
   background-color: #f3c4ff;
   }
#chatbox_contextmenu p {
   margin:0;
   padding: 1px 4px;
   font-family: verdana, arial, sans-serif;
   background: #ffd6fe;
   border-bottom:1px solid #777;
   }
#chatbox_contextmenu p.hover {
   background: #ecc5ff;
   }
#chatbox_contextmenu p.close {
   padding: 1px;
   font-size: 95%;
   color:#fff;
   background: url('');
   }
#chatbox_contextmenu p.close img {
   vertical-align: middle;
   padding-left: 20px;
   }
#chatbox_contextmenu a {
   color: #b225ff;
    text-decoration: none;
    font-size: 95%;
   }
#chatbox_contextmenu a:hover {
   color: ;
   }

.pun table.table td {
   padding: 0.6em 0 0.7em;
   border-width: 2px;
   border-style: dotted none none dotted;
   line-height: 130%;
   background-color: #DDDDFF;
   border-color: #FFFFFF;
   }
#pun-about {
   border-style: dotted;
   border-width: 2px;
   border-color: #FFFFFF;
   text-align: right;
   line-height: 150%;
   padding: 0.6em 1em;
   background-color: #DDDDFF;
   }
.pun .paged-head, .pun .paged-foot {
   border: 2px dotted #FFFFFF;
   background-color: #;
   background-image : none;
   background-repeat:no-repeat;
                margin: 0px;padding: 0px;
}
#onlinelist {
   border-top: 2px dotted #FFFFFF;
   padding: 0.6em 1em;
   background-color: #DDDDFF;
   }

Page d'acceuil:

Code:

<script src="http://www.archive-host.com/files/597546/96de005e35ffd2b9823d2b1d229d90d18341a601/onglets_2.js"></script>

. <div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Acceuil</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Informations</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Tableaux</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Staff</li>
        <div class="clear"><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Musiques</li>

<div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
 <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 5</div>

</div></ul>

[Lixyr]

Alors, pour l'onglet, c'est normal, vous avez mis ça :

<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Musiques</li>

Il faut mettre ça en fait :

Code:

        <li id="o_5" class="mon_onglet" onclick="changeOnglet(this);">Musiques</li>

Pour que l'onglet soit blanc quand il est choisis ? Donc sélectionné ?

C'est ici que ça se passe :

Code:


.mon_onglet:hover{
  background: #ACB5B4;
}         
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000000;
  background: #b8efa1;
  border-top: 1px solid #ACB5B4;
  border-right: 1px solid #ACB5B4;
  border-left: 1px solid #ACB5B4;
  border-bottom: 1px solid #ACB5B4;
  cursor: pointer;
  margin-bottom: -1px;
}             


mon onglet hover, c'est quand on passe la souris dessus, et mon onglet selected, c'est quand on clique dessus.

A vous de choisir, et vous modifiez ce champ :

background: #b8efa1;

par la couleur qui vous sciera.


Je ne sais pas, si vous mettez votre tableau dans un onglet, ça en reviendra au même, il y a trop de caractères dans le champ texte. Ou alors, parce que votre contenu ne semble pas énorme, vous avez du couper votre code du tableau sans le faire exprès...

[Tit-Yosh]

Daccord ^^

L'onglet musique est maintenant plus lier à la première onglet mais elle refuse de se placer a coter de tout les autres.. pourquoi? et ont dirais qu'elle n'a pas de contenus lier avec elle

Donc vous dîtes quand grossant la taille de mes contenus je pourrais mettre mon tableau? si j'ai bien compris

[Lixyr]

Non non. Le contenu maximum que peut soutenir la Page d'Accueil n'est pas réglable. Il y a un maximum de caractères à taper dedans, mais une fois qu'on est arrivé à ce nombre maximum, on ne peut rien rajouter, le surplus sera automatiquement enlevé à chaque enregistrement du contenu.

Alors pour les onglets, faites comme ça :

Code:


<script src="http://www.archive-host.com/files/597546/96de005e35ffd2b9823d2b1d229d90d18341a601/onglets_2.js"></script>

.<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Accueil</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Information</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Tableau</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Staff</li>
<li id="o_5" class="mon_onglet" onclick="changeOnglet(this);">Musique</li>

        <div class="clear"><div id="mes_contenus">

    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
<div id="co_5" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></div></ul></div>

Faites attention quand vous prenez un code, à ne pas supprimer des balises.
Certaines <div> n'étais pas fermées.

(celles-ci : </div></div></ul></div> )

[Tit-Yosh]

Daccord merci beaucoup ^^ la sa en jette

vous avez parler mettre le tableau dans les template dans index body mais si je le met la ou il va apparaitre et ou je dois le mettre?

[Lixyr]

Oui mais c'est vraiment puéril de faire ça. Le contenu vous le placez où vous voulez dans le template, tant qu'elle ne se situe pas au plein milieu d'une balise.

Mais il faut faire attention, c'est de template dont nous parlons.

Vous pouvez mettre votre contenu ici :

<!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

XXXX

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">

en insérant le code de votre Page d'Accueil* dans un tableau. :

Code:

<table class="forumline" width="100%" border="1" cellspacing="0" cellpadding="0" style="background-color: black; text-align: center;"><tr><td class="gensmall">

ICI LE CONTENU

</td></tr></table>

Il se placera en dessous du titre de la Page d'Accueil, mais il faudra vider cette dernière.
Je ne vous le conseillerais pas, mais bon, comme on est là pour aider...

[Tit-Yosh]

Daccord :/ merci pour l'information je vais regarder sa de quoi cela aurais l'air.

Depuis que j'ai poser mes onglets en haut la largeur de l'endroit ou les réglements, présentations, etc à retrécis. J'ai été dans la configuration dans général et mis la stucture des pages a 95% mais cela reste toujours de même :/ comment augmenter la largeur?

[Lixyr]

Depuis que j'ai poser mes onglets en haut la largeur de l'endroit ou les réglements, présentations, etc à retrécis. J'ai été dans la configuration dans général et mis la stucture des pages a 95% mais cela reste toujours de même :/ comment augmenter la largeur?

Là où il y a règlement", "présentation" ? Vous parlez d'où ? La barre de navigation ?

*edit* Je viens d'aller voir sur votre forum. Vous parlez des forums en fait. C'est quoi ? Le contenu et le titre, ou juste le titre, qui a rétrécit ?

[Tit-Yosh]

Enfaite je veux dire le cadre ou contient les forums à rapetisser même si mon cadre est à 95%

Comme cela sa l'air pas si pire mais quand ont va dans réglements générales. C'est fous comment c'est tout entasser et le post est long à cause que la cadre est plus petit

[Lixyr]

Et si dans le css vous mettez une plus grande valeur ::

Code:


#mes_contenus, #mes_onglets{
  width: 100%;
  }

150 par exemple ?

Vous avez modifié quelque chose dans le css ?
Les onglets sont restés dans la PA ou vous les avez finalement insérés dans le template ?

[Tit-Yosh]

Non si je met 150 mon onglets sort complètement du cadre :/
Non j'ai rien mis dans les templates si un connaisseur me dit de pas le faire je vais l'écouter XD

[Lixyr]

C'est fou ça. Ca change rien normalement puisque le contenu prend 100% de ce qu'il peut, soit la totalité de la PA, mais techniquement ça ne doit rien changé puisque qu'on a rajouté qu'un onglet. oO

Essayez d'enlever le code (en l'enregistrant quelque part, ou en ctrl+x), enregistrez la pa vide, actualisez votre page, regardez ce que ça fait, puis remettez le code avec les onglets, enregistrez, et regardez ensuite votre forum, quelle tête il a.

[Tit-Yosh]

Aucun changement... même après avoir retirer les codes il reste aussi petit meme après que je l'ai mis à 100% de la stucture :/

[Lixyr]

Et quand vous enlevez les onglets, le forum se remet bien ?

[Tit-Yosh]

Non plus :/ il reste pareil


Édit: J'ai un gros problème avec mes onglets :/ J'ai mis mon contenus dedans, mais il ne se place pas comme je l'aurais voulu...

Le premier onglet j'aimerais que les liens utiles soit a gauche et l'image pour voter sois a droite, mais ils s'eboitent... Comment je fais pour les séparer? Deplus l'image du staff apparait en dessous, mais quand tu cliques sur un autre onglet et tu reviens il n'y est plus, mais comment faire pour qui n'apparait pas du tout dans l'onglet 1 ?

Mon horloge en haut a droite dépasse sur carré blanc... j'en est pris une plus petite, mais elle fait la même chose...
Pouvez vous m'aider dans mes codes s.v.p je suis perdue

Css:

Code:

 ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000000;
  background: #FEFEFE;
  border: 1px solid#FEFEFE ;
  cursor: pointer;
  margin-bottom: -1px;
} 
.mon_onglet:hover{
  background: #E7EFEE;
}           
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000000;
  background: #FEFEFE;
  border-top: 1px solid #ACB5B4;
  border-right: 1px solid #ACB5B4;
  border-left: 1px solid #ACB5B4; 
  border-bottom: 1px solid #ACB5B4; 
  cursor: pointer; 
  margin-bottom: -1px;
}             
.clear{
  clear: both;
}

.mon_contenu{
  color: #000000;
  background: #FEFEFE;
  border: 2px solid #FEFEFE;
  padding: 2px;
  margin-left: -40px;}


#mes_contenus, #mes_onglets{
  width: 100%;
  }


/* Chatbox-------------------------------------------------------------*/body.chatbox {
   background-image: none;
   padding: 0;
   margin: 0;
   background-color: #ffffff;
   }
#chatbox_header {
   height: 30px;
   }
#chatbox_header.main-head {
   padding: 0 1.3em;
   color: #dedfdf;
   background-color: #000000;
   }
.chatbox-title,.chatbox-title a.chat-title {
   color: #dedfdf;
   text-decoration: none;
   }
.chatbox-title {
   float: left;
   margin: 0;
   padding: 2px 5px 0 5px;
   width: 15em;
   }
.chatbox-options {
   float: right;
   list-style: none;
   font-size: 11px;
   margin: 0.7em 0.5em 0.5em 0.5em;
   }
.chatbox-options li {
   display:inline;
   }
.chatbox-options li,.chatbox-options li a,.chatbox-options li label {
   color: #dedfdf;
   }
#chatbox_members {
   position: absolute;
   top: 30px;
   bottom: 30px;
   width: 180px;
   overflow: auto;
   background-color: #ffffff;
   border-right: 1px  solid #000000;
   }
#chatbox_messenger_form {
   margin: 10px 0 0 0;
   }
#chatbox_members .member-title {
   text-align: center;
   padding: 0.5em 0.25em;
   background-image: none;
   font-size: 12px;
   background-color: #ffffff;
   color : #11470E;
   font-family: Verdana,Arial,Helvetica,sans-serif;
   }
#chatbox_members ul {
   list-style: none;
   margin: 0 0 0 1em;
   }
#chatbox_members ul li {
   margin: 0.5em 0.5em 0.5em 0;
   }
#chatbox {
   position: absolute;
   top: 30px;
   left: 181px;
   right: 0;
   bottom: 30px;
   overflow: auto;
   line-height: 10px;
   }
#chatbox p {
   line-height: 1.2em;
   }
.chatbox_row_1 {
   padding: 4px;
   background-color: #ffffFF;
   }
.chatbox_row_2 {
   padding: 4px;
   background-color: #ffffff;
   }
.chatbox_row_3 {
   padding: 4px;
   background-color: #ffffFF;
   }
#chatbox .user {
   font-weight: bold;
   }
.memberlist_row_1 {
   background-color: #ffffff;
   }
#chatbox_footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   border-top: 1px  solid #000000;
   }
#message,#submit_button{
   border-width: 1px;
   }
.fontbutton {
   padding: 1px;
   cursor: pointer;
   text-align: left;
   }
.fontbutton_normal {
   background: #E1E1E2;
   }
.fontbutton_selected {
   background: #BBC7CE;
   border: 1px solid #000000;
   }
.fontbutton_clicked {
   background: #959595;
   border: 1px solid #000000;
   }
.fontbutton_hover {
   background: #E1E1E2;
   border: 1px solid #000000;
   }
.fontbutton {
   background:#E1E1E2 none repeat scroll 0%;
   border:medium none;
   color:#000000;
   float:left;
   margin-right:10px;
   padding:1px;
   }

/*Internet Explorer fixers and hacks for Chatbox *
/* html #chatbox-members {
   
/* IE expressions helping IE work in Standards mode */
height: expression(( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 3) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) ) + "px");
   }
* html #chatbox {
   
/* IE expressions helping IE work in Standards mode */
height: expression(( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 3) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) ) + "px");
   width: expression(( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 10) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 1) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 1.3) ) + "px");
   }
* html #chatbox-footer {
   
/* IE expressions helping IE work in Standards mode */
width: expression(( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 0) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 0) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) ) + "px");
   }
#chatbox_contextmenu {
   border: 2px solid black;
   background-color: #f3c4ff;
   }
#chatbox_contextmenu p {
   margin:0;
   padding: 1px 4px;
   font-family: verdana, arial, sans-serif;
   background: #ffd6fe;
   border-bottom:1px solid #777;
   }
#chatbox_contextmenu p.hover {
   background: #ecc5ff;
   }
#chatbox_contextmenu p.close {
   padding: 1px;
   font-size: 95%;
   color:#fff;
   background: url('');
   }
#chatbox_contextmenu p.close img {
   vertical-align: middle;
   padding-left: 20px;
   }
#chatbox_contextmenu a {
   color: #b225ff;
    text-decoration: none;
    font-size: 95%;
   }
#chatbox_contextmenu a:hover {
   color: ;
   }

.pun table.table td {
   padding: 0.6em 0 0.7em;
   border-width: 2px;
   border-style: dotted none none dotted;
   line-height: 130%;
   background-color: #DDDDFF;
   border-color: #FFFFFF;
   }
#pun-about {
   border-style: dotted;
   border-width: 2px;
   border-color: #FFFFFF;
   text-align: right;
   line-height: 150%;
   padding: 0.6em 1em;
   background-color: #DDDDFF;
   }
.pun .paged-head, .pun .paged-foot {
   border: 2px dotted #FFFFFF;
   background-color: #;
   background-image : none;
   background-repeat:no-repeat;
                margin: 0px;padding: 0px;
}
#onlinelist {
   border-top: 2px dotted #FFFFFF;
   padding: 0.6em 1em;
   background-color: #DDDDFF;
   }

Page d'acceuil:

Code:

<script src="http://www.archive-host.com/files/597546/96de005e35ffd2b9823d2b1d229d90d18341a601/onglets_2.js"></script>

.<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Accueil</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Information</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Tableau</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Staff</li>
<li id="o_5" class="mon_onglet" onclick="changeOnglet(this);">Musique</li>

        <div class="clear"><div id="mes_contenus">

    <div id="co_1" class="mon_contenu"><div style="margin:auto;text-align:center;width:100%"><img src="http://img707.imageshack.us/img707/3002/69896055banniere7cjpng.png" border="0" alt="" />
<strong>Bienvenue sur NrN</strong>
Tout ce passe dans Naruto shippuden. L'akatsuki cours toujours après les Bijuus, tandis que les Jinchurikis tente de rester en vie pour détruire l'akatsuki. Choisissez votre personnage et rejoingnez le monde de Naruto. C'est à vous maintenant de décider quel tournure le monde des Ninjas ira. Serez vous dans le bien ou le mal...</div>
 
 
<strong><u><span style="font-size: 18px; line-height: normal"> </u>
<strong><u>Liens Utiles</u>                                                                  <u>Voter! Pour le bien du forum</u></strong>
                                                                                    <u>Merci =D</span></u></strong>
<a href="http://naruto-rpg-ninja.forumactif.biz/reglements-f1/" class="postlink">Réglements</a>                                                                    <a href="http://www.root-top.com/topsite/nacimem/in.php?ID=4496" class="postlink" target="_blank"><img src="http://img.root-top.com/topsite/nacimem/banner.gif" border="0" alt="" /></a>
<a href="http://naruto-rpg-ninja.forumactif.biz/les-personnages-f23/personnages-de-naruto-pris-le-niveau-de-rp-requis-pour-t3.htm" class="postlink">Personnages</a>
<a href="http://naruto-rpg-ninja.forumactif.biz/presentations-f4/" class="postlink">Présentations</a>
<a href="http://naruto-rpg-ninja.forumactif.biz/fiche-des-ninjas-f3/" class="postlink">Fiches Ninjas</a></div>


    <div id="co_2" class="mon_contenu" style="display: none;"><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 18px; line-height: normal"><strong>Aucune Informations pour l'instant...

<font color="red">Merci à tous les membres qui s'inscrivent =D et Bienvenue</font>!</strong></span></div></div>


    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none¨>  <a href="http://www.servimg.com/image_preview.php?i=5&u=15856019" class="postlink" target="_blank"><img src="http://i65.servimg.com/u/f65/15/85/60/19/sans_t10.gif" border="0" alt="" /></a>  </div><div id="co_5" class="mon_contenu" style="display: none;"><img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyODk5MTg4ODU*OTYmcHQ9MTI4OTkxODkwMzcwMyZwPTE4MDMxJmQ9Jmc9MSZvPTliODkyMjMzOTI5MTRkOGU5Mjgy/YWYzYjQzM2E*YWNj.gif" /><embed src="http://assets.mixpod.com/swf/mp3/mff-nano.swf?myid=71884339&path=2010/11/16" quality="high" wmode="transparent" flashvars="mycolor=1B1B1E&mycolor2=EBEBF7&mycolor3=C5D1CE&autoplay=false&rand=0&f=4&vol=100&pat=18&grad=false" width="165" height="382" name="myflashfetish" salign="TL" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0" style="visibility:visible;width:165px;height:382px;" /><br><a href="http://www.mixpod.com/playlist/71884339" target="_blank"><img src="http://assets.myflashfetish.com/images/get-tracks.gif" title="Get Music Tracks!" style="border-style:none;" alt="Music"></a><a href="http://www.mixpod.com" target="_blank"><img src="http://assets.mixpod.com/images/make-own.gif" title="Create A Playlist!" style="border-style:none;" alt="Playlist"></a><br /><a href="http://mixpod.com">Music</a> <a href="http://mixpod.com">Playlist</a> at <a href="http://mixpod.com">MixPod.com</a>
</div>
</div></div></ul></div>

[Lixyr]

<strong><u><span style="font-size: 18px; line-height: normal"> </u>
<strong><u>Liens Utiles</u> <u>Voter! Pour le bien du forum</u></strong>
<u>Merci =D</span></u></strong>

Il ne suffit pas de mettre des espaces dans le code avec le clavier pour que les liens se mettent à droite. Il faut mettre ça dans un tableau. D'ailleurs, pour info, les espace en html se font avec ce code :

Code:

 & nbsp;

(il n'y a pas d'espace entre le & et le nbsp; mais je suis obligée d'en mettre un sinon il me fait un espace, et non pas le code textuel.)

Ca vous va comme ça ? ::

Code:


<script src="http://www.archive-host.com/files/597546/96de005e35ffd2b9823d2b1d229d90d18341a601/onglets_2.js"></script>

.<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Accueil</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Information</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Tableau</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Staff</li>
<li id="o_5" class="mon_onglet" onclick="changeOnglet(this);">Musique</li>

        <div class="clear"><div id="mes_contenus">

    <div id="co_1" class="mon_contenu">
<div style="text-align:center; width:100%"><img src="http://img707.imageshack.us/img707/3002/69896055banniere7cjpng.png" border="0" alt="" /><br>
<strong>Bienvenue sur NrN</strong>
Tout ce passe dans Naruto shippuden. L'akatsuki cours toujours après les Bijuus, tandis que les Jinchurikis tente de rester en vie pour détruire l'akatsuki. Choisissez votre personnage et rejoingnez le monde de Naruto. C'est à vous maintenant de décider quel tournure le monde des Ninjas ira. Serez vous dans le bien ou le mal...</div>
<table style="width:100%">
<tr><th style="width:50%">
<span style="font-size: 18px; line-height: normal">
<strong><u>Liens Utiles</u></strong></th>
<th style="width:50%"><strong><u>Voter! Pour le bien du forum. Merci =D</u></strong>
</th>
</tr>
</span><tr><td style="width:50%">
<a href="http://naruto-rpg-ninja.forumactif.biz/reglements-f1/" class="postlink">Réglements</a><br>                                                               
<a href="http://naruto-rpg-ninja.forumactif.biz/les-personnages-f23/personnages-de-naruto-pris-le-niveau-de-rp-requis-pour-t3.htm" class="postlink">Personnages</a><br>
<a href="http://naruto-rpg-ninja.forumactif.biz/presentations-f4/" class="postlink">Présentations</a><br>
<a href="http://naruto-rpg-ninja.forumactif.biz/fiche-des-ninjas-f3/" class="postlink">Fiches Ninjas</a><br>
</td><td style="width:50%">
<a href="http://www.root-top.com/topsite/nacimem/in.php?ID=4496" class="postlink" target="_blank"><img src="http://img.root-top.com/topsite/nacimem/banner.gif" border="0" alt="" /></a>
</td></tr></table>
</div>


    <div id="co_2" class="mon_contenu" style="display: none;"><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 18px; line-height: normal"><strong>Aucune Informations pour l'instant...

<font color="red">Merci à tous les membres qui s'inscrivent =D et Bienvenue</font>!</strong></span></div></div>


    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none¨>  <a href="http://www.servimg.com/image_preview.php?i=5&u=15856019" class="postlink" target="_blank"><img src="http://i65.servimg.com/u/f65/15/85/60/19/sans_t10.gif" border="0" alt="" /></a>  </div><div id="co_5" class="mon_contenu" style="display: none;"><img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyODk5MTg4ODU*OTYmcHQ9MTI4OTkxODkwMzcwMyZwPTE4MDMxJmQ9Jmc9MSZvPTliODkyMjMzOTI5MTRkOGU5Mjgy/YWYzYjQzM2E*YWNj.gif" /><embed src="http://assets.mixpod.com/swf/mp3/mff-nano.swf?myid=71884339&path=2010/11/16" quality="high" wmode="transparent" flashvars="mycolor=1B1B1E&mycolor2=EBEBF7&mycolor3=C5D1CE&autoplay=false&rand=0&f=4&vol=100&pat=18&grad=false" width="165" height="382" name="myflashfetish" salign="TL" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0" style="visibility:visible;width:165px;height:382px;" /><br><a href="http://www.mixpod.com/playlist/71884339" target="_blank"><img src="http://assets.myflashfetish.com/images/get-tracks.gif" title="Get Music Tracks!" style="border-style:none;" alt="Music"></a><a href="http://www.mixpod.com" target="_blank"><img src="http://assets.mixpod.com/images/make-own.gif" title="Create A Playlist!" style="border-style:none;" alt="Playlist"></a>
<a href="http://mixpod.com">Music</a> <a href="http://mixpod.com">Playlist</a> at <a href="http://mixpod.com">MixPod.com</a>
</div>
</div></div></ul></div>

Vous pouvez centrer vos liens ensuite, et également l'image. Bon si vous voulez que je change, vous me le dite, je fais en fonction de ce qu'on me dit.


~~~~

L'horloge ? Vous l'avez mise dans un widget de forum non ?