Marbrume
Version 2 - Image et codage


Partagez|
Version 2 - Image et codage
Messages : 45
Date d'inscription : 08/01/2015
Responsable référencement ۞ Darty, le contrat de confiance
Voir le profil de l'utilisateur
MessageSujet: Version 2 - Image et codage Mar 17 Fév - 13:47
Images:

http://karambola.cgsociety.org/art/lady-mechanika-comicon-challenge-2014-steampunk-2d-1186209
http://www.deviantart.com/art/Kheldrim-Wolfsong-366224137
http://www.deviantart.com/art/Forest-man-266336823
http://engkit.deviantart.com/art/Comic-Fiesta-2013-Mi-423310768
http://einlee.deviantart.com/art/Vanilla-vs-Chocolate-121843293
http://ddal84.deviantart.com/art/City-477724310
http://epar3d.deviantart.com/art/Fairy-301114028
http://zephyrhant.deviantart.com/art/Count-Dracula-s-First-Victim-410238775
http://llamllam.deviantart.com/art/City-485846653
http://zeebow14.deviantart.com/art/Avengers-244398973
http://vagrantdick.deviantart.com/art/steampunk-284993975
http://milyknight.deviantart.com/art/Trey-469577540
http://exitmothership.deviantart.com/art/TLOM-School-Yard-BG-373486418
http://artfall.deviantart.com/art/Guild-Wars-2-Art-4-325859720 - Guild Wars 2 Arena Net


Codage:

http://www.never-utopia.com/t48915-qeel-en-trois-lignes
http://forum.forumactif.com/t333360-codage-du-staff-sur-ma-pa


Image partenariat:


http://www.zupimages.net/up/15/08/jb1k.jpg


http://www.zupimages.net/up/15/08/15wv.jpg


http://www.zupimages.net/up/15/08/51fe.jpg


http://www.zupimages.net/up/15/08/gxv6.jpg


Images des catégories :


http://www.zupimages.net/up/15/08/k0ds.jpg


http://www.zupimages.net/up/15/08/1ui6.jpg


http://www.zupimages.net/up/15/08/1kn8.jpg


http://www.zupimages.net/up/15/08/vp3p.jpg


http://www.zupimages.net/up/15/08/16ff.jpg


http://www.zupimages.net/up/15/08/s74q.jpg


http://www.zupimages.net/up/15/08/5go6.jpg


http://www.zupimages.net/up/15/08/jacr.jpg


Codage final :

template index_body:
Code:
{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table id="msg_et" 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 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>&nbsp;</td>
                  <td><input class="post" type="text" size="10" name="username"/>&nbsp;</td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span>&nbsp;</td>
                  <td><input class="post" type="password" size="10" name="password"/>&nbsp;</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>&nbsp;</td>
                           <td><input class="post" type="text" size="10" name="username"/>&nbsp;</td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span>&nbsp;</td>
                           <td><input class="post" type="password" size="10" name="password"/>&nbsp;</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="window.location='/facebook_connect.forum'" v="2" scope="{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 -->
<br /><br />
{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></span>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
         <!-- END switch_delete_cookies -->
      </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" rel="nofollow">{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>&nbsp;</td>
                  <td><input class="post" type="text" size="10" name="username"/>&nbsp;</td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span>&nbsp;</td>
                  <td><input class="post" type="password" size="10" name="password"/>&nbsp;</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>&nbsp;</td>
                           <td><input class="post" type="text" size="10" name="username"/>&nbsp;</td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span>&nbsp;</td>
                           <td><input class="post" type="password" size="10" name="password"/>&nbsp;</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="window.location='/facebook_connect.forum'" v="2" scope="{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 -->
<center>

<!-- BEGIN switch_viewonline_link -->
 <!-- END switch_viewonline_link -->

 <!-- BEGIN switch_viewonline_nolink -->
 <!-- END switch_viewonline_nolink -->
<div id="qeel">
  <div id="groupes_qeel">
    
    <span style="font-family: breamcatcher; font-size: 35px; color: white;"><img src="http://www.zupimages.net/up/15/08/igt6.png" style="opacity: 0.7;"/> Qui Murmure ici ? <img src="http://www.zupimages.net/up/15/08/w60n.png" style="opacity: 0.7;"/></span><br /><br />
    
    <div class="infobulle_groupe_qeel"><a href="#" title="Administrateurs"><img src="http://www.zupimages.net/up/15/08/slcp.png" /></a>
      <div><h2 class="nom_groupe_qeel"><font color="#252433">Administrateurs</font></h2><section class="txt_groupe_qeel">Ce sont ceux qui font fonctionner le forum. Ils sont là pour en assurer la bonne marche.</section>
      </div>
    </div>
    <div class="infobulle_groupe_qeel"><a href="#" title="Modérateurs"><img src="http://www.zupimages.net/up/15/08/adtz.png" /></a>
      <div><h2 class="nom_groupe_qeel"><font color="#2f82a8">Modérateurs</font></h2><section class="txt_groupe_qeel">Les petites mains des Administrateurs, ils gardent le rêve intacte.</section>
      </div>
    </div>
    <div class="infobulle_groupe_qeel"><a href="#" title="Chargée de Communication"><img src="http://www.zupimages.net/up/15/08/aj33.png" /></a>
      <div><h2 class="nom_groupe_qeel"><font color="#7d60cc">Chargée de Communication</font></h2><section class="txt_groupe_qeel">Elle est chargée de diffuser nos propositions de services auprès des forums RPG et autres sites susceptibles de devenir nos référencés ou partenaires.</section>
      </div>
    </div>
    <div class="infobulle_groupe_qeel"><a href="#" title="Stylistes-Graphistes"><img src="http://www.zupimages.net/up/15/08/2zzb.png" /></a>
      <div><h2 class="nom_groupe_qeel"><font color="#fbd487">Stylistes-Graphistes</font></h2><section class="txt_groupe_qeel">Les stylistes vous offrent une aide en graphisme ou en codage pour habiller ou affiner le rendu visuel de votre jeu. Ils proposent des pistes de travail possibles et répond à vos questions ponctuelles concernant ces domaines.</section>
      </div>
    </div>
    <div class="infobulle_groupe_qeel"><a href="#" title="Lecteurs-Scnaristes"><img src="http://www.zupimages.net/up/15/08/8g88.png" /></a>
      <div><h2 class="nom_groupe_qeel"><font color="#325d7a">Lecteurs-Scénaristes</font></h2><section class="txt_groupe_qeel">Le lecteur vous propose une analyse contextuelle pour perfectionner votre contexte en gommant toute incohérence. Il vous aide à anticiper les éventuelles questions de vos joueurs au sujet du contexte de votre jeu. Il apporte son soutien orthographique et grammaticale.</section>
      </div>
    </div>
    <div class="infobulle_groupe_qeel"><a href="#" title="Créateurs de Rêves"><img src="http://www.zupimages.net/up/15/08/k62g.png" /></a>
      <div><h2 class="nom_groupe_qeel"><font color="#1b4200">Créateurs de Rêves</font></h2><section class="txt_groupe_qeel">Ce sont ceux qui ont rêver et donner forme à leur rêve pour vous permettre d'y jouer et les faires vivres.</section>
      </div>
    </div>
    <div class="infobulle_groupe_qeel"><a href="#" title="Chercheurs de Rêves"><img src="http://www.zupimages.net/up/15/08/8z47.png" /></a>
      <div><h2 class="nom_groupe_qeel"><font color="#c45206">Chercheurs de Rêves</font></h2><section class="txt_groupe_qeel">Ceux qui cherchent un rêve dans lequel s'intaller.</section>
      </div>
    </div>
  </div>
  <div id="contenteur_infos_qeel"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" />
    <div id="utilisateur_online_qeel"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
 {RECORD_USERS}<br />
 <br />
 {LOGGED_IN_USER_LIST}</span></div>
    <div id="infos_qeel"><span class="gensmall">{TOTAL_POSTS}<br />
 {TOTAL_USERS}<br />
 {NEWEST_USER}</span></div>
  </div>
  
  {CHATBOX_BOTTOM}
  
  <table id="connectes_qeel">{L_CONNECTED_MEMBERS}</table>
<div style="width: 100%; text-align: center; font-size: 7px;">©NyoTheNeko pour Never-Utopia</div>
</div>
 <!-- BEGIN switch_chatbox_activate -->
 <!-- BEGIN switch_chatbox_popup -->
 <!-- END switch_chatbox_popup -->
 <!-- END switch_chatbox_activate -->

</center>
<!-- END disable_viewonline -->

<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
   <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td>&nbsp;&nbsp;</td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><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,
   oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->


template index_box:
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>


<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="fond_forum" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
   <tr>
     <td colspan="3" nowrap="nowrap" width="100%" class="titre_forum">{catrow.tablehead.L_FORUM}</td>
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
  
  
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      
     <td class="row1 over" width="5"><div class="liens"><span id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
    <script type="text/javascript">
      jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');
    </script></div>
            </td>
     
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="middle" width="100%" height="50">
         <div class="centre_forum">
        
        <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
        
        <span class="genmed"><div class="description">{catrow.forumrow.FORUM_DESC}</div></span>
</div>
      </td>
     
     <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle"><div class="image_new">
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
      </td>
     
      <td class="row3 over" align="center" valign="middle" height="50"><div class="posteur">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
        <div> <span class="gensmall">{catrow.forumrow.TOPICS} rêves | {catrow.forumrow.POSTS} divagations</span></div>
        <br /><br /><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td>
</tr>
  <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Revenir en haut Aller en bas
Messages : 45
Date d'inscription : 08/01/2015
Responsable référencement ۞ Darty, le contrat de confiance
Voir le profil de l'utilisateur
MessageSujet: Re: Version 2 - Image et codage Mar 17 Fév - 14:57
template overall_header:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
 
  <link href='http://fonts.googleapis.com/css?family=Pathway+Gothic+One' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Six+Caps' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
 
   <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" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <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="{JQUERY_PATH}" type="text/javascript"></script>
   <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" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- 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 elements */
            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 conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements 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');
         if(pm != null) { 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}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(document).ready(function() {            
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {switch_ticker.STOP_TIME}
            });
         });
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- 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>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<div class="navig" align="{MENU_POSITION}">{GENERATED_NAV_BAR}</div>
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.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>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->

                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <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>


            <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 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 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 -->

template viewtopic_body:
Code:

                     <!-- BEGIN switch_signature -->
                     <div class="signature_div">
                        {postrow.displayed.SIGNATURE}
                     </div>
                     <!-- END switch_signature -->

                  </div>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
         <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
      </td>
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <!-- BEGIN first_post_br -->
</table>
<hr />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
   </tr>
   <!-- END first_post_br -->
   <!-- END displayed -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <tr align="center">
      <td class="row1" colspan="3" height="28">
         <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
   </tr>
   <!-- END no_post -->
   <tr align="right">
      <td class="catBottom" colspan="3" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td width="9%" class="noprint"> </td>
               <td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
               <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
            </tr>
         </table>
      </td>
   </tr>
</table>
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
   <tr>
      <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
      <!-- BEGIN topicpagination -->
      <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
      <!-- END topicpagination -->
   </tr>
   <!-- BEGIN switch_user_logged_in -->
   <!-- BEGIN watchtopic -->
   <tr>
      <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
   </tr>
   <!-- END watchtopic -->
   <!-- END switch_user_logged_in -->
</table>

<!-- BEGIN promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
   <tr>
      <td class="catBottom" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
               <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
            </tr>
         </table>
      </td>
   </tr>
</table>

<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
   <tr>
      <td class="catBottom" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
               <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td class="row2 postbody" valign="top">
         <!-- BEGIN link -->
         » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
         <!-- END link -->
      </td>
   </tr>
</table>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
   <tbody>
      <tr>
         <td class="catBottom">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tbody>
                  <tr>
                     <td valign="top">
                        <h1 class="cattitle"> {L_FORUM_RULES}</h1>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
      <tr>
         <td class="row1 clearfix">
            <table>
               <tr>
                  <!-- BEGIN switch_forum_rule_image -->
                  <td class="logo">
                     <img src="{RULE_IMG_URL}" alt="" />
                  </td>
                  <!-- END switch_forum_rule_image -->
                  <td class="rules postbody">
                     {RULE_MSG}
                  </td>
               </tr>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<!-- END switch_forum_rules -->

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td class="row2" colspan="2" align="center" style="padding:0px">
         <!-- BEGIN switch_user_logged_in -->
         <a name="quickreply"></a>
         {QUICK_REPLY_FORM}<br />
         <!-- END switch_user_logged_in -->
      </td>
   </tr>
   <tr>
      <td style="margin:0; padding: 0;" colspan="2">
         <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
            <tbody>
      <!-- BEGIN show_permissions -->
      <tr>
         <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
         <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>
      <!-- END show_permissions -->
      <tr>
         <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <!-- BEGIN show_permissions -->
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
                  <!-- END show_permissions -->
               </tr>
            </table>
         </td>
      </tr>
   </tbody>
         </table>
      </td>
   </tr>
   <tr>
      <td style="margin:0; padding: 0;" colspan="2">
         <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
            <tbody>
      <tr>
         <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
               </tr>
            </table>
         </td>
      </tr>
   </tbody>
         </table>
      </td>
   </tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
         <span class="nav">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
         </span>
      </td>

      <!-- BEGIN viewtopic_bottom -->
      <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
      <!-- END viewtopic_bottom -->

      <!-- BEGIN moderation_panel -->
      <td align="center">
         <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <td align="center" width="250">
         <span class="gensmall"> </span>
      </td>
      <!-- END moderation_panel -->
   </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
         <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />

            <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

            <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span>
         </form>
      </td>
   </tr>
</table>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>
Revenir en haut Aller en bas
Messages : 45
Date d'inscription : 08/01/2015
Responsable référencement ۞ Darty, le contrat de confiance
Voir le profil de l'utilisateur
MessageSujet: Re: Version 2 - Image et codage Mar 17 Fév - 14:59
La Page d'accueil:
Code:
<div class="fond_PA">
                                              
   <div align="center">
                                                                   
      <div class="systeme_onglets">
                                                                        
         <!--                          CONTENU DU TABLEAU                          -->                                     
         <div class="contenu_onglets">
                                                                     
            <!--                          Contenu  1ière page                          -->                                       
            <div id="contenu_onglet_one" class="contenu_onglet">
                                                            
               <table align="center">
                                                                                                                                                           
                  <tbody>
                                                                                                                                                              
                     <tr align="center">
                                                                                                                                                                 
                        <td>
                                                                                                 <img style="opacity: 0.7;" src="http://www.zupimages.net/up/15/08/igt6.png" /> <span style="color: white; font-family: breamcatcher; font-size: 30px; text-shadow: 0px 0px 1px #02181b;"> Les Mondes de vos rêves </span><img style="opacity: 0.7;" src="http://www.zupimages.net/up/15/08/w60n.png" />                                                                 
                           <div class="reference">
                                                                                      <br /><br /> <a href="http://scp-rpg.forumactif.org/"><img src="http://i58.servimg.com/u/f58/16/91/02/27/logo10.png" /></a> <a href="http://www.talesofthedarkness.com/h4-accueil"><img src="http://img15.hostingpics.net/pics/429366logo100x35copie.jpg" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://fireflyserenity.forumactif.org/"><img border="0" alt="" src="http://img11.hostingpics.net/pics/404145992371001377185523.gif" /></a> <a target="_blank" href="http://autresvies.forumgratuit.org/"><img border="0" alt="Autres Vies" src="http://i35.servimg.com/u/f35/16/75/38/38/bouton10.jpg" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://entre-vie-et-mort-rp.forumtwilight.com/"><img border="0" alt="" src="http://img4.hostingpics.net/pics/309082boutonpartenariat.png" /></a> <a rel="nofollow" target="_blank" href="http://theden.forumactif.org"><img border="0" alt="" src="http://i55.servimg.com/u/f55/17/89/34/32/logo8810.gif" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://ecole-du-ruisseau.forumactif.com/"><img border="0" alt="" src="http://i763.photobucket.com/albums/xx272/khangelik/logo88x31_zps090431fa.png" /></a> <a rel="nofollow" target="_blank" href="http://www.poudnoir.com"><img border="0" alt="" src="http://image.noelshack.com/fichiers/2013/43/1382808931-partenaire1.png" /></a> <a rel="nofollow" target="_blank" href="http://asaria-evolution.forumactif.org/"><img border="0" alt="" src="http://i56.servimg.com/u/f56/09/03/25/81/bouton10.png" /></a> <a rel="nofollow" target="_blank" href="http://vegas.jeuforum.fr/"><img border="0" alt="" src="http://vegas.jeuforum.fr/forum/images/topsite/vegas_t1.png" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://spacenoodles.forums-actifs.com/"><img border="0" alt="" src="
    http://img15.hostingpics.net/pics/220013Bouton10035.png" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://origin-s.creer-forum.com/"><img border="0" title="Origins" alt="Origins" src="http://i39.servimg.com/u/f39/17/95/44/51/ico310.jpg" /></a><a rel="nofollow" target="_blank" class="postlink" href="http://kelkekro.forumactif.fr/forum"><img border="0" alt="" src="http://img15.hostingpics.net/pics/975017logopourtopsite2.png" /> </a><a rel="nofollow" target="_blank" class="postlink" href="http://voyage-a-cythere.forumactif.org/"><img border="0" alt="" src="http://i74.servimg.com/u/f74/19/04/32/46/testtt10.jpg" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://confidence.forumactif.org/"><img border="0" alt="" src="http://www.zupimages.net/up/15/04/f2d0.jpg" /></a><br /> <a rel="nofollow" target="_blank" class="postlink" href="http://jeuderevesannuairerp.forumactif.org/f19-demandes-de-referencement"><img border="0" alt="" src="http://i57.servimg.com/u/f57/16/75/38/38/logo_r10.jpg" /></a>                                                                                   
                           </div>
                                                                                                                                                                    
                        </td>
                                                                                                                                                                 
                        <td>
                                                                                                   <span style="color:#589482; font-family: breamcatcher; font-size: 18px;">Nos partenaires</span>                                                                 
                           <div class="part_PA">
                                                                                    <br /><br /><img src="http://i39.servimg.com/u/f39/16/75/38/38/infini10.png" alt="" border="0" />                                                                                     
                           </div>
                                                                                                                                                                    
                        </td>
                                                                                                                                                                 
                     </tr>
                                                                                                                                                              
                  </tbody>
                                                                                                                                                           
               </table>
                                                          
            </div>
                                                                     
            <!--                          Contenu  2ième page                          -->                                         
            <div id="contenu_onglet_two" class="contenu_onglet">
                                                          
               <div class="taille_onglet">
                                                                                                                           
                  <table align="center">
                                                                                                            
                     <tbody>
                                                                                                               
                        <tr align="center">
                                                                                                                  
                           <td>
                                                                          <img style="opacity: 0.7;" src="http://www.zupimages.net/up/15/08/igt6.png" /> <span style="color: white; font-family: breamcatcher; font-size: 30px; text-shadow: 0px 0px 1px #02181b;"> Navigation Rapide </span><img style="opacity: 0.7;" src="http://www.zupimages.net/up/15/08/w60n.png" />                                           
                              <div class="navig_rapide">
                                                                           <br /><br />                                             
                                 <table align="center">
                                                                                                                           
                                    <tbody>
                                                                                                                              
                                       <tr>
                                                                                                                                 
                                          <td>
                                                                                         <a href="http://jeuderevesannuairerp.forumactif.org/t27-quelques-regles-a-respecter">Pour rêver en toute sérénité</a> <br /><br /> <a href="http://jeuderevesannuairerp.forumactif.org/t14-pourquoi-vous-inscrire-sur-jeu-de-reves">  <strong>Pourquoi vous inscrire sur Jeu de Rêves ? </strong></a> <br /><br /> <a href="http://jeuderevesannuairerp.forumactif.org/t15-comment-devenir-un-createur-de-reve-referencez-votre-jeu">Référencer votre forum ! </a>                                           
                                          </td>
                                                                                                                                 
                                          <td>
                                                                                           <a href="http://jeuderevesannuairerp.forumactif.org/t17-comment-trouver-son-jeu-de-reve">Trouvez le forum RPG de vos rêves !</a> <br /><br /> <a href="http://jeuderevesannuairerp.forumactif.org/f28-partenariat">Vous lier à Jeu de Rêves</a> <br /><br /> <a href="http://jeuderevesannuairerp.forumactif.org/f15-soutien-logistique-de-la-machine-a-reves">Besoin d'aide en graphisme, codage, correction, pub ?</a>                                           
                                          </td>
                                                                                                                                 
                                       </tr>
                                                                                                                              
                                    </tbody>
                                                                                                                           
                                 </table>
                                                                                                                          
                              </div>
                                                                                                                     
                           </td>
                                                                                                                  
                        </tr>
                                                                                                               
                        <tr align="center">
                                                                                                                  
                           <td>
                                                                          <span style="color: #589482; font-family: breamcatcher; font-size: 18px;">Top-Site</span>                                           
                              <div class="top_site">
                                                                           <br /><br />                                               
                                 <center>
                                                                                <a href="http://en.root-top.com/toplist/velusia/in.php?ID=5631" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/velusia/banner.gif" alt="" border="0" /></a><a href="http://www.root-top.com/topsite/filetdudiable/in.php?ID=748" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/filetdudiable/banner.gif" alt="" border="0" /></a><a href="http://en.root-top.com/toplist/cherry23/in.php?ID=7129" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/cherry23/banner.gif" alt="" border="0" /></a><a href="http://www.root-top.com/topsite/abysses/in.php?ID=6290" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/abysses/banner.gif" alt="" border="0" /></a><a href="http://www.root-top.com/topsite/forumrpg/in.php?ID=8692" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/forumrpg/banner.gif" alt="" border="0" /></a><a href="http://www.root-top.com/topsite/heroicfantasy/in.php?ID=1614" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/heroicfantasy/banner.gif" alt="" border="0" /></a><a href="http://www.root-top.com/topsite/vampie/in.php?ID=1064" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/vampie/banner.gif" alt="" border="0" /></a><a href="http://www.root-top.com/topsite/coffeepub/in.php?ID=220" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/coffeepub/banner.gif" alt="" border="0" /></a><a href="http://www.root-top.com/topsite/mandarine/in.php?ID=1" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/mandarine/banner.gif" alt="" border="0" /></a><a href="http://www.root-top.com/topsite/virtu4lgames/in.php?ID=4219" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/virtu4lgames/banner.gif" alt="" border="0" /></a><a href="http://en.root-top.com/toplist/harry_potter_the_world/in.php?ID=8995" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/harry_potter_the_world/banner.gif" alt="" border="0" /></a><a href="http://en.root-top.com/toplist/lilie/in.php?ID=7618" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/lilie/banner.gif" alt="" border="0" /></a> <a href="http://www.root-top.com/topsite/vulnerasamento/in.php?ID=402" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/vulnerasamento/banner.gif" alt="" border="0" /></a><a href="http://en.root-top.com/toplist/titop/in.php?ID=2200" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/titop/banner.gif" alt="" border="0" /></a><a href="http://www.root-top.com/topsite/obsession27/in.php?ID=21772" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/obsession27/banner.gif" alt="" border="0" /></a><a href="http://www.root-top.com/topsite/korben/in.php?ID=13556" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/korben/banner.gif" alt="" border="0" /></a><a href="http://www.root-top.com/topsite/imaginarium3006/in.php?ID=1252" class="postlink" target="_blank" rel="nofollow"><img src="http://i39.servimg.com/u/f39/16/75/38/38/logo_i10.jpg" alt="" border="0" /></a>                                           
                                 </center>
                                                                                                                        
                              </div>
                                                                                                                     
                           </td>
                                                                                                                  
                        </tr>
                                                                                                               
                     </tbody>
                                                                                                            
                  </table>
                                                                                                                         
               </div>
                                                                                                                                                    
            </div>
                                                                     
            <!--                          Contenu  3ième page                        -->                                         
            <div id="contenu_onglet_tree" class="contenu_onglet">
                                                          
               <center>
                                                                                  <img style="opacity: 0.7;" src="http://www.zupimages.net/up/15/08/igt6.png" /> <span style="color: white; font-family: breamcatcher; font-size: 30px; text-shadow: 0px 0px 1px #02181b;"> Le Staff de rêve </span><img style="opacity: 0.7;" src="http://www.zupimages.net/up/15/08/w60n.png" />                                                 
                  <div class="onglet_staff">
                                 <iframe src="http://i-love-testing.conceptforum.net/h1-onglet-staff" frameborder="0" style="width: 955px; height: 285px;"></iframe>                                 
                  </div>
                                                       
               </center>
                                                          
            </div>
                                                                   
         </div>
                                                      
      </div>
                                                       
      <!--                        - onglets --                        -->                                     
      <div class="onglets">
                                                                  
         <!--                          onglet 1                          -->                        <span onmouseover="javascript:change_onglet('one');" id="onglet_one" class="onglet_0 onglet">        <img src="http://www.zupimages.net/up/15/08/c2jd.png" /></span>                               
         <!--                          onglet 2                          -->                        <span onmouseover="javascript:change_onglet('two');" id="onglet_two" class="onglet_0 onglet">        <img src="http://www.zupimages.net/up/15/08/ohpc.png" /></span>                               
         <!--                          onglet 3                          -->                        <span onmouseover="javascript:change_onglet('tree');" id="onglet_tree" class="onglet_0 onglet">        <img src="http://www.zupimages.net/up/15/08/obip.png" /></span>                               
      </div>
                                                 
   </div>
                           <script type="text/javascript">
                //<!--
                        var anc_onglet = 'one';
                        change_onglet(anc_onglet);
                //-->
</script>
</div>



Le CSS:
Code:
/* ------- DEBUT MISE EN FORME QEEL (index-box)------- */
/* Ceci est le contour du QEEL.  */
#qeel {
  width: 1000px;
  border-radius: 10px;
  background-color: rgba(93, 83, 73, 0.6);
  /* Modifiez les valeurs de padding pour retirer la hauteur supplémentaire. Pensez également à changer le border-radius pour ne pas couper les rectangles dans le QEEL */
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: 1px 2px 3px black;
}

/* Rectangle du haut contenant les images du QEEL */
#groupes_qeel {
  border-radius: 5px;
  width: 950px;
  height: 150px;
  padding-top: 15px;
  /* Permet de faire voir les infobulles si elles dépassent du carré  */
  overflow: visible;
  margin: auto;
  margin-bottom: 15px;
  /* La dernière variable détermine l'opacité du fond. Ici: un blanc avec opacité 0.6 */
  background-color: rgba(10, 45, 50, 0.5);
}

/* Div contenant à la fois l'image et l'infobulle. */
.infobulle_groupe_qeel {
  position: relative;
  /* Permet de mettre les images à la suite. */
  display: inline-block;
  margin: auto;
  /* À changer selon la taille de l'image */
  width: 100px;
  height: 75px;
  overflow: visible;
  /* Permet de mettre une marge entre les images */
  margin-left: 10px;
}
 
/* Mise en forme de l'infobulle */
.infobulle_groupe_qeel div {
  position: absolute;
  /* À modifier pour changer la position, par rapport à l'image de groupe, de la bulle. */
  top: 80px;
  left: 80px;
  /* Taille de l'infobulle */
  width: 220px;
  height: 150px;
  /* Couleur de l'infobulle */
  background-color: rgba(147, 132, 117, 0.9);
  /* Couleur du texte dans l'infobulle */
  color: #F1E4CB;
  border-right: 2px solid #272528;
  border-left: 2px solid #272528;
  border-radius: 5px;
  opacity:0;
  /* Ajoutez ici des transform si vous voulez + d'effets */
  transition: all 0.5s ease-in-out 0s;
  z-index: 999;
  visibility: hidden;
}
 
.infobulle_groupe_qeel:hover div, .infobulle_groupe_qeel:focus div {
  /* Ajoutez ici des transform si vous voulez plus d'effets. */
  opacity:1;
  transition: all 0.5s ease-in-out 0s;
  visibility: visible;
}

/* Nom du groupes dans l'infobulle. À modifier comme n'importe quel titre. */
.nom_groupe_qeel {
  font-family: 'breamcatcher';
  font-size: 18pt;
  width: 100%;
  text-align: center;
  background-color: rgba(93, 83, 73, 1);
  text-shadow: 1px, 2px, 3px black;
}

 /* Texte dans le QEEL. Hauteur à modifier si la hauteur de l'infobulle est modifiée. */
.txt_groupe_qeel {
  width: 90%;
  height: 75px;
  font-size: 9pt;
  text-align: justify;
  margin: auto;
  overflow: auto;
}

 /* Contient les trois cases de la deuxième ligne */
#contenteur_infos_qeel {
  width: 950px;
  margin: auto;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 5px;
}

 /* Image qui est en ligne */
#i_whosonline {
  float: left;
}

 /* Contient les utilisateurs actuellement en ligne */
#utilisateur_online_qeel {
  float: right;
  width: 190px;
  margin-left: 10px;
  height: 250px;
  padding: 5px;
  text-align: justify;
  overflow: auto;
  background-color: rgba(10, 45, 50, 0.5);
  border-radius: 5px;
}

/* Contient les infos générales du forum. */
#infos_qeel {
  float: right;
  width: 190px;
  margin-left: 10px;
  height: 250px;
  padding: 5px;
  text-align: justify;
  overflow: auto;
  background-color: rgba(10, 45, 50, 0.5);
  border-radius: 5px;
}

/* Tableau des derniers connectés les dernières 48h/24h/etc */
#connectes_qeel {
  width: 950px;
  height: 150px;
  margin: auto;
  overflow: auto;
  background-color: rgba(10, 45, 50, 0.5);
  border-radius: 5px;
}

 /* Permet de retirer le fond de la table des derniers connectés & le réaligner. */
#connectes_qeel td {
  vertical-align: top;
  background: none;
}

/* -------- FIN MISE EN FORME QEEL (index-box)--------- */







/*-----------PA à onglet-------------------*/

table#msg_et, table#msg_et td{
   background-color:none !important;
   }

.fond_PA{
  background-color: rgba(93, 83, 73, 0.6);
  border-radius: 10px;
  box-shadow: 1px 2px 3px black;
}
  
.onglet{
    width: 300px;
    height: 51px;
    cursor:pointer;
    display:inline-block;
}
 
/* contenu du menu */
 
.contenu_onglet{
    background-color: none;
    border: none;
    margin: 3px;
    padding:5px;
    display:none;
    text-align: justify;
    height: auto;          /* largeur du tableau */    
    width: 1000px;          /* hauteur du tableau */
}

/* contenu onglet 1 */

.reference{
width: 850px;
height: 290px;
overflow: auto;
border-radius: 5px;
border-right: 3px solid #272528;
border-left: 3px solid #272528;
border-bottom: 3px solid #272528;
}

.part_PA{
width: 100px;
height: 290px;
overflow: auto;
border-radius: 5px;
border-right: 3px solid #272528;
border-left: 3px solid #272528;
  border-bottom: 3px solid #272528;
  margin-top: 15px;
}

/* taille onglet 2 et 3 */

.taille_onglet{
  width: 1000px;
height: 335px;
}


/* contenu onglet 2 */
.navig_rapide{
width:960px;
height: 160px;
border-radius: 5px;
border-right: 3px solid #272528;
border-left: 3px solid #272528;
border-bottom: 3px solid #272528;
text-align: center;
 font-size: 15px;
}

.top_site{
width:960px;
height: 100px;
border-radius: 5px;
border-right: 3px solid #272528;
border-left: 3px solid #272528;
border-bottom: 3px solid #272528;
}


/* contenu onglet 3 */

.onglet_staff{
  width:960px;
height: 295px;
border-radius: 5px;
border-right: 3px solid #272528;
  border-left: 3px solid #272528;
  border-bottom: 3px solid #272528;
}


/* Ajout police */
.body
@font-face {
font-family: breamcatcher;
  src: url('http://www.aht.li/2565528/breamcatcher.ttf');
}

/* Mise en page message*/

presentation_message{
  text-align:justify;
  font-size: 11px;
}





/*----------- catégories -----------*/

.fond_forum{
  width: 100%;
  border-bottom: 5px solid #272528;
  border-left: 3px solid #272528;
  border-right: 3px solid #272528;
  box-shadow: 1px 2px 3px black;
  border-radius: 10px;
  background-color: rgba(93, 83, 73, 0.6);
  background-image: url('http://www.zupimages.net/up/15/08/2l7z.png');
  background-repeat: no repeat;
}

.titre_forum{
  height: 30px;
}

.titre_forum h2{
  font-family: breamcatcher;
  text-shadow: 0px 0px 1px #02181b;
  font-size: 22px;
  letter-spacing: 2px;
  color: white;
  margin-left: 60px;
  
}

.liens{
  height: 150px;
  width: 100px;
  background-color: rgba(10, 45, 50, 0.6);
  margin: 7px;
  padding-left: 7px;
  border-radius: 5px;
  overflow: auto;
}

.centre_forum{
  background-color: rgba(10, 45, 50, 0.6);
   height: 150px;
  border-radius: 5px;
}


a.forumlink:link, a.forumlink:visited {
  font-family: 'Julius Sans One', cursive;
  font-size: 18px;
  padding-left: 10px;
  text-align: center;
  padding-left: 30px;
  color: #A9FFF4;
}

span.forumlink {
display: block;
margin: auto;
  height: 22px;
border-bottom: 2px solid #272528;
background-image: url('http://www.zupimages.net/up/15/08/n4mb.jpg');
text-decoration: none;
  border-radius: 5px 5px 0 0;
  valign: middle;
}


.description{
  texte-align: justify;
  width: 95%;
  margin: 5px;
}


.image_new{
  height: 150px;
  width: 70px;
}

.posteur{

  width: 150px;
  height: 150px;
  background-color: rgba(10, 45, 50, 0.6);
  margin: 3px;
  border-radius: 5px;
}


/*Fond interne du forum*/

.bodyline {
   background-color: transparent;
     background-image: url('http://www.zupimages.net/up/15/02/szo2.png');
     background-repeat: repeat;
     border: solid 0px black;
}

/* FOND */
body {
   background-size:cover;
}


/* CODES CSS CATEGORIES AUX DESCRIPTIONS CACHEES */

.cate {
   width: 550px;
   height: 100px;
   overflow: hidden;
   border-right: 3px solid #272528;
     border-left: 3px solid #272528;
   background-color: white;
   border-radius: 5px;
}
.cate_img {
   position: relative;
   z-index: 2;
   width: 550px;
   height: 100px;
   margin-left: 0px;
        transform: all;
   -moz-transform: all;
   -o-transform: all;
   -htm-transform: all;
   -webkit-transform: all;
   transition: 1s;
   -moz-transition: 1s;
   -o-transition: 1s;
   -htm-transition: 1s;
   -webkit-transition: 1s;
}

.cate:hover .cate_img {
   margin-left: 550px;
   transform: all;
   -moz-transform: all;
   -o-transform: all;
   -htm-transform: all;
   -webkit-transform: all;
   transition: 1s;
   -moz-transition: 1s;
   -o-transition: 1s;
   -htm-transition: 1s;
   -webkit-transition: 1s;
}

.cate_description {
   position: relative;
   z-index: 1;
   width: 540px;
   height: 100px;
   margin-top: -100px;
   text-align: justify;
   font-size: 11px;
   color: #261704;
   padding: 5px;
   overflow: auto;
}






/*Chatbox*/

body.chatbox {
   min-width: 50px !important;
   padding: 0;
   margin: 0;
   background-color: #938475; /*couleur de fond*/
}
/*Taille police Chat box*/
.chatbox_row_1, .chatbox_row_2, .chatbox_row_3 {
font-size:13px;}






/*Enlever oulignement liens*/
a:hover{
text-decoration: none !important;
}
 
a {
text-decoration: none !important;
}
 
a:link {
text-decoration: none;
}
 
a:visited {
text-decoration: none;
}


La page HTML:
Code:
<style>

/*Enlever soulilgnement liens*/
a:hover{
text-decoration: none !important;
}
 
a {
text-decoration: none !important;
}
 
a:link {
text-decoration: none;
}
 
a:visited {
text-decoration: none;
}


.paonglet
       {
 font-family: 'Verdana';
 cursor:pointer;
 color: #ffffff;
 font-size: 20px;
 text-align: center;
 padding-top: 10px;
 padding-bottom: 10px;
  height: 20px;
  width: 100px;
  text-shadow: 1px 1px 2px black;
  padding-left: 50px;
  
 
       }
       .paonglet_0
       {
 width: 100px;
       }
       .paonglet_1
       {
 color: orange;
 width: 100px;

       }

       .contenu_paonglet
       {
      margin: 3px;
 padding: 5px;
 display:none;
 width:900px;
height: 210px;
 text-align: justify;
  color: #F1E4CB;
  overflow: auto;
  margin-top: none;
  font-family:'verdana';
  font-size: 11px;
  background-color: rgba(10, 45, 50, 0.6);
  border-radius: 5px;
       }
     
/****** Mise en page des colonnes ******/

table tr{
   vertical-align:top;
   }


#tab1_col2{
   width: 625px;
   height: 200px;
   padding:12px;
   font-size: 12px;
   }

#tab1_col3{
   width: 150px;
   height: 200px;
   padding:12px;
   font-size: 11px;
   }

#tab2_col1{
   width: 775px;
   height: 200px;
   padding:12px;
   font-size: 11px;
   }


  
/****** Mise en page du texte ******/

  
#contenu_en_tete{
   height: 200px;
   text-align: justify;
   padding-left: 8px;
   padding-right: 8px;
   margin-bottom: -4px;
  font-size: 12px;
   }

#en_tete_infos_forum{
  font-size: 12px;
   text-align: center;
   padding-left:8px;
   padding-right:8px;
   margin-bottom:-4px;
   }
  
#en_tete_news{
  font-size: 12px;
   margin-left:12px;
   margin-bottom:-4px;
   }

/* Ajout police */
.body
@font-face {
font-family: breamcatcher;
  src: url('http://www.aht.li/2565528/breamcatcher.ttf');
}
  
</style>



<table width="100%"><tr><td>
 
<script type="text/javascript">
        //<!--
                function change_paonglet(name)
                {
                        document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                        document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                        document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                        document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                        anc_paonglet = name;
                }
        //-->
        </script>
<div class="paonglets">
  <span class="paonglet_0 paonglet" id="paonglet_classe1" onclick="javascript:change_paonglet('classe1');"><font color="#252433" face="Julius Sans One">Le Rescator</font></span>
  <span class="paonglet_0 paonglet" id="paonglet_classe2" onclick="javascript:change_paonglet('classe2');"><font color="#252433" face="Julius Sans One">D'Artagnan</font></span>
  <span class="paonglet_0 paonglet" id="paonglet_classe3" onclick="javascript:change_paonglet('classe3');"><font color="#325f7c" face="Julius Sans One">Athos</font></span>
  <span class="paonglet_0 paonglet" id="paonglet_classe4" onclick="javascript:change_paonglet('classe4');"><font color="#7d60cc" face="Julius Sans One">Constance</font></span>
  <span class="paonglet_0 paonglet" id="paonglet_classe5" onclick="javascript:change_paonglet('classe5');"><font color="#fbd487" face="Julius Sans One">Cae</font></span>
  <span class="paonglet_0 paonglet" id="paonglet_classe6" onclick="javascript:change_paonglet('classe6');"><font color="#fbd487" face="Julius Sans One">Milady</font></span>
</div>
  
  </td></tr><tr><td>      
   
   <div class="contenu_paonglets">
 
<div class="contenu_paonglet" id="contenu_paonglet_classe1">
<table>
  <tr valign=middle>
  
  <td rowspan=2><img src="http://www.zupimages.net/up/15/08/nmbw.png"></td>
  
  <td align=center><font face="breamcatcher" size="6px" color="#252433" style="text-shadow: 0px 1px 2px black;">Le Rescator</font><br /><font color="#F1E4CB">Fondateur</font></td>
  
  </tr>
  
  <tr valing=top><td><div style="text-align: justify; font-size: 12px; margin: 15px; color:#F1E4CB;"><center><a href=""><font color="#A9FFF4">Contacter par MP</font></a> - <a href=""><font color="#A9FFF4">Sa présentation</font></a></center><br />Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.</div></td>
  
  </tr>
  </table>
  </div>                                                                                                                                                                                                                                                                                                                                                                     
  
<div class="contenu_paonglet" id="contenu_paonglet_classe2">

<table>
  <tr valign=middle>
  
  <td rowspan=2><img src="http://www.zupimages.net/up/15/08/mkoo.png"></td>
  
  <td align=center><font face="breamcatcher" size="6px" color="#252433" style="text-shadow: 0px 1px 2px black;">Chevalier d'Artagnant</font><br /><font color="#F1E4CB">Darty - Responsable du référencement</font></td>
  
  </tr>
  
    <tr valing=top><td><div style="text-align: justify; font-size: 12px; margin: 15px; color:#F1E4CB;"><center><a href=""><font color="#A9FFF4">Contacter par MP</font></a> - <a href=""><font color="#A9FFF4">Sa présentation</font></a></center><br /><font color="#F1E4CB">Co-administrateur & Responsable du référencement, il vous accueille avec son sourire et son humour légendaire, du moment que vous ne lui parlez pas de son chapeau. Vous pouvez aussi vous adresser à lui pour l'aménagement de votre espace de publicité.</div></td>
  
  </tr>
  </table>

</div>
  
<div class="contenu_paonglet" id="contenu_paonglet_classe3">

<table>
  <tr valign=middle>
  
  <td rowspan=2><img src="http://www.zupimages.net/up/15/08/0y77.png"></td>
  
  <td align=center><font face="breamcatcher" size="6px" color="#325f7c" style="text-shadow: 0px 1px 2px black;">Athos</font><br /><font color="#F1E4CB">Lecteur et Scénariste</font></td>
  
  </tr>
  
  <tr valing=top><td><div style="text-align: justify; font-size: 12px; margin: 15px; color:#F1E4CB;"><center><a href=""><font color="#A9FFF4">Contacter par MP</font></a> - <a href=""><font color="#A9FFF4">Sa présentation</font></a></center><br />Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.</div></td>
  
  </tr>
  </table>

</div>
  
<div class="contenu_paonglet" id="contenu_paonglet_classe4">

<table>
  <tr valign=middle>
  
  <td rowspan=2><img src="http://www.zupimages.net/up/15/08/4so5.png"></td>
  
  <td align=center><font face="breamcatcher" size="6px" color="#7d60cc" style="text-shadow: 0px 1px 2px black;">Constance</font><br /><font color="#F1E4CB">Chargée de communication</font></td>
  
  </tr>
  
  <tr valing=top><td><div style="text-align: justify; font-size: 12px; margin: 15px; color:#F1E4CB;"><center><a href=""><font color="#A9FFF4">Contacter par MP</font></a> - <a href=""><font color="#A9FFF4">Sa présentation</font></a></center><br />Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.</div></td>
  
  </tr>
  </table>
  
  </div>

<div class="contenu_paonglet" id="contenu_paonglet_classe5">

<table>
  <tr valign=middle>
  
  <td rowspan=2><img src="http://www.zupimages.net/up/15/08/m3hb.png"></td>
  
  <td align=center><font face="breamcatcher" size="6px" color="#fbd487" style="text-shadow: 0px 1px 2px black;">Cae</font><br /><font color="#F1E4CB">Graphiste</font></td>
  
  </tr>
  
  <tr valing=top><td><div style="text-align: justify; font-size: 12px; margin: 15px; color:#F1E4CB;"><center><a href=""><font color="#A9FFF4">Contacter par MP</font></a> - <a href=""><font color="#A9FFF4">Sa présentation</font></a></center><br />graphiste et habilleuse de vos forums ou de vous-même, toutes les demandes sont acceptées sans formalités particulières. La rémunération se fait avec un merci et un sourire.</div></td>
  
  </tr>
  </table>

</div>
  
<div class="contenu_paonglet" id="contenu_paonglet_classe6">

<table>
  <tr valign=middle>
  
  <td rowspan=2><img src="http://www.zupimages.net/up/15/08/jw5q.png"></td>
  
    <td align=center><font face="breamcatcher" size="6px" color="#fbd487" style="text-shadow: 0px 1px 2px black;">Milady</font><br /><font color="#F1E4CB">Graphiste et codeuse</font></td>
  
  </tr>
  
  <tr valing=top><td><div style="text-align: justify; font-size: 12px; margin: 15px; color:#F1E4CB;"><center><a href=""><font color="#A9FFF4">Contacter par MP</font></a> - <a href=""><font color="#A9FFF4">Sa présentation</font></a></center><br />Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.</div></td>
  
  </tr>
  </table>

</div>

 </div>

  </td></tr>
  </table>
  
  
  <script type="text/javascript">
        //<!--
                var anc_paonglet = 'classe1';
                change_paonglet(anc_paonglet);
        //-->
        </script>
  
  </div>
Revenir en haut Aller en bas
Contenu sponsorisé
MessageSujet: Re: Version 2 - Image et codage
Revenir en haut Aller en bas
Version 2 - Image et codage
Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» La bombe à retardement,version image.
» La trilogie...version dessin animé
» Faut-il se passer des scrutins sur le continent noir? Est-ce l'image d'Haiti?
» Préval-Duvivier -Bellerive ; Quand l'image parle
» L'Amérique Latine à l'image d'Haiti

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
I Love Testing :: Les références :: Images et codages-