Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Message par horusbk le Mer 11 Mar 2015 - 21:59

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://themazerunner-forum.fr/

Description du problème

Bonjour,
Aujourd'hui je souhaiterais intégrer une barre semblable à celle qui est en dessous de la barre de navigation sur le FDF.

Il s'agit de la zone encadrée en rouge sur l'image ci-dessous :




Pour ma part, j'aimerais le type de barre (en phpBB2) avec "suivez l'actualité de Maze Runner - Forum France" (avec mon logo) puis les icônes facebook, twitter, google+, ask, youtube, RSS. Tout ça à gauche comme sur l'image.

A droite cependant, je voudrais remplacer la zone de recherche par soit une image cliquable ou un texte cliquable qui renverrais vers un deuxième site.

En vous remerciant de l'aide que vous pourrez m'apporter
1baptiste


Dernière édition par 1baptiste le Lun 16 Mar 2015 - 21:00, édité 1 fois

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Message par horusbk le Ven 13 Mar 2015 - 9:06

up !

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Message par R-max le Ven 13 Mar 2015 - 12:57

bonjour 1 baptiste
j'ai commencer a travailler pour ton idée
proposition comme ceci que tu veut ???
((((la j'ai volontairement mis des couleur , aprés faudra dire comment tu le veut exactement .))))


adresse du visuelle > http://forum-test-r-max.forumactif.org/

bonne journée

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Message par horusbk le Ven 13 Mar 2015 - 18:22

Bonjour R-Max,
J'ai (essayé) de te faire une maquette avec "Power Point" de ce que je voudrait comme barre (+ quelques commentaires ci-dessous) :



Au niveau de l'habillage et de la mise en forme :


// Pour les logos des réseaux sociaux : la mise en forme que tu m'as proposé me convient parfaitement \\

- F = logo de Facebook avec le lien : https://www.facebook.com/pages/Maze-Runner-Forum-France/804648072948834?ref=aymt_homepage_panel
- T = logo de twitter avec le lien : https://twitter.com/MazeRunnerForum
- G+ = compte Google+ avec le lien : https://plus.google.com/u/0/116003622222085473419/posts/p/pub
- A = compte Ask avec le lien : http://ask.fm/MazeRunnerForum
- YT = compte youtube avec le lien : https://www.youtube.com/channel/UCc5HeMym9ppm4_baaUgzfRg
- RSS = flux RSS du forum, lien : http://www.themazerunner-forum.fr/rss

Partie de gauche "suivez l'actualité ..."  :

Police de texte plutôt sympas et lisible. Comme sur ma maquette, sur deux lignes avec mon LOGO à côté du "du".
Voici le lien de mon logo : http://i38.servimg.com/u/f38/19/03/94/82/logo111.gif


Fond de la barre et positionnement :

Couleur de fond en gris : code #A8A798
Il faut que la barre s'adapte aux bords de mon forum pour toutes les résolutions d'écran.
Bords rectangulaires pour la barre.

Bouton de droite :

Police de texte plutôt sympas et lisible. Avec en dessous, un bouton qui renverra vers soit le portail du forum ou une page HTML. Dessus se trouvera la carte du labyrinthe que tu m'as superbement réalisée dans la section graphique Wink . (C'est-à-dire que je changerais le lien plus tard, après que la barre soit posée dans mon forum).
Si possible, pourrais-tu animer le bouton "DECOUVRIR" qui se trouve en dessous du texte. L'animation peut se faire soit au clique et/ou au survol : un peu du même type que l'animation du bouton "générer" qui se trouve sur ce site.
Cordialement, 1baptiste

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Message par R-max le Ven 13 Mar 2015 - 19:38

ok bien noté une capture de l'avancement



R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Message par R-max le Sam 14 Mar 2015 - 12:42

bonjour baptiste ,


presque fini , me reste a trouver comment mettre
l'actu a gauche et le labyrinthe a droite , la il sont centrer , pourtant même avec du align il bouge pas !!
je cherche Rolling Eyes
et aussi mettre une marge aux images !!!!! si quelqu'un a une idée , je prend !!
visualisation içi

voici le code et le css pour l'instant
Code:
 <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"  align "center">
<tbody>
<tr>
<th colspan="2" nowrap="nowrap" width="100%" class="mazrunner_1">
  <span class="mazrunner_2" style=nowrap="nowrap" align="left" >Suivez l'actualité de</span>
  <span class="mazrunner_3" style=nowrap="nowrap" align="right">La Carte du Labyrinthe</span>
 
  <div clas="mazrunner_4"style=nowrap="nowrap" align="center"></div>
        <a href="  http://www.themazerunner-forum.fr/t2-reglement-interieur" ><img src="http://i38.servimg.com/u/f38/18/75/37/66/1210.png" space="10"/>
          <a href=" https://www.facebook.com/pages/Maze-Runner-Forum-France/804648072948834?ref=aymt_homepage_panel "><img src="http://i38.servimg.com/u/f38/18/75/37/66/facebo10.png" />
        <a href=" https://twitter.com/MazeRunnerForum "><img src="http://i38.servimg.com/u/f38/18/75/37/66/twitte10.png" />
      <a href=" https://plus.google.com/u/0/116003622222085473419/posts/p/pub">  <img src="http://i38.servimg.com/u/f38/18/75/37/66/google12.png"/>
        <a href=" http://ask.fm/MazeRunnerForum"><img src="http://i38.servimg.com/u/f38/18/75/37/66/youtub11.png" / >
        <a href="https://www.youtube.com/channel/UCc5HeMym9ppm4_baaUgzfRg"><img src="http://i38.servimg.com/u/f38/18/75/37/66/youtub10.png"/>
    <a href=" http://www.themazerunner-forum.fr/rss"> <img src=" http://i38.servimg.com/u/f38/18/75/37/66/rss10.png"/>
<a target="_blank"href="http://graphcode.un concurrent.org/index.php"><img style="border:0px;" src="http://images.supportduweb.com/buttons.php?frm=1&btn_type=23&txt=D%C3%A9couvrir" onmouseover="this.src='http://images.supportduweb.com/buttons.php?frm=2&btn_type=23&txt=D%C3%A9couvrir'" onmouseout="this.src='http://images.supportduweb.com/buttons.php?frm=1&btn_type=23&txt=D%C3%A9couvrir';" alt="D%C3%A9couvrir" /></a><script type="text/javascript">img=new Image();img.src= "http://images.supportduweb.com/buttons.php?frm=2&btn_type=23&txt=D%C3%A9couvrir";</script>

</tbody></table>

Code:
.mazrunner_1{    width:100%auto;                }

.mazrunner_2{
text-align:left!important;
 
    font-size:20px!important;
  font-weight: bold!important;
 
}
.mazrunner_3{
  text-align:right!important;
 
    font-size:20px!important;
  font-weight: bold!important;
 
}
.mazrunner_4{
  width:100%!important;
  height:100%!important;
}
 

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Message par horusbk le Sam 14 Mar 2015 - 13:34

@R-max a écrit:bonjour baptiste ,


presque fini , me reste a trouver comment  mettre
l'actu a gauche et le labyrinthe a droite , la il sont centrer  , pourtant même avec du align il bouge pas !!
je cherche Rolling Eyes
et aussi mettre une marge aux images  !!!!! si quelqu'un a une idée , je prend !!
visualisation içi
Code:

 

Merci
C'est normal que le fond soit noir ?

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Message par R-max le Sam 14 Mar 2015 - 15:15

oui normal
>>comme il s'adapte au forum ,il prend les couleur de la table du forum , donc sur le tien il sera gris avec le border doré .. Very Happy

edit: la elle prend la couleur de la catégorie !

je vait rectifier cela , bien vu Rolling Eyes

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Message par horusbk le Sam 14 Mar 2015 - 16:04

Le code je le mets dans le JS ?

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Message par R-max le Sam 14 Mar 2015 - 16:09

Non pas dans le js.. ds overall mais attend faux je fasse des modif encore

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Message par R-max le Sam 14 Mar 2015 - 16:09

slt baptiste1

regarde voir si ça te va comme ça !!
http://forum-test-r-max.forumactif.org/

le positionnement te va
et cette foie ci elle prend la couleur du forum Razz

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Message par horusbk le Dim 15 Mar 2015 - 13:48

Ouais c'est bien Very Happy  mais tu ne peux pas réduire les marges en haut et en bas ? et enlever aussi : ¤¤¤ Accueil/Information du Forum ¤¤¤ ?


Comment avance la carte du labyrinthe ?


^^1baptiste

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Message par R-max le Dim 15 Mar 2015 - 14:18

Si je peut. ... la carte arrive aussi .

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Message par R-max le Lun 16 Mar 2015 - 0:26

bonjour baptiste , regarde si c'est bon !!! http://forum-test-r-max.forumactif.org/?tt=1

si c'est bon pour toi , donne moi ton overall header slt ,
je te placerez le code ,et dit moi aussi ou tu le veut exactement ...

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Message par horusbk le Lun 16 Mar 2015 - 13:11

Merci @R-Max I love you voici le code Overall Header. La barre est parfait, cependant, c'était prévue qu'elle bouge vers le bas dans un rectangle rouge ?
EDIT : serait il possible de traker les liens (il y a eu un tutoriel de FDF sur ça récemment).

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://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" style="z-index: 10000 !important;">
      <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_desc">{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 id="navbar" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td 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 -->


    <!-- #region sign_in_popup -->
    <div id="document_modal" class="modal" style="display:none; width: 100%; height: 100%; position: fixed; top: 0px; left:0px; z-index: 10000; background-color: #000;"></div>
    <div id="sign_in_popup_popup" style="display:none; z-index: 10001; top: 40%; left:20%;right:auto; position: fixed;" class="popupWrapper">
    <div id="M14_Popup_logo"></div>
      <div id="sign_in_popup_inner" class="popupInner"style="width: 700px; max-height: 641px;">
    <div style="" class="ipbfs_login" id="inline_login_form">
                    <form id="login" method="post" action="/login.forum">
                    <div class="M14_ConnecT_titre">Connexion</div>
                   
                        <div class="ipbfs_login_row">
                            <div class="ipbfs_login_col">
                              <span class="right desc lighter blend_links">
    <span title="Rejoindre la communauté">                           
    <a href="/register" >Rejoindre la communauté</a>
    </span></span>
                                <strong><label for="ips_username">Ton Pseudo</label></strong>
    <div class="ipsField_content">
    <input type="text" tabindex="1" size="30" placeholder="Ton Pseudo" name="username" class="input_text ipbfs_login_input ipbfs_luser" id="ips_username">
    </div>
                            </div>
                            <div class="ipbfs_login_col">
    <span class="right desc lighter blend_links">
     
    <a href="/profile?mode=sendpassword">Mot de passe oublié?</a></span>

                                <strong><label for="ips_password">Mot de passe</label></strong>
                                <div class="ipsField_content">
    <input type="password" tabindex="2" size="30" placeholder="Mot de passe" name="password" class="input_text ipbfs_login_input ipbfs_lpassword" id="ips_password"><br>
                                    </div>
                            </div>
                        </div>
                        <div class="clearfix">
                            <div class="ipbfs_login_col">
                                <input type="checkbox" class="input_check left" value="1" name="autologin" checked="checked" id="autologin">
                                <div style="padding-left: 20px;">
    <label for="autologin"> <strong>Se souvenir de moi</strong> &nbsp;
                                       
                                    </label>
                                </div>
                            </div>
                         
                        </div>
                        <div class="ipsForm_submit ipsForm_center clear" style="height: 29px;">
    <span title="Se connecter au forum">
      <input type="submit" name="login" value="Ouvrir la session" class="input_submit">
      </span>
                            <input name="redirect" type="hidden" value="" />                 
                        </div>
                    </form>
                </div>
            </div>
          <div id="sign_in_popup_close" class="popupClose clickable"title="Fermer la boite de connexion">
    <img alt="x" src="http://i78.servimg.com/u/f78/18/17/62/92/close_10.png" onclick="show_popup('sign_in_popup_popup');"/>
          </div>
        </div>
    <script type="text/javascript">
    $(document).ready(function() {
    $('#sign_in_popup_close').click(function() {
      $('#fa_toolbar').fadeIn('slow');
      })
     

         
    });
    </script>
                       
        <script type="text/javascript">
          //<![CDATA[
          $(document).ready(function() {
              $('#sign_in').attr('href', '#').attr('onclick', "show_popup('sign_in_popup_popup');");
              /*
              $('#sign_in').click(function() {
                sign_in_popup();
         
              });
              */
          });
          function show_popup(id) {
              var $oObj = $('#'+id);
              if ($oObj.css('display') == 'none') {
                $oObj.add('#document_modal').fadeIn('slow');
          $('#fa_toolbar').fadeOut('slow');
                $("input:text:eq(0):visible").focus();
              } else {
                $oObj.add('#document_modal').fadeOut('slow');
              }
          }
          //]]>
        </script>
    <style>
      /*DEBUT POP UP*/
     

    #document_modal
    {
    background-image:url(' http://i38.servimg.com/u/f38/19/03/94/82/the-ma10.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    }
    #M14_Popup_logo
    {
    position:fixed;
    width:989px;
    height: 244px;
    top:-44px;
    left:100px;
    background-image:url('http://i38.servimg.com/u/f38/19/03/94/82/logo1_10.gif');
    background-repeat: no-repeat;
    background-position:left top;
    }
    .popupWrapper
    {
    color:#ffffff ! important;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5) !important;
    background: #ffffff;
    padding: 8px !important;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    border-radius: 5px !important;
    }

      /*Partie du Pseudo*/
    #sign_in_popup_inner .ipbfs_login
    {

    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    font-style:italic;
    font-weight:bold;
    font-size: 13px;
    color:#ffffff !important;
    }
     

      /*Le contenu de la pop up*/
    .popupInner
    {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    background: #141414;
    overflow-x: hidden;
    overflow-y: auto;
    width: 500px;
    }
     
     
      /*Partie haute*/
    .popupInner div.M14_ConnecT_titre
    {
    font-size:12px !important;
    font-weight:bold;
    font-style:italic !important;
    font-family: "Lucida Bright", Georgia, serif;
    border-bottom: 1px solid #fff;
    color:#fff ! important;
    padding: 8px 10px 9px;
    text-align:center;
    } 

         
    .ipbfs_login_row {overflow: hidden; border-top: 0 none;}
    .ipbfs_login_col {float: left;padding: 15px 10px;width: 314px;}
    .right {float: right;}
    .right a{color:#ffffff !important;}
    .ipbfs_login_col a{ text-decoration:none !important;}


    ::-webkit-input-placeholder { color:#fff;font-size:11px ; font-style:italic;font-weight:normal !important;}
    ::-moz-placeholder { color:#fff;font-size:11px ; font-style:italic;font-weight:normal !important;}
    :-ms-input-placeholder { color:#fff;font-size:11px ; font-style:italic;font-weight:normal !important;}
    input:-moz-placeholder { color:#fff;font-size:11px ; font-style:italic;font-weight:normal !important;}
         
    #sign_in_popup_inner input.ipbfs_luser {
                background-image: url("http://i39.servimg.com/u/f39/11/26/21/37/user15.png") !important;
                background-position: 3px 60% !important;
                background-repeat: no-repeat !important;
            }
    #sign_in_popup_inner .ipbfs_login_input {
                font-size: 14px !important;
                margin-top: 10px !important;
                padding: 6px 0 6px 28px !important;
                width: 284px !important;
            }
    #sign_in_popup_inner input.ipbfs_luser ,#sign_in_popup_inner input.ipbfs_lpassword , #sign_in_popup_inner .ipsTagBox_wrapper, #sign_in_popup_inner textarea {
                background: none repeat scroll 0 0 #FCFCFC;
                border: 1px solid #D4D4D4;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
                color: #ffffff;
                padding: 6px;
               
            }

    #sign_in_popup_inner  input.ipbfs_lpassword
      {
                background-image: url("http://i39.servimg.com/u/f39/11/26/21/37/key10.png") !important;
                background-position: 3px 60% !important;
                background-repeat: no-repeat !important;
            }
            .clearfix:after {
                clear: both;
                content: ".";
                display: block;
                height: 0;
                overflow: hidden;
                visibility: hidden;
            }
    .left {float: left;}
    .ipbfs_login .ipsForm_submit {margin-top: 0;}
    .ipbfs_login  {margin: 0;}
    img, .input_check, .input_radio {vertical-align: middle;}
    input[name="login"].input_submit ,
    input.submit_input.clickable
    {background:transparent !important;color:#ffffff !important;font-weight:bold;border:none !important;}
    .ipsForm_center {text-align: center !important;}
     
      /*Partie basse*/
    .ipsForm_submit
    {
      cursor:pointer;
    border-top: 1px solid #fff;
    margin-top: 25px;
    padding: 5px 10px;
    text-align: right;
    font-family: "Lucida Bright", Georgia, serif;
    }
    .clear {clear: both;}
        /*Le bouton de fermeture pop up*/
    .popupClose {position: absolute;right: 20px;top: 20px;width: 13px;height: 13px;cursor:pointer;}

    a#sign_in.M14_title{margin-top:8px;text-decoration:none !important;}

    #sign_in_popup_inner input {color:#000000 !important;}
    /*FIN DE LA POP UP*/
    </style>
    <!-- #endregion sign_in_popup -->

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Message par R-max le Lun 16 Mar 2015 - 19:04

slt baptiste , comme tu ma pas dit , je les placé juste en dessous du tableau , barre navigation ,

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://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" style="z-index: 10000 !important;">
      <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_desc">{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 id="navbar" cellpadding="0" border="0" align="{MENU_POSITION}">
              <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
              </tr>
            </table>
<!-- debut R-max -->
 <table class="forumline" cellspacing="0" cellpadding="0" border="0" width="100%" height="100%" align="center" margin="auto">
                            <tbody>
<tr>
                     <td align="center"  class="row1">
                                                      <div class="mazrunner_1" nowrap="nowrap" align="center" width="100%" height="100%" margin="auto">
                                                       
                                                        <span class="mazrunner_2"><a href="http://www.themazerunner-forum.fr/t2-reglement-interieur" title="le reglement du forum"><img src="http://i38.servimg.com/u/f38/18/76/86/41/maz10.png" width="200" height="50" border="0" alt="" hspace="0"/></a></span>
                                                  <span class="mazrunner_4"><a href="https://www.facebook.com/pages/Maze-Runner-Forum-France/804648072948834?ref=aymt_homepage_panel"title="la page facebook de maze runner" ><img src="http://i38.servimg.com/u/f38/18/75/37/66/facebo10.png"width="60" height="60" border="0" alt="" hspace="0"/></a></span>
                                                    <span class="mazrunner_4"><a href="https://twitter.com/MazeRunnerForum "title="venez twitter avec nous"><img src="http://i38.servimg.com/u/f38/18/75/37/66/twitte10.png"width="60" height="60" border="0" alt="" hspace="0"/></a></span>
                                                    <span class="mazrunner_4"><a href="https://plus.google.com/u/0/116003622222085473419/posts/p/pub"title="le+ de maze runner"><img src="http://i38.servimg.com/u/f38/18/75/37/66/google12.png"width="60" height="60" border="0" alt="" hspace="0"/></a></span>
                                                      <span class="mazrunner_4"><a href="http://ask.fm/MazeRunnerForum"title="ask discution"><img src="http://i38.servimg.com/u/f38/18/75/37/66/youtub11.png"width="60" height="60" border="0" alt="" hspace="0"/></a></span>
                                                      <span class="mazrunner_4"><a href="https://www.youtube.com/channel/UCc5HeMym9ppm4_baaUgzfRg"title="les vidéos"><img src="http://i38.servimg.com/u/f38/18/75/37/66/youtub10.png"width="60" height="60" border="0" alt="" hspace="0"/></a></span>
                                                    <span class="mazrunner_4"><a href="http://www.themazerunner-forum.fr/rss"title="suivez le flux rss du forum"> <img src=" http://i38.servimg.com/u/f38/18/75/37/66/rss10.png"width="60" height="60" border="0" alt="" hspace="0"/></a></span>
                                                        <span class="mazrunner_3"><a href="http://graphcode.un concurrent.org/index.php"title="un petit tour dans le labyrinthe s'impose"><img src="http://i38.servimg.com/u/f38/18/76/86/41/w10.png"width="200" height="50" border="0" alt="" hspace="0"/></a></span>
                                                          </div>
                                                  </td>                    
                            </tr>
                            </tbody>
                        </table>
<!-- fin R-max -->
<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 -->


    <!-- #region sign_in_popup -->
    <div id="document_modal" class="modal" style="display:none; width: 100%; height: 100%; position: fixed; top: 0px; left:0px; z-index: 10000; background-color: #000;"></div>
    <div id="sign_in_popup_popup" style="display:none; z-index: 10001; top: 40%; left:20%;right:auto; position: fixed;" class="popupWrapper">
    <div id="M14_Popup_logo"></div>
      <div id="sign_in_popup_inner" class="popupInner"style="width: 700px; max-height: 641px;">
    <div style="" class="ipbfs_login" id="inline_login_form">
                    <form id="login" method="post" action="/login.forum">
                    <div class="M14_ConnecT_titre">Connexion</div>
                   
                        <div class="ipbfs_login_row">
                            <div class="ipbfs_login_col">
                              <span class="right desc lighter blend_links">
    <span title="Rejoindre la communauté">                           
    <a href="/register" >Rejoindre la communauté</a>
    </span></span>
                                <strong><label for="ips_username">Ton Pseudo</label></strong>
    <div class="ipsField_content">
    <input type="text" tabindex="1" size="30" placeholder="Ton Pseudo" name="username" class="input_text ipbfs_login_input ipbfs_luser" id="ips_username">
    </div>
                            </div>
                            <div class="ipbfs_login_col">
    <span class="right desc lighter blend_links">
     
    <a href="/profile?mode=sendpassword">Mot de passe oublié?</a></span>

                                <strong><label for="ips_password">Mot de passe</label></strong>
                                <div class="ipsField_content">
    <input type="password" tabindex="2" size="30" placeholder="Mot de passe" name="password" class="input_text ipbfs_login_input ipbfs_lpassword" id="ips_password"><br>
                                    </div>
                            </div>
                        </div>
                        <div class="clearfix">
                            <div class="ipbfs_login_col">
                                <input type="checkbox" class="input_check left" value="1" name="autologin" checked="checked" id="autologin">
                                <div style="padding-left: 20px;">
    <label for="autologin"> <strong>Se souvenir de moi</strong> &nbsp;
                                       
                                    </label>
                                </div>
                            </div>
                         
                        </div>
                        <div class="ipsForm_submit ipsForm_center clear" style="height: 29px;">
    <span title="Se connecter au forum">
      <input type="submit" name="login" value="Ouvrir la session" class="input_submit">
      </span>
                            <input name="redirect" type="hidden" value="" />                 
                        </div>
                    </form>
                </div>
            </div>
          <div id="sign_in_popup_close" class="popupClose clickable"title="Fermer la boite de connexion">
    <img alt="x" src="http://i78.servimg.com/u/f78/18/17/62/92/close_10.png" onclick="show_popup('sign_in_popup_popup');"/>
          </div>
        </div>
    <script type="text/javascript">
    $(document).ready(function() {
    $('#sign_in_popup_close').click(function() {
      $('#fa_toolbar').fadeIn('slow');
      })
     

         
    });
    </script>
                       
        <script type="text/javascript">
          //<![CDATA[
          $(document).ready(function() {
              $('#sign_in').attr('href', '#').attr('onclick', "show_popup('sign_in_popup_popup');");
              /*
              $('#sign_in').click(function() {
                sign_in_popup();
         
              });
              */
          });
          function show_popup(id) {
              var $oObj = $('#'+id);
              if ($oObj.css('display') == 'none') {
                $oObj.add('#document_modal').fadeIn('slow');
          $('#fa_toolbar').fadeOut('slow');
                $("input:text:eq(0):visible").focus();
              } else {
                $oObj.add('#document_modal').fadeOut('slow');
              }
          }
          //]]>
        </script>
    <style>
      /*DEBUT POP UP*/
     

    #document_modal
    {
    background-image:url(' http://i38.servimg.com/u/f38/19/03/94/82/the-ma10.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    }
    #M14_Popup_logo
    {
    position:fixed;
    width:989px;
    height: 244px;
    top:-44px;
    left:100px;
    background-image:url('http://i38.servimg.com/u/f38/19/03/94/82/logo1_10.gif');
    background-repeat: no-repeat;
    background-position:left top;
    }
    .popupWrapper
    {
    color:#ffffff ! important;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5) !important;
    background: #ffffff;
    padding: 8px !important;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    border-radius: 5px !important;
    }

      /*Partie du Pseudo*/
    #sign_in_popup_inner .ipbfs_login
    {

    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    font-style:italic;
    font-weight:bold;
    font-size: 13px;
    color:#ffffff !important;
    }
     

      /*Le contenu de la pop up*/
    .popupInner
    {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    background: #141414;
    overflow-x: hidden;
    overflow-y: auto;
    width: 500px;
    }
     
     
      /*Partie haute*/
    .popupInner div.M14_ConnecT_titre
    {
    font-size:12px !important;
    font-weight:bold;
    font-style:italic !important;
    font-family: "Lucida Bright", Georgia, serif;
    border-bottom: 1px solid #fff;
    color:#fff ! important;
    padding: 8px 10px 9px;
    text-align:center;
    } 

         
    .ipbfs_login_row {overflow: hidden; border-top: 0 none;}
    .ipbfs_login_col {float: left;padding: 15px 10px;width: 314px;}
    .right {float: right;}
    .right a{color:#ffffff !important;}
    .ipbfs_login_col a{ text-decoration:none !important;}


    ::-webkit-input-placeholder { color:#fff;font-size:11px ; font-style:italic;font-weight:normal !important;}
    ::-moz-placeholder { color:#fff;font-size:11px ; font-style:italic;font-weight:normal !important;}
    :-ms-input-placeholder { color:#fff;font-size:11px ; font-style:italic;font-weight:normal !important;}
    input:-moz-placeholder { color:#fff;font-size:11px ; font-style:italic;font-weight:normal !important;}
         
    #sign_in_popup_inner input.ipbfs_luser {
                background-image: url("http://i39.servimg.com/u/f39/11/26/21/37/user15.png") !important;
                background-position: 3px 60% !important;
                background-repeat: no-repeat !important;
            }
    #sign_in_popup_inner .ipbfs_login_input {
                font-size: 14px !important;
                margin-top: 10px !important;
                padding: 6px 0 6px 28px !important;
                width: 284px !important;
            }
    #sign_in_popup_inner input.ipbfs_luser ,#sign_in_popup_inner input.ipbfs_lpassword , #sign_in_popup_inner .ipsTagBox_wrapper, #sign_in_popup_inner textarea {
                background: none repeat scroll 0 0 #FCFCFC;
                border: 1px solid #D4D4D4;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
                color: #ffffff;
                padding: 6px;
               
            }

    #sign_in_popup_inner  input.ipbfs_lpassword
      {
                background-image: url("http://i39.servimg.com/u/f39/11/26/21/37/key10.png") !important;
                background-position: 3px 60% !important;
                background-repeat: no-repeat !important;
            }
            .clearfix:after {
                clear: both;
                content: ".";
                display: block;
                height: 0;
                overflow: hidden;
                visibility: hidden;
            }
    .left {float: left;}
    .ipbfs_login .ipsForm_submit {margin-top: 0;}
    .ipbfs_login  {margin: 0;}
    img, .input_check, .input_radio {vertical-align: middle;}
    input[name="login"].input_submit ,
    input.submit_input.clickable
    {background:transparent !important;color:#ffffff !important;font-weight:bold;border:none !important;}
    .ipsForm_center {text-align: center !important;}
     
      /*Partie basse*/
    .ipsForm_submit
    {
      cursor:pointer;
    border-top: 1px solid #fff;
    margin-top: 25px;
    padding: 5px 10px;
    text-align: right;
    font-family: "Lucida Bright", Georgia, serif;
    }
    .clear {clear: both;}
        /*Le bouton de fermeture pop up*/
    .popupClose {position: absolute;right: 20px;top: 20px;width: 13px;height: 13px;cursor:pointer;}

    a#sign_in.M14_title{margin-top:8px;text-decoration:none !important;}

    #sign_in_popup_inner input {color:#000000 !important;}
    /*FIN DE LA POP UP*/
    </style>
    <!-- #endregion sign_in_popup -->

le css ,
ps: j'ai laisser le rouge et le decalage du tableau , si un jour tu veut l'utiliser il est la ..
mais le code est neutraliser ,
Code:
  /*******début tableau accueil mazrunner**************R-max,graphcode*******/
/***********couleur rouge*********/
/*.mazrunner_1 a{
  -webkit-transition: all 2.5s ease-in ;
  -moz-transition: all 2.5s ease-in ;
  -ms-transition: all 2.5s ease-in ;
  -o-transition: all 2.5s ease-in ;
  transition: all 2.5s ease-in ;
}*/
  /*****************couleur rouge hover************/
/*.mazrunner_1:hover{
  background-color:#ff0000;
  -webkit-transition: all 2.5s ease-in ;
  -moz-transition: all 2.5s ease-in ;
  -ms-transition: all 2.5s ease-in ;
  -o-transition: all 2.5s ease-in ;
  transition: all 2.5s ease-in ;
}*/
  /*********blanc shadow***********/
/* .mazrunner_1 a {
  -webkit-transition: all 1.5s ease-in ;
  -moz-transition: all 1.5s ease-in ;
  -ms-transition: all 1.5s ease-in ;
  -o-transition: all 1.5s ease-in ;
  transition: all 1.5s ease-in ;
}^/
/*******blanc shadow hover**********/
/*.mazrunner_1:hover{
  box-shadow:0px 10px 30px #ffffff;
    -webkit-transition: all 1.5s ease-in ;
  -moz-transition: all 1.5s ease-in ;
  -ms-transition: all 1.5s ease-in ;
  -o-transition: all 1.5s ease-in ;
  transition: all 1.5s ease-in ;
}*/
/**********tableau**********/
/*.mazrunner_1 a {
  -webkit-transition: -webkit-transform 1s ease-in;
  -mz-transition: -mz-transform  1s ease-in;
  -0-transition: -0-transform 1s ease-in;
  transition: transform 1s ease-in;
}*/
/**********tableau***********/
/*.mazrunner_1:hover{
 -webkit-transform: translatey(10px);
  -moz-transform:translatey(10px);
  -o-transform: translatey(10px);
  transform: translatey(10px);
  }*/
  /**********mazrunner*******/
.mazrunner_2 a{
  float:left !important;
  margin-top:5px;

    -webkit-transition: -webkit-transform 1s ease-in;
  -mz-transition: -mz-transform  1s ease-in;
  -0-transition: -0-transform 1s ease-in;
  transition: transform 1s ease-in;
  }
 .mazrunner_2:hover{
  margin-top:5px;
  float:left !important;
 -webkit-transform: rotate(5deg);
  -moz-transform:rotate:(5deg);
  -o-transform: rotate(5deg)
  transform: rotate(5deg)
 
  -webkit-transition: -webkit-transform 1s ease-in-out;
  -moz-transition: -moz-transform  1s ease-in-out;
  -o-transition: -o-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  }
/*********labyrinthe**********/
.mazrunner_3 a{ 
  float:right !important;
  margin-top:5px;
  -webkit-transition: -webkit-transform 1s ease-in;
  -mz-transition: -mz-transform  1s ease-in;
  -0-transition: -0-transform 1s ease-in;
  transition: transform 1s ease-in;
    }
 .mazrunner_3:hover{
  float:right !important;
  margin-top:5px;
 -webkit-transform: rotate(5deg);
  -moz-transform:rotate(5deg);
  -o-transform: rotate(5deg);
  transform: rotate(5deg);
 
  -webkit-transition: -webkit-transform 1s ease-in-out;
  -moz-transition: -moz-transform  1s ease-in-out;
  -o-transition: -o-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  }
/*********logo rotate rond**********/
.mazrunner_4 a{
 -webkit-transition: -webkit-transform 1s ease-in;
  -mz-transition: -mz-transform  1s ease-in;
  -0-transition: -0-transform 1s ease-in;
  transition: transform 1s ease-in;
    }
 .mazrunner_4:hover{
 transform-width:75px !important;
  transform-height:75px !important;
 
 -webkit-transform: rotate(1500deg);
  -moz-transform:rotate(1500deg);
  -o-transform: rotate(1500deg);
  transform: rotate(1500deg);
 
  -webkit-transition: -webkit-transform 1s ease-in-out;
  -moz-transition: -moz-transform  1s ease-in-out;
  -o-transition: -o-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  }
/***************fin de tableau mazrunner*****************R-max graphcode**********/

 
voila tiens moi au courent ....

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avoir une barre "suivez l'actualité du forum" en dessous de la barre de navigation

Message par horusbk le Lun 16 Mar 2015 - 20:58

yes ça marche !

EDIT : je mets en résolu et pour la modification du code (animations) on voit ça par MP.

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum