Connexion

Récupérer mon mot de passe

Derniers sujets
» les Histoires Belge
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Aujourd'hui à 7:34 par Quad Daniel

» histoire du Jour sans fin
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Hier à 14:04 par Quad Daniel

» Coca-Cola (histoire)
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Hier à 9:33 par bildil62

» Sœur Mathématiques et Sœur Logique
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Sam 22 Juin 2019 - 15:59 par bildil62

» Les deux bons potes "histoire"
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Ven 21 Juin 2019 - 19:45 par soleda

» *RESOLU*[PhpBB2] Onglet sur page d’accueil
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Mer 19 Juin 2019 - 16:38 par Milouze14

» Le spationaute belge
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Mer 19 Juin 2019 - 16:26 par Milouze14

» *RESOLU*[PhpBB2] Aide mise en forme page d’accueil merci
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Dim 16 Juin 2019 - 8:33 par Milouze14

» *RESOLU*[PhpBB2] Chatbox / Réinitialiser
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Ven 14 Juin 2019 - 19:55 par Milouze14

» *RESOLU*[PhpBB2] Bloquer les IP
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Jeu 13 Juin 2019 - 18:36 par Milouze14

» Les réseaux sociaux
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Mer 12 Juin 2019 - 7:51 par Romain

» [PhpBB2] Barre navigation supplémentaire
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Dim 9 Juin 2019 - 19:32 par Milouze14

» *RESOLU*[Invision] Réduction image avec clic agrandissement
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Sam 8 Juin 2019 - 19:07 par Milouze14

» Histoire de Blondes Sans Fin
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Sam 8 Juin 2019 - 19:01 par Quad Daniel

» *RESOLU*[PhpBB3] Interdiction de citer le dernier message
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Ven 7 Juin 2019 - 19:04 par Milouze14

» Règlement de l'entraide Forumactif
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Ven 7 Juin 2019 - 14:16 par jakes

» *RESOLU*[PhpBB2] [Toutes versions] Activer la prévisualisation directe
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Mer 5 Juin 2019 - 18:52 par Milouze14

» [PHPBB3] Afficher une réponse automatique style staff
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Lun 3 Juin 2019 - 17:35 par Milouze14

» *RESOLU*[PhpBB2] Changer un message quand un membre ne peut pas répondre à un sujet
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Jeu 30 Mai 2019 - 19:38 par Milouze14

» [Toutes versions] Activer la prévisualisation directe
*RESOLU* [PHPBB2] horizontal menu / iframe / hover Clock-10Jeu 30 Mai 2019 - 9:19 par photoclic

*RESOLU* [PHPBB2] horizontal menu / iframe / hover

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

avatar
ThunderTB
Milouzien

MessageThunderTB le Mer 19 Sep 2018 - 22:06

Salut mes ami(es) je viens vous consulté à nouveau puisque j'ai besoin du coup de pouce pour l'installation
du bar menu sur mon forum : http://hf.hockeyhq.net/HockeyFederation/Ronde2/QMHL/Sliding-Hamburger-Navigation/slide.html

Rendu sur le forum : http://qmhl.forum-canada.com/

Mon souci est que lorsque j'implante la bar menu en iframe je dois lui donner un * Width et Height * pour que les
sous divisions li et ul s'affiche sur mon forum par contre tout ce que qui est sous la iframe c'est à dire logos , catégories etc...
deviennent inclickable . J'ai tenté plusieurs manipulation avec les inline-block ,  z-index ainsi que les position adsolute , relative par contre
j'aurais aimer l'intégré en fixed ...

Voici en imagé mon problème : https://i.servimg.com/u/f84/16/67/19/10/screen10.png
donc tout ce qui se retrouve dans la section rouge sous le menu est inclickable sa devient un problème
encore plus grand lorsque je veux mettre ce menu en position:fixed , le iframe et ces dimensions semble suivre le forum .
En gros ce que j'aimerais faire serais de lui donner une grandeur avant le click(onclick) et après le click pour les
sous catégorie qui prennent tout la place sur mon forum .

Un gros merci encore une fois à Phuillipe et sont équipe .
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Jeu 20 Sep 2018 - 16:12

Hello Franck,
hum, c'est tout à fait logique mon ami et tant que le contenu de ton iframe restera dans une page web, le soucis sera toujours d'actualité.

Il faut pour cela déposer tout cela dans le template overall_header:
Affichage/Templates/Général/ overall_header

avatar
ThunderTB
Milouzien

MessageThunderTB le Jeu 20 Sep 2018 - 17:17

Salut Philippe , je suis pas sur de comprendre ta réponse
en gros tu me dit que rien ne peu être fait ? puisque mon iframe est déja
dans le overall header .

overal header
Code:
<br/>
<!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>
<div class="topplus">
<!DOCTYPE html>
<html>
<body>
<iframe src="http://hf.hockeyhq.net/HockeyFederation/Ronde2/QMHL/Sliding-Hamburger-Navigation/slide.html" width="950" height="800" scrolling="no" frameborder="0"></iframe>
</body>
</html>
</div>
  <div class="HFLOGO"><a href="http://qmhl.forum-canada.com/"></a></div>
    <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>
    <!-- BEGIN switch_recent_jquery -->
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    <!-- END switch_recent_jquery -->
    <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> 
    {RICH_SNIPPET_GOOGLE}

    <!-- BEGIN switch_fb_login -->
    <script src="https://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="{JQUERY_DIR}ticker/ticker.css" />
    <script src="{JQUERY_DIR}/ticker/ticker.js" type="text/javascript"></script>
    <!-- END switch_ticker -->

    <!-- BEGIN switch_ticker_new -->
    <script src="{JQUERY_DIR}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[
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', '{G_ANALYTICS_ID}', 'auto');
    ga('send', 'pageview');
    ga('set', 'anonymizeIp', true);

    <!-- BEGIN google_analytics_code_bis -->
    ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
    ga('bis.send', 'pageview');
    ga('bis.set', 'anonymizeIp', true);
    <!-- END google_analytics_code_bis -->
    //]]>
    </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}"><center><div class="navig">{GENERATED_NAV_BAR}</div></center>
    <!-- BEGIN hitskin_preview -->
    <div id="hitskin_preview" style="display: block;">
        <h1><img src="https://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="https://{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_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>

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

avatar
ThunderTB
Milouzien

MessageThunderTB le Jeu 20 Sep 2018 - 17:27

Le problème lorsque j'envoie le tout sans le iframe comme ceci :
Code:
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" type="text/css" href="http://hf.hockeyhq.net/HockeyFederation/Ronde2/QMHL/Sliding-Hamburger-Navigation/css/cmenu.css">
   <link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Kaushan+Script|Permanent+Marker|Rajdhani|Ropa+Sans|Shadows+Into+Light|Titillium+Web" rel="stylesheet">
</head>
<body>
   <div class="menu">
  <div class="close-menu">
<img src="https://i84.servimg.com/u/f84/16/67/19/10/plus410.png">
  </div>
<iframe style="background:none transparent; border: currentColor; border-image: none; width: 950px; height:auto; overflow: hidden;" scrolling="no" src="http://hf.hockeyhq.net/HockeyFederation/Ronde2/QMHL/css/"></iframe>
</div>
   <div id="b-wrap">
      <div class="mhead">
         <img class="menu-ham" src="https://i84.servimg.com/u/f84/16/67/19/10/plus314.png">
      </div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="http://hf.hockeyhq.net/HockeyFederation/Ronde2/QMHL/Sliding-Hamburger-Navigation/js/menu.js"></script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (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>
</body>
</html>

est que le medu s'affiche en frames chaque fois que je *load* la/une page sur le forum
en gros serait-il possible de faire en sorte que le memu prenne quelque seconde supplémentaire avant de s'afficher ? exemple faire en sorte que le menu load en
invisible est lorsque se serais fait il pourrais s'afficher disons 2/3 seconde pour
évité de le voir se construire en quelque sorte .

Je suis pas sur que je m'exprime bien ici , mais en gros le menu prend du temp
à s'afficher et du coup ce n'est pas beau .
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Jeu 20 Sep 2018 - 17:47

Hum cela me parait compliqué Franck,
je vais voir a déposer tout le contenu dans le template car on fait appel a un script et ensuite à une feuille de style respectivement hébergé.


Milouze14
Milouze14
Fondateur

MessageMilouze14 le Jeu 20 Sep 2018 - 17:57

Tu peux remplacer le contenu de ta page html créée par ce contenu stp:

Code:
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" type="text/css" href="http://hf.hockeyhq.net/HockeyFederation/Ronde2/QMHL/Sliding-Hamburger-Navigation/css/cmenu.css">
   <link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Kaushan+Script|Permanent+Marker|Rajdhani|Ropa+Sans|Shadows+Into+Light|Titillium+Web" rel="stylesheet">
</head>
<body>
<div class="menu">
  <div class="close-menu">
    <img src="https://i.servimg.com/u/f84/16/67/19/10/plus410.png"/>
  </div>
<iframe style="background:none transparent; border: currentColor; border-image: none; width: 950px; height:auto; overflow: hidden;" scrolling="no" src="http://hf.hockeyhq.net/HockeyFederation/Ronde2/QMHL/css/"></iframe>
</div>
   <div id="b-wrap">
      <div class="mhead">
                  <img class="menu-ham" src="https://i.servimg.com/u/f84/16/67/19/10/plus314.png"/>
      </div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
  $(function(){
$('.menu-ham').click(function () {
$('.menu-ham').fadeOut();
$('.close-menu').hide().delay(2000).fadeIn();
$('.menu').find('iframe').hide().delay(2000).fadeIn();
$('.menu').animate({left: '0px'}, 100)
   });

$('.close-menu').click(function () {
  $('.menu-ham').fadeIn();
$('.menu').animate({left: '-950px'}, 100)
   });
  });
          </script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (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>
</body>
</html>
fascicularia
fascicularia
Milouzien

Messagefascicularia le Jeu 20 Sep 2018 - 18:00

les liens ne sont pas renseignés. si j'ai bien compris, il s'agit des liens contenus dans 5 columns. en analysant aussi bien sur la page html que sur le forum on a :
Code:
<a href="#">Read more...</a>
avatar
ThunderTB
Milouzien

MessageThunderTB le Jeu 20 Sep 2018 - 18:14

Resalut , je viens tout juste de l'instalé et comme tu peux le constaté en se moment ont dirais que mon iframe à l'intérieur de mon code semble causé problème en se moment .
je vais donc tenté de le sortir de sont iframe pour tout mettre en html .

avatar
ThunderTB
Milouzien

MessageThunderTB le Jeu 20 Sep 2018 - 18:15

@fascicularia a écrit:les liens ne sont pas renseignés. si j'ai bien compris, il s'agit des liens contenus dans 5 columns. en analysant aussi bien sur la page html que sur le forum on a :
Code:
<a href="#">Read more...</a>

Les liens ne sont pas fonctionnelle pour le moment .
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Jeu 20 Sep 2018 - 18:34

Hum, je vais regarder pour l'intégrer directement dans le template Franck
avatar
ThunderTB
Milouzien

MessageThunderTB le Jeu 20 Sep 2018 - 18:42

Je viens d'installer le tout , honnêtement tout semble fonctionner mais comme
c'est souvent le cas un autre problème survient c'est à dire que tout mon forum à
disparu :P mais ou est passer mon cadre forum ?

voici le code utiliser en se moment :
Code:
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" type="text/css" href="http://hf.hockeyhq.net/HockeyFederation/Ronde2/QMHL/Sliding-Hamburger-Navigation/css/cmenu.css">
   <link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Kaushan+Script|Permanent+Marker|Rajdhani|Ropa+Sans|Shadows+Into+Light|Titillium+Web" rel="stylesheet">
</head>
<body>
   <div class="menu">
  <div class="close-menu">
<img src="https://i.servimg.com/u/f84/16/67/19/10/plus410.png">
  </div>
<iframe style="background:transparent; border: currentColor; border-image: none; width: 950px; height:auto; overflow: hidden;" scrolling="no" src="http://hf.hockeyhq.net/HockeyFederation/Ronde2/QMHL/css/"></iframe>
</div>
   <div id="b-wrap">
      <div class="mhead">
         <img class="menu-ham" src="https://i.servimg.com/u/f84/16/67/19/10/plus314.png">
      </div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="http://hf.hockeyhq.net/HockeyFederation/Ronde2/QMHL/Sliding-Hamburger-Navigation/js/menu.js"></script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (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>
</body>
</html>
avatar
ThunderTB
Milouzien

MessageThunderTB le Jeu 20 Sep 2018 - 18:43

Un gros merci Phil !! hinhin
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Jeu 20 Sep 2018 - 19:00

Ton template contient beaucoup d'erreurs mon ami, en partant du début, on distingue un saut de ligne:
Code:
<br/>
<!DOCTYPE html P

Puis ceci:
Code:
<div class="topplus">
<!DOCTYPE html>
<html>
<body>
<iframe src="http://hf.hockeyhq.net/HockeyFederation/Ronde2/QMHL/Sliding-Hamburger-Navigation/slide.html" width="950" height="800" scrolling="no" frameborder="0"></iframe>
</body>
</html>
</div>
  <div class="HFLOGO"><a href="http://qmhl.forum-canada.com/"></a></div>

Tout ce qui concerne les balises doit se trouver dans le body de la page.

Ou as tu trouver ce slide Franck ?
On va trouver une solution pour tout déposer dans le template clin oeil car en partant de cette idée on pourra gérer tout de A à Z clin oeil
avatar
ThunderTB
Milouzien

MessageThunderTB le Jeu 20 Sep 2018 - 19:13

Milouze14
Milouze14
Fondateur

MessageMilouze14 le Jeu 20 Sep 2018 - 19:19

Donc si on se base sur celui-ci:
http://css3lib.alloyteam.com/uilib/menu_nav/demo6/index.html

Tu pourras modifier son apparence ensuite ?
avatar
ThunderTB
Milouzien

MessageThunderTB le Jeu 20 Sep 2018 - 19:47

Oui , c'est exactement ce que j'ai fait ...
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Ven 21 Sep 2018 - 5:06

Hello Franck,
alors, voici ton template modifié:

Comme prévu, j'ai donc supprimé l'iframe pour arriver a quelque chose de concret via le template.
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>
        <!-- BEGIN switch_recent_jquery -->
        <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
        <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
        <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
        <!-- END switch_recent_jquery -->
        <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
        {RICH_SNIPPET_GOOGLE}

        <!-- BEGIN switch_fb_login -->
        <script src="https://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="{JQUERY_DIR}ticker/ticker.css" />
        <script src="{JQUERY_DIR}/ticker/ticker.js" type="text/javascript"></script>
        <!-- END switch_ticker -->

        <!-- BEGIN switch_ticker_new -->
        <script src="{JQUERY_DIR}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[
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', '{G_ANALYTICS_ID}', 'auto');
        ga('send', 'pageview');
        ga('set', 'anonymizeIp', true);

        <!-- BEGIN google_analytics_code_bis -->
        ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
        ga('bis.send', 'pageview');
        ga('bis.set', 'anonymizeIp', true);
        <!-- END google_analytics_code_bis -->
        //]]>
        </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}"><center><div class="navig">{GENERATED_NAV_BAR}</div></center>
        <!-- BEGIN hitskin_preview -->
        <div id="hitskin_preview" style="display: block;">
            <h1><img src="https://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="https://{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}
<script>
    $(function(){
$('.menu-ham').click(function(){
$('.menu-ham').fadeOut();
$('.close-menu').hide().delay(2000).fadeIn();
$('#menu').delay(2000).fadeIn();
$('#menu').animate({left: '0px'}, 100)
});

$('.close-menu').click(function(){
$('.close-menu').hide();
$('.menu-ham').fadeIn();
$('#menu').animate({left: '-700px'}, 100)
  });
  });
  </script>
  <div class="menu">
<img class="close-menu"src="https://i.servimg.com/u/f84/16/67/19/10/plus410.png"/>
<img class="menu-ham" src="https://i.servimg.com/u/f84/16/67/19/10/plus314.png"/>
<ul id="menu">
   
    <li><a href="#" class="drop">Home</a><!-- Begin Home Item -->
   
        <div class="dropdown_2columns"><!-- Begin 2 columns container -->
   
            <div class="col_2">
                <h2>Welcome !</h2>
            </div>
   
            <div class="col_2">
                <p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>           
                <p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>           
            </div>
   
            <div class="col_2">
                <h2>Cross Browser Support</h2>
            </div>
           
            <div class="col_1">
                <img src="img/browsers.png" width="125" height="48" alt="" />
            </div>
           
            <div class="col_1">
                <p>This mega menu has been tested in all major browsers.</p>
            </div>
         
        </div><!-- End 2 columns container -->
   
    </li><!-- End Home Item -->

    <li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->
   
        <div class="dropdown_5columns"><!-- Begin 5 columns container -->
       
            <div class="col_5">
                <h2>This is an example of a large container with 5 columns</h2>
            </div>
           
            <div class="col_1">
                <p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>
            </div>
           
            <div class="col_1">
                <p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>
            </div>
           
            <div class="col_1">
                <p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>
            </div>
           
            <div class="col_1">
                <p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
            </div>
           
            <div class="col_1">
                <p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>
            </div>
       
            <div class="col_5">
                <h2>Here is some content with side images</h2>
            </div>
         
            <div class="col_3">
           
                <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p>
       
                <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p>
           
            </div>
           
            <div class="col_2">
           
                <p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>
           
            </div>
       
        </div><!-- End 5 columns container -->
   
    </li><!-- End 5 columns Item -->

    <li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item -->
   
        <div class="dropdown_4columns"><!-- Begin 4 columns container -->
       
            <div class="col_4">
                <h2>This is a heading title</h2>
            </div>
           
            <div class="col_1">
           
                <h3>Some Links</h3>
                <ul>
                    <li><a href="#">ThemeForest</a></li>
                    <li><a href="#">GraphicRiver</a></li>
                    <li><a href="#">ActiveDen</a></li>
                    <li><a href="#">VideoHive</a></li>
                    <li><a href="#">3DOcean</a></li>
                </ul> 
               
            </div>
   
            <div class="col_1">
           
                <h3>Useful Links</h3>
                <ul>
                    <li><a href="#">NetTuts</a></li>
                    <li><a href="#">VectorTuts</a></li>
                    <li><a href="#">PsdTuts</a></li>
                    <li><a href="#">PhotoTuts</a></li>
                    <li><a href="#">ActiveTuts</a></li>
                </ul> 
               
            </div>
   
            <div class="col_1">
           
                <h3>Other Stuff</h3>
                <ul>
                    <li><a href="#">FreelanceSwitch</a></li>
                    <li><a href="#">Creattica</a></li>
                    <li><a href="#">WorkAwesome</a></li>
                    <li><a href="#">Mac Apps</a></li>
                    <li><a href="#">Web Apps</a></li>
                </ul> 
               
            </div>
   
            <div class="col_1">
           
                <h3>Misc</h3>
                <ul>
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Logo</a></li>
                    <li><a href="#">Flash</a></li>
                    <li><a href="#">Illustration</a></li>
                    <li><a href="#">More...</a></li>
                </ul> 
               
            </div>
           
        </div><!-- End 4 columns container -->
   
    </li><!-- End 4 columns Item -->



</ul>
  </div>
        <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>

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

Puis la c.s.s:
Code:
img.close-menu,img.menu-ham{cursor:pointer;width:24px;height:24px;position:absolute;margin-top:-16px;}
img.close-menu{display:none;margin-left:450px;z-index:999;}
#menu {
  position: fixed;
  top:30px;
  left:-700px;
    margin-left: -10px;
    margin-top:-6px;
    list-style: none;
    width: 600px;
    height: 90px;
    padding: 0px 20px 0px 20px;
    background: no-repeat;
        background-image: none;
    background-image: url("https://i.servimg.com/u/f84/16/67/19/10/barpan10.png");
    -moz-box-shadow: inset 0px 0px 1px #edf9ff;
    -webkit-box-shadow: inset 0px 0px 1px #edf9ff;
    box-shadow: inset 0px 0px 1px #edf9ff;
}


#menu li {
   float:left;
   display:block;
   text-align:center;
   position:relative;
   padding: 4px 10px 4px 10px;
   margin-right:30px;
   margin-top:7px;
   border:none;
}

#menu li:hover {
   border: 1px solid #777777;
   padding: 4px 9px 4px 9px;
   
   /* Background color and gradients */
   
   background: #F4F4F4;
   background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
   
   /* Rounded corners */
   
   -moz-border-radius: 5px 5px 0px 0px;
   -webkit-border-radius: 5px 5px 0px 0px;
   border-radius: 5px 5px 0px 0px;
}

#menu li a {
   font-family:Arial, Helvetica, sans-serif;
   font-size:14px;
   color: #EEEEEE;
   display:block;
   outline:0;
   text-decoration:none;
   text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
   color:#161616;
   text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
   padding-right:21px;
   background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
   background:url("img/drop.png") no-repeat right 7px;
}

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
   margin:4px auto;
   float:left;
   position:absolute;
   left:-999em; /* Hides the drop down */
   text-align:left;
   padding:10px 5px 10px 5px;
   border:1px solid #777777;
   border-top:none;
   
   /* Gradient background */
   background:#F4F4F4;
   background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

   /* Rounded Corners */
   -moz-border-radius: 0px 5px 5px 5px;
   -webkit-border-radius: 0px 5px 5px 5px;
   border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
   left:-1px;
   top:auto;
}

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
   display:inline;
   float: left;
   position: relative;
   margin-left: 5px;
   margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

#menu .menu_right {
   float:right;
   margin-right:0px;
}
#menu li .align_right {
   /* Rounded Corners */
   -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}

#menu li:hover .align_right {
   left:auto;
   right:-1px;
   top:auto;
}

#menu p, #menu h2, #menu h3, #menu ul li {
   font-family:Arial, Helvetica, sans-serif;
   line-height:21px;
   font-size:12px;
   text-align:left;
   text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
   font-size:21px;
   font-weight:400;
   letter-spacing:-1px;
   margin:7px 0 14px 0;
   padding-bottom:14px;
   border-bottom:1px solid #666666;
}
#menu h3 {
   font-size:14px;
   margin:7px 0 14px 0;
   padding-bottom:7px;
   border-bottom:1px solid #888888;
}
#menu p {
   line-height:18px;
   margin:0 0 10px 0;
}

#menu li:hover div a {
   font-size:12px;
   color:#015b86;
}
#menu li:hover div a:hover {
   color:#029feb;
}


.strong {
   font-weight:bold;
}
.italic {
   font-style:italic;
}

.imgshadow { /* Better style on light background */
   background:#FFFFFF;
   padding:4px;
   border:1px solid #777777;
   margin-top:5px;
   -moz-box-shadow:0px 0px 5px #666666;
   -webkit-box-shadow:0px 0px 5px #666666;
   box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
   width:auto;
   float:left;
   margin:5px 15px 5px 5px;
}

#menu li .black_box {
   background-color:#333333;
   color: #eeeeee;
   text-shadow: 1px 1px 1px #000;
   padding:4px 6px 4px 6px;

   /* Rounded Corners */
   -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

   /* Shadow */
   -webkit-box-shadow:inset 0 0 3px #000000;
   -moz-box-shadow:inset 0 0 3px #000000;
   box-shadow:inset 0 0 3px #000000;
}

#menu li ul {
   list-style:none;
   padding:0;
   margin:0 0 12px 0;
}
#menu li ul li {
   font-size:12px;
   line-height:24px;
   position:relative;
   text-shadow: 1px 1px 1px #ffffff;
   padding:0;
   margin:0;
   float:none;
   text-align:left;
   width:130px;
}
#menu li ul li:hover {
   background:none;
   border:none;
   padding:0;
   margin:0;
}

#menu li .greybox li {
   background:#F4F4F4;
   border:1px solid #bbbbbb;
   margin:0px 0px 4px 0px;
   padding:4px 6px 4px 6px;
   width:116px;

   /* Rounded Corners */
   -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
#menu li .greybox li:hover {
   background:#ffffff;
   border:1px solid #aaaaaa;
   padding:4px 6px 4px 6px;
   margin:0px 0px 4px 0px;
}


Milouze14
Milouze14
Fondateur

MessageMilouze14 le Ven 21 Sep 2018 - 5:09

Ou avec la css directement inclue dans le template:
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>
        <!-- BEGIN switch_recent_jquery -->
        <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
        <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
        <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
        <!-- END switch_recent_jquery -->
        <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
        {RICH_SNIPPET_GOOGLE}

        <!-- BEGIN switch_fb_login -->
        <script src="https://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="{JQUERY_DIR}ticker/ticker.css" />
        <script src="{JQUERY_DIR}/ticker/ticker.js" type="text/javascript"></script>
        <!-- END switch_ticker -->

        <!-- BEGIN switch_ticker_new -->
        <script src="{JQUERY_DIR}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[
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', '{G_ANALYTICS_ID}', 'auto');
        ga('send', 'pageview');
        ga('set', 'anonymizeIp', true);

        <!-- BEGIN google_analytics_code_bis -->
        ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
        ga('bis.send', 'pageview');
        ga('bis.set', 'anonymizeIp', true);
        <!-- END google_analytics_code_bis -->
        //]]>
        </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}"><center><div class="navig">{GENERATED_NAV_BAR}</div></center>
        <!-- BEGIN hitskin_preview -->
        <div id="hitskin_preview" style="display: block;">
            <h1><img src="https://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="https://{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}
<script>
    $(function(){
$('.menu-ham').click(function(){
$('.menu-ham').fadeOut();
$('.close-menu').hide().delay(2000).fadeIn();
$('#menu').delay(2000).fadeIn();
$('#menu').animate({left: '0px'}, 100)
});

$('.close-menu').click(function(){
$('.close-menu').hide();
$('.menu-ham').fadeIn();
$('#menu').animate({left: '-700px'}, 100)
  });
  });
  </script>
  <div class="menu">
<img class="close-menu"src="https://i.servimg.com/u/f84/16/67/19/10/plus410.png"/>
<img class="menu-ham" src="https://i.servimg.com/u/f84/16/67/19/10/plus314.png"/>
<ul id="menu">
   
    <li><a href="#" class="drop">Home</a><!-- Begin Home Item -->
   
        <div class="dropdown_2columns"><!-- Begin 2 columns container -->
   
            <div class="col_2">
                <h2>Welcome !</h2>
            </div>
   
            <div class="col_2">
                <p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>           
                <p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>           
            </div>
   
            <div class="col_2">
                <h2>Cross Browser Support</h2>
            </div>
           
            <div class="col_1">
                <img src="img/browsers.png" width="125" height="48" alt="" />
            </div>
           
            <div class="col_1">
                <p>This mega menu has been tested in all major browsers.</p>
            </div>
         
        </div><!-- End 2 columns container -->
   
    </li><!-- End Home Item -->

    <li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->
   
        <div class="dropdown_5columns"><!-- Begin 5 columns container -->
       
            <div class="col_5">
                <h2>This is an example of a large container with 5 columns</h2>
            </div>
           
            <div class="col_1">
                <p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>
            </div>
           
            <div class="col_1">
                <p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>
            </div>
           
            <div class="col_1">
                <p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>
            </div>
           
            <div class="col_1">
                <p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
            </div>
           
            <div class="col_1">
                <p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>
            </div>
       
            <div class="col_5">
                <h2>Here is some content with side images</h2>
            </div>
         
            <div class="col_3">
           
                <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p>
       
                <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p>
           
            </div>
           
            <div class="col_2">
           
                <p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>
           
            </div>
       
        </div><!-- End 5 columns container -->
   
    </li><!-- End 5 columns Item -->

    <li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item -->
   
        <div class="dropdown_4columns"><!-- Begin 4 columns container -->
       
            <div class="col_4">
                <h2>This is a heading title</h2>
            </div>
           
            <div class="col_1">
           
                <h3>Some Links</h3>
                <ul>
                    <li><a href="#">ThemeForest</a></li>
                    <li><a href="#">GraphicRiver</a></li>
                    <li><a href="#">ActiveDen</a></li>
                    <li><a href="#">VideoHive</a></li>
                    <li><a href="#">3DOcean</a></li>
                </ul> 
               
            </div>
   
            <div class="col_1">
           
                <h3>Useful Links</h3>
                <ul>
                    <li><a href="#">NetTuts</a></li>
                    <li><a href="#">VectorTuts</a></li>
                    <li><a href="#">PsdTuts</a></li>
                    <li><a href="#">PhotoTuts</a></li>
                    <li><a href="#">ActiveTuts</a></li>
                </ul> 
               
            </div>
   
            <div class="col_1">
           
                <h3>Other Stuff</h3>
                <ul>
                    <li><a href="#">FreelanceSwitch</a></li>
                    <li><a href="#">Creattica</a></li>
                    <li><a href="#">WorkAwesome</a></li>
                    <li><a href="#">Mac Apps</a></li>
                    <li><a href="#">Web Apps</a></li>
                </ul> 
               
            </div>
   
            <div class="col_1">
           
                <h3>Misc</h3>
                <ul>
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Logo</a></li>
                    <li><a href="#">Flash</a></li>
                    <li><a href="#">Illustration</a></li>
                    <li><a href="#">More...</a></li>
                </ul> 
               
            </div>
           
        </div><!-- End 4 columns container -->
   
    </li><!-- End 4 columns Item -->



</ul>
  </div>
        <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>

                    <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 -->
<style>
  img.close-menu,img.menu-ham{cursor:pointer;width:24px;height:24px;position:absolute;margin-top:-16px;}
img.close-menu{display:none;margin-left:450px;z-index:999;}
#menu {
  position: fixed;
  top:30px;
  left:-700px;
    margin-left: -10px;
    margin-top:-6px;
    list-style: none;
    width: 600px;
    height: 90px;
    padding: 0px 20px 0px 20px;
    background: no-repeat;
        background-image: none;
    background-image: url("https://i.servimg.com/u/f84/16/67/19/10/barpan10.png");
    -moz-box-shadow: inset 0px 0px 1px #edf9ff;
    -webkit-box-shadow: inset 0px 0px 1px #edf9ff;
    box-shadow: inset 0px 0px 1px #edf9ff;
}


#menu li {
   float:left;
   display:block;
   text-align:center;
   position:relative;
   padding: 4px 10px 4px 10px;
   margin-right:30px;
   margin-top:7px;
   border:none;
}

#menu li:hover {
   border: 1px solid #777777;
   padding: 4px 9px 4px 9px;
   
   /* Background color and gradients */
   
   background: #F4F4F4;
   background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
   
   /* Rounded corners */
   
   -moz-border-radius: 5px 5px 0px 0px;
   -webkit-border-radius: 5px 5px 0px 0px;
   border-radius: 5px 5px 0px 0px;
}

#menu li a {
   font-family:Arial, Helvetica, sans-serif;
   font-size:14px;
   color: #EEEEEE;
   display:block;
   outline:0;
   text-decoration:none;
   text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
   color:#161616;
   text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
   padding-right:21px;
   background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
   background:url("img/drop.png") no-repeat right 7px;
}

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
   margin:4px auto;
   float:left;
   position:absolute;
   left:-999em; /* Hides the drop down */
   text-align:left;
   padding:10px 5px 10px 5px;
   border:1px solid #777777;
   border-top:none;
   
   /* Gradient background */
   background:#F4F4F4;
   background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

   /* Rounded Corners */
   -moz-border-radius: 0px 5px 5px 5px;
   -webkit-border-radius: 0px 5px 5px 5px;
   border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
   left:-1px;
   top:auto;
}

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
   display:inline;
   float: left;
   position: relative;
   margin-left: 5px;
   margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

#menu .menu_right {
   float:right;
   margin-right:0px;
}
#menu li .align_right {
   /* Rounded Corners */
   -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}

#menu li:hover .align_right {
   left:auto;
   right:-1px;
   top:auto;
}

#menu p, #menu h2, #menu h3, #menu ul li {
   font-family:Arial, Helvetica, sans-serif;
   line-height:21px;
   font-size:12px;
   text-align:left;
   text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
   font-size:21px;
   font-weight:400;
   letter-spacing:-1px;
   margin:7px 0 14px 0;
   padding-bottom:14px;
   border-bottom:1px solid #666666;
}
#menu h3 {
   font-size:14px;
   margin:7px 0 14px 0;
   padding-bottom:7px;
   border-bottom:1px solid #888888;
}
#menu p {
   line-height:18px;
   margin:0 0 10px 0;
}

#menu li:hover div a {
   font-size:12px;
   color:#015b86;
}
#menu li:hover div a:hover {
   color:#029feb;
}


.strong {
   font-weight:bold;
}
.italic {
   font-style:italic;
}

.imgshadow { /* Better style on light background */
   background:#FFFFFF;
   padding:4px;
   border:1px solid #777777;
   margin-top:5px;
   -moz-box-shadow:0px 0px 5px #666666;
   -webkit-box-shadow:0px 0px 5px #666666;
   box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
   width:auto;
   float:left;
   margin:5px 15px 5px 5px;
}

#menu li .black_box {
   background-color:#333333;
   color: #eeeeee;
   text-shadow: 1px 1px 1px #000;
   padding:4px 6px 4px 6px;

   /* Rounded Corners */
   -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

   /* Shadow */
   -webkit-box-shadow:inset 0 0 3px #000000;
   -moz-box-shadow:inset 0 0 3px #000000;
   box-shadow:inset 0 0 3px #000000;
}

#menu li ul {
   list-style:none;
   padding:0;
   margin:0 0 12px 0;
}
#menu li ul li {
   font-size:12px;
   line-height:24px;
   position:relative;
   text-shadow: 1px 1px 1px #ffffff;
   padding:0;
   margin:0;
   float:none;
   text-align:left;
   width:130px;
}
#menu li ul li:hover {
   background:none;
   border:none;
   padding:0;
   margin:0;
}

#menu li .greybox li {
   background:#F4F4F4;
   border:1px solid #bbbbbb;
   margin:0px 0px 4px 0px;
   padding:4px 6px 4px 6px;
   width:116px;

   /* Rounded Corners */
   -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
#menu li .greybox li:hover {
   background:#ffffff;
   border:1px solid #aaaaaa;
   padding:4px 6px 4px 6px;
   margin:0px 0px 4px 0px;
}
                  </style>
                    <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 -->
avatar
ThunderTB
Milouzien

MessageThunderTB le Ven 21 Sep 2018 - 5:19

Salut Phil , encore une fois un énorme merci pour ton temps et ta réponse
par contre de mon coter le rendu n'est pas super : http://qmhl.forum-canada.com/
je te laisse donc jeter un coup d'oeil , je vais faire dodo ont se reparle demain ...

Merci et bonne journée/nuit hinhin
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Ven 21 Sep 2018 - 5:25

Oui, je viens de voir car ta barre de navigation (.navig) manque d'information
Il faut :
Code:
.navig

supprime:

Code:
margin-left: 33%;

ajoute :
Code:
left: 0px;


Ensuite en tant qu'invité sur ton fofo, je ne peux que te donner un style avec le visuel actuel.

Code:
img.close-menu, img.menu-ham


modifie le
Code:
margin-top:-16px;
en
Code:
margin-top: 30px;

Tout devrait être fonctionnel Franck, bonne nuitée mon ami clin oeil
avatar
ThunderTB
Milouzien

MessageThunderTB le Ven 21 Sep 2018 - 15:33

De mon coter tout semble #1 le rendu est très bien , est-ce que sa sort bien de ton
coter ?
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Ven 21 Sep 2018 - 15:43

Pour moi c'est OK Franck, j'ai testé avant sur mon fofo PHPBB2 clin oeil
avatar
ThunderTB
Milouzien

MessageThunderTB le Ven 21 Sep 2018 - 17:16

Excellent Phil tape la
un énorme merci pour ton aide qui est vraiment apprécié ,
grâce à ton aide je continue d'apprendre ...

Bonne journée !!!
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Ven 21 Sep 2018 - 18:16

De rien Franck,

-Staff du Forum Milouze14-



Pour toute information,merci de contacter un Membre du Staff
fascicularia
fascicularia
Milouzien

Messagefascicularia le Sam 22 Sep 2018 - 18:20

-Staff du Forum Milouze14-



Pour toute information,merci de contacter un Membre du Staff
avatar
ThunderTB
Milouzien

MessageThunderTB le Dim 23 Sep 2018 - 1:12

Salut mon chère , tout semble #1 mais pour être sur avant de fermé le sujet
vous seriez très gentils si vous pouviez me faire un "Screenshot"
pour le haut de mon forum et le bas de mon forum , juste pour être sur que tout
s'affiche bien ... Merci !!
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Dim 23 Sep 2018 - 6:08

Hello Franck,


le voici:

*RESOLU* [PHPBB2] horizontal menu / iframe / hover 151
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Lun 24 Sep 2018 - 5:30

-Staff du Forum Milouze14-



Pour toute information,merci de contacter un Membre du Staff
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Lun 24 Sep 2018 - 10:58

-Staff du Forum Milouze14-



  • Hello 
    Sujet résolu et déplacé dans le forum adéquat.

Pour toute information,merci de contacter un Membre du Staff

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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