Bonjour!

Up?

Hello!

Up?

Plop !

Je prends, j'ai juste besoin de savoir quelle taille feront les images "titres" s'il te plait =3

Super merci ! ^^

Alors pour la taille des images titres... difficile à dire parce que c'est un peu proportionnel aux autres éléments. Je dirais pas plus de 40px de haut, et 100px de large. Mais si tu vois que ça ne rend pas bien par rapport à l'ensemble, tu peux adapter.

Voici ce que ça donne : www.

Recoucou

C'est cool (surtout que t'as été rapide!) mais y'a juste deux petits trucs qui me dérangent. D'abord les prédéfinis, j'aurais préféré un éventail pour qu'on puisse en ajouter plusieurs sans que ça prenne trop de place (nous avons beaucoup de predefs sur notre site). Ensuite les cadres du staff, je voulais justement éviter cet aspect petit et symétrique, d'où mon idée de cadres penchés ^^" cela dit je ne sais pas si c'est possible, j'ai vu ça une fois sur un site mais n'y connaissant rien...

Un éventail ? C'est-à-dire ? Sur ton schéma ils sont collés
Ils sont petits car ils prennent de la place, du coup ils déforment la PA. Ils ne sont pas penchés chez toi ?

EDIT : J'avais oublié la compatibilité avec Chrome, si tu utilises ce navigateur ça explique pourquoi tu ne voyais pas les illustrations penchées.

Je suis sous Safari en fait x) Mais c'est le même problème je suppose. En tout cas maintenant je les vois.

Et sur un schéma c'est dur de montrer ce que je veux >w< Mais oui, un éventail (je sais pas comment dire autrement), un système pour pouvoir placer facilement une dizaine d'images (pas trop petites sinon c'est dur de donner envie aux gens de les regarder de plus près) sans déformer le PA.

Comme je le disais, j'ai du mal avec les proportions, mais si tu juges que les éléments ne peuvent pas être plus grands sur ce format de PA, je veux bien que tu l'agrandisse (tant que ça devient pas un monstre qui prendra toute la place sur ma page d'accueil XD)

Bon ... ben il me faudrait un exemple, parce qu'un éventail c'est vraiment pas clair xD Tu as déjà vu ça ?

Sinon pour les images de staff on peut les étaler sur les deux colonnes pour ne pas déformer.

Dac pour étaler les images du staff, en effet ça sera mieux ^^

En parcourant le site, je me suis rendu compte que ce que j'appelle "éventail" est appelé "accordéon" en fait x) Le terme est sans doute plus clair ainsi du coup?

Coucou!
Juste un petit up, même si je me doute que j'aurais plutôt des nouvelles ce weekend ^^ simplement pour que le sujet ne se fasse pas totalement engloutir sous les autres.

Comme sur ce tuto ? Comment tu veux procéder puisque les images n'ont pas de contenu Oo Si tu ne mets que ces dernières on y verra pas grand chose =$

Je sais pas T_T Sur ce site ça y était pendant longtemps mais depuis quelques mois ça fonctionne plus, alors pour te montrer c'est galère: http://slavavostok.forumactif.com/
Tu as une autre solution sinon? éè Parce que ça m'ennuie de ne pas pouvoir mettre nos predefs en avant, c'est quand même un de nos principaux atouts.

Sur le forum ce sont juste de minuscules images, le système dont tu parlais n'y est plus =$
Ca dépend du nombre de prédef que tu veux faire apparaître ... sinon peut-être des images plus discrètes qui s'agrandiraient en hover, ou par des info-bulles ?

Ah les info-bulles ça peut être une bonne alternative, oui! On peut tenter ça? ^^

C'est fait =3
Rappel du lien : www.

Wah ** C'est carrément mieux!
Ca me va parfaitement ^w^ Merci Halloween *hug bisounoursifiant de gratitude*

On y est arrivé year ! \o/

Voici donc les codes :

CSS

Code:

/***************************** MISE EN FORME PA *****************************/

a {
  text-decoration: none !important;
}

a:hover {
  text-decoration: none !important;
}

.fond_accueil {
  background-color: #3B393B;
  width: 600px;
  height: 400px;
  box-shadow: 2px 2px 10px black;
  -moz-box-shadow: 2px 2px 10px black;
  -webkit-box-shadow: 2px 2px 10px black;
}

.boîte_PA_1 {
  background-color: #716C71;
  color: #ffffff;
  border: 2px solid #ffffff;
  padding: 15px;
  text-align: justify;
  width: 200px;
  overflow: auto;
}

.predef {
  border: 2px solid #ffffff;
  width: 40px;
}

.image_PA_1 {
  border: 2px solid #ffffff;
  width: 90px;
  transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
}

.image_PA_2 {
  border: 2px solid #ffffff;
  width: 90px;
  transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -webkit-transform: rotate(-4deg);
}

c.info {
  position: relative;
  z-index: 24;
  color: #000;
  text-decoration: none;
}
 
c.info:hover {
  z-index: 25;
}
 
c.info span {
  display: none;
}
 
c.info:hover span {
  display: block;
  position: absolute;
  top: -3em;
  left: 2em;
  width: 100px;
  height: 30px;
  background-color: #716C71;
  color: #1C1C1C;
  text-align: center;
  font-weight: none;
  padding: 5px;
}

/***************************** FIN MISE EN FORME PA *****************************/

PA

Code:

<div class="fond_accueil">
   
   <table>
      
      <tbody>
         
         <tr>
            
            <td>
               
               <center>
                   <img src="http://i58.servimg.com/u/f58/18/43/33/39/news10.png" /><br />
                  <div class="boîte_PA_1" style="height: 150px;">
                      <span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /> <span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br />
                  </div>
                  
               </center>
               
            </td>
            
            <td style="width: 30px;">
               
            </td>
            
            <td>
               
               <center>
                   <br /><br /> <img src="http://i58.servimg.com/u/f58/18/43/33/39/nav10.png" /><br />
                  <div class="boîte_PA_1">
                      <select onchange="location = this.value" style="BACKGROUND-COLOR: #d3d3d3; WIDTH: 190px; COLOR: #16161a"> <option>Faites votre choix</option> <option value="#">Lien</option> <option value="#">Lien 2</option> <option value="#">Lien 3</option> <option value="#">Lien 4</option> <option value="#">Lien 5</option></select>
                  </div>
                   <br /><img src="http://i58.servimg.com/u/f58/18/43/33/39/predef10.png" /><br /><c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c>
               </center>
               
            </td>
            
         </tr>
         
      </tbody>
      
   </table><br /><br /><a href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1510.jpg" class="image_PA_1" /></a> <a href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1510.jpg" class="image_PA_2" /></a> <a href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1510.jpg" class="image_PA_1" /></a> <a href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1510.jpg" class="image_PA_2" /></a>
</div>

Dis-moi si tout fonctionne

Alors je l'ai installé sur mon forum test, mais c'est bizarre, il me crée quand même le cadre du message d'acceuil ordinaire derrière: http://chachamonde.forumgratuit.org/

Ah, si tu ne le veux pas il va falloir l'insérer directement dans les templates ... C'est-à-dire dans "overall_header", entre ces deux parties :

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>
<----- CODE A INSERER ICI ----->
            <div style="clear: both;"></div>

Ce qui devrait donner :

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>
   <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}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- 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 -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                  </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>

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>
<center><div class="fond_accueil">
   
   <table>
      
      <tbody>
         
         <tr>
            
            <td>
               
               <center>
                   <img src="http://i58.servimg.com/u/f58/18/43/33/39/news10.png" /><br />
                  <div class="boîte_PA_1" style="height: 150px;">
                      <span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /> <span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br /><span style="color: #63B3A8;">00/00</span> Nouveauté<br />
                  </div>
                  
               </center>
               
            </td>
            
            <td style="width: 30px;">
               
            </td>
            
            <td>
               
               <center>
                   <br /><br /> <img src="http://i58.servimg.com/u/f58/18/43/33/39/nav10.png" /><br />
                  <div class="boîte_PA_1">
                      <select onchange="location = this.value" style="BACKGROUND-COLOR: #d3d3d3; WIDTH: 190px; COLOR: #16161a"> <option>Faites votre choix</option> <option value="#">Lien</option> <option value="#">Lien 2</option> <option value="#">Lien 3</option> <option value="#">Lien 4</option> <option value="#">Lien 5</option></select>
                  </div>
                   <br /><img src="http://i58.servimg.com/u/f58/18/43/33/39/predef10.png" /><br /><c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c> <c class="info" href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1511.png" /><span>Nom Prédéfinis<br /><a href="#">Trouve-moi</a> </span></c>
               </center>
               
            </td>
            
         </tr>
         
      </tbody>
      
   </table><br /><br /><a href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1510.jpg" class="image_PA_1" /></a> <a href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1510.jpg" class="image_PA_2" /></a> <a href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1510.jpg" class="image_PA_1" /></a> <a href="#"><img src="http://i58.servimg.com/u/f58/18/43/33/39/1510.jpg" class="image_PA_2" /></a>
  </div></center>
  <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 -->

Ah XD
Bon non, j'ai essayé, les images du bas se mettent inexplicablement à dépasser du cadre avec le template.
Mais pas grave. Je vais faire avec le cadre blanc c'est pas trop moche au final ^^ L'important c'est le contenu, et grâce à toi c'est déjà très bien (beaucoup mieux que tout ce que j'aurais pu faire moi-même).

Encore merci beaucoup o/

Si elles dépassent du cadre essaie de l'agrandir ici :

Code:

.fond_accueil {
  background-color: #3B393B;
  width: 600px;
  height: VALEURpx;
  box-shadow: 2px 2px 10px black;
  -moz-box-shadow: 2px 2px 10px black;
  -webkit-box-shadow: 2px 2px 10px black;
}

Ca a marché, Falyae ? Je vois le "terminé" mais comme tu n'as pas répondu, j'ai un doute

Ah pardon! Pour être honnête j'ai préféré me simplifier les choses, étant assez peu familiarisée avec les codes, je n'avais pas envie de me fatiguer à fouiller dans les templates si ça ne marchait pas donc j'ai gardé le CSS et ça fonctionne très bien comme ça, le cadre blanc derrière ne me dérange pas ^^ Je suis parfaitement satisfaite.