Boutons de barre de navigation avec déclinaison : Hover

Page 2 sur 3 Précédent  1, 2, 3  Suivant

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

Résolu Boutons de barre de navigation avec déclinaison : Hover

Message par Ancients le Jeu 3 Mar 2016 - 17:04

Rappel du premier message :

En bref...

Nature de la création : Barre de navigation
Taille de la création (en pixels) : 940x45
Couleur de fond : [Vous devez être inscrit et connecté pour voir ce lien]

Image(s)

Lien(s) image(s) :

[Vous devez être inscrit et connecté pour voir ce lien]
Visualiser:
[Vous devez être inscrit et connecté pour voir cette image]


Texte

Texte à insérer : Voir la description dans le sujet
Police à utiliser : Exocet (détails dans le sujet)
Couleur police : voir la description dans le sujet (2 couleurs)

En détails...

Lien de mon forum Forumactif : [Vous devez être inscrit et connecté pour voir ce lien]
Commentaire(s) supplémentaire(s) :

Bonjour, j'aimerai faire une barre de navigation seulement avec des images et la fonction : hover.

Commençons l'explication par étapes :

1. Tout d'abord j'aimerai que les boutons à la suite ressemble au design de cette barre de navigation (par rapport à la taille/dimension)

*supprimé*

2. Les boutons devront ressembler à ça au niveau visuel et texture (ne pas respecter la dimension que vous voyez, adaptez à la barre de navigation ci-dessus) :

[Vous devez être inscrit et connecté pour voir cette image]

  • La première ligne correspond au bouton neutre

  • La deuxième ligne correspond au bouton avec le curseur dessus
    le bouton est plus éclairé qu'en position neutre

  • Je n'ai pas besoin de cette 3ème déclinaison


Il me faudra ces 2 versions pour chaque bouton (mouse on/off)


3. Voici la liste des boutons dont j'aurais besoin dans l'ordre :

Le portail:
Devras ressembler à ceci :
[Vous devez être inscrit et connecté pour voir cette image]

Le forum:
Devras ressembler à ceci :
[Vous devez être inscrit et connecté pour voir cette image]

Membre:
Le texte "Membre"

Groupe:
Le texte "Groupe"

Recherche:
Icone de loupe adaptée au style des boutons donnés en exemple

Le Profil:
Le texte "Profil"

Messagerie:
Devras ressembler à ceci :
[Vous devez être inscrit et connecté pour voir cette image]

Connexion:
2 boutons
1 avec le texte "Connexion
1 avec [Vous devez être inscrit et connecté pour voir cette image]

Déconnexion:
2 boutons
1 avec le texte "Déconnexion
1 avec [Vous devez être inscrit et connecté pour voir cette image]

S'inscrire:
Le texte "Sign up"

4. Informations supplémentaires :

Référencez-vous à la barre de navigation pour le rendu final et aux boutons avec les déclinaisons plus haut pour vous inspirer de l'esprit artistique et de la texture.

La police utilisée : Exocet
voici le lien : [Vous devez être inscrit et connecté pour voir ce lien]

La couleur de la police au stade neutre utilisée : [Vous devez être inscrit et connecté pour voir ce lien]
La couleur de la police avec hover utilisée : blanc

Pour récapituler il faudra 12 boutons avec 2 déclinaisons par boutons pour le hover soit : 24 boutons (Les déclinaisons ne devraient pas prendre beaucoup de temps je pense)

Si vous avez des questions, je suis à votre entière disposition. Nous pouvons dialoguer via skype/teamspeak si vous le voulez, parfois la parole est un gain de temps.

Un grand merci d'avance, bien à vous.

[Vous devez être inscrit et connecté pour voir cette image]Votre commande a été vérifiée par un [Vous devez être inscrit et connecté pour voir ce lien] et est conforme au règlement. Elle peut dès à présent recevoir des propositions.

Merci de ne pas modifier votre commande après l'insertion de ce message, et de bien vouloir être patient. N'hésitez pas à remonter votre commande (UP) une fois par tranche de 24h.

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par ◦Jay◦ le Dim 6 Mar 2016 - 18:25

Non, je ne peux faire mieux qu'à l'heure actuelle, il s'agit d'une image contrairement au site.


[Vous devez être inscrit et connecté pour voir cette image]

◦Jay◦
Créactif
Créactif

Masculin
Messages : 2106
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par Ancients le Dim 6 Mar 2016 - 19:10

D'accord, restons comme ça.

Comment se passe la suite?

Bien à vous

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par ◦Jay◦ le Dim 6 Mar 2016 - 19:44

De quelle taille la voulez-vous ? Je me demande si la grande ne serait pas mieux ... à vous de me dire.


[Vous devez être inscrit et connecté pour voir cette image]

◦Jay◦
Créactif
Créactif

Masculin
Messages : 2106
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par Ancients le Dim 6 Mar 2016 - 19:53

Vous savez, je risque de ne pas être sur. Le plus simple (je pense) serait d'avoir les deux tailles, et je ferai en fonction.

Merci Jay

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par ◦Jay◦ le Dim 6 Mar 2016 - 20:11

D'accord, j'ai pensé à autre chose pour les nouveaux messages, plutôt que de mettre un bouton différent, en mettant un script qui afficherait à chaque nouveau MP cette image au centre de votre écran :

[Vous devez être inscrit et connecté pour voir cette image]

Script à mettre sur toutes les pages.:
Code:
var sec_inter= 60;
                       
                                    function cook_no_new_message() { my_setcookie("new_message",-new Date(),1,0); no_new_message(); }
                       
                                    function no_new_message() {  $('#new_message').remove(); }
                       
                                    function cook_new_message() {  my_setcookie("new_message",+new Date(),1,0); new_message(); }
                       
                                    function new_message() { $("body").append('<div id="new_message" style="position:fixed;bottom:20%;left:40%"><a href="/privmsg?folder=inbox" onClick="cook_no_new_message();return true;"><img src="http://image.noelshack.com/fichiers/2016/09/1457291018-image5-1.png" /></a></div>'); }
                       
                                    function new_message_update() {
                                      var dnew_message= my_getcookie("new_message");
                                      var enew_message= dnew_message>0;
                         
                                      if(($('#new_message').length>0)==enew_message)
                                      {
                                          if(!enew_message) dnew_message*=-1;
                                          if(dnew_message<+new Date()-1000*sec_inter)
                                            $.get('http://'+document.location.host+'/privmsg?mode=newpm',function(data){
                                                if(!data.match("Vous n'avez pas de nouveau message privé.")!=enew_message)
                                                {
                                                  if(enew_message) cook_no_new_message();
                                                  else cook_new_message();
                                                }
                                            });
                                      }
                                      else
                                      {
                                          if(enew_message) new_message();
                                          else no_new_message();
                                      }
                                    }
                       
                                    $(function(){
                                      if(!$("#logout").length) return;
                                      if($('#i_icon_mini_new_message').length) cook_new_message();
                                      else cook_no_new_message();
                                      setInterval("new_message_update()",5000);
                                    });

Les barres :

La grande.:
[Vous devez être inscrit et connecté pour voir cette image]

La petite.:
[Vous devez être inscrit et connecté pour voir cette image]

Pour le codage, cela va aller ?


[Vous devez être inscrit et connecté pour voir cette image]

◦Jay◦
Créactif
Créactif

Masculin
Messages : 2106
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par Ancients le Dim 6 Mar 2016 - 21:17

Bonsoir Jay,

Votre code pour les nouveaux messages me plait beaucoup.

Pour le reste, je dois avouer que j'ai bien rit en lisant votre dernière phrase. Je vais d'abord essayer avant de partir sur un échec Smile

Bien à vous

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par Ancients le Mar 8 Mar 2016 - 10:28

Bonjour Jay,

Je suis un peu (beaucoup) perdu. Je n'arrive pas à comprendre comment faire une BDN avec un hover sur chaque bouton sans les boutons séparés (et même).

De plus je suis confronté un problème de hover qui ne marche même pas avec 2 images. Je me demande ce que ça va donné avec la BDN : [Vous devez être inscrit et connecté pour voir ce lien]

Bref je suis largué.

NB : J'ai essayé votre script pour les nouveaux MP (sur toutes les pages), je me suis envoyé dans le deux sens des MP entre mon compte et mon compte admin, et en rafraichissant la page (ou non) rien en s'affiche.

Merci Jay,
Bonne journée

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par ◦Jay◦ le Mar 8 Mar 2016 - 13:54

Bonjour Ancients, qu'avez-vous fait ? Ou voulez-vous la mettre ? Pour le moment, il y en a une qui est à la place du logo, il faudrait la retirer.

Si vous souhaitez la mettre en haut du forum, il faudrait commencer par mettre en œuvre ce [Vous devez être inscrit et connecté pour voir ce lien].

Il ne restera plus qu'à coder la barre ensuite. L'avantage d'avoir une seule image est que le chargement ne se fera qu'une seule fois et du fait, vous n'aurez pas de problème de transition sur l'image, la barre de navigation qui est sur le forum de mon profil est codée de cette manière.

Commencez par mettre votre barre en haut puis revenez me voir pour le codage.(Le support technique n'est normalement pas accepté dans cette partie du forum, cela est exceptionnel, mais nous allons terminer cela ici étant donné que la barre  a été faite ici.)




Pour ce qui est du script des nouveaux messages, il fonctionne parfaitement, je l'utilise et l'ai vérifié avant de vous le donner. Essayez de vous servir de chaque compte sur un navigateur différent.

Bien à vous.


[Vous devez être inscrit et connecté pour voir cette image]

◦Jay◦
Créactif
Créactif

Masculin
Messages : 2106
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par Ancients le Mar 8 Mar 2016 - 18:19

Bonjour Jay, j'ai tout cassé je crois

[Vous devez être inscrit et connecté pour voir cette image]

Ma CSS:
Code:
.navig {
    margin: 0 auto; max-width: 50%; margin-top: 60px; margin-bottom: 30px;
      background: url('http://i68.tinypic.com/s49ap4.png')
}

Mon Overall_header:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <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() {

         $('#fa_ticker_content').css('display','block');

         var width_max = $('ul#fa_ticker_content').width();
         var width_item = Math.floor(width_max / {switch_ticker.SIZE});

         if (width_max > 0)
         {
            $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).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);
               }
            });

            if (slid_vert)
            {
               var height_max = h_perso;

               $('ul#fa_ticker_content li').each( function () {
                  if ($(this).height() > height_max)
                  {
                     height_max = $(this).height();
                  }
               } );

               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
               $('ul#fa_ticker_content li').height(height_max);
            }


            $('#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}
   <style type="text/css">
   #page-footer, div.navbar, div.navbar ul.linklist {
   display: block !important;
   }
   ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
   display: inline !important;
   }

   <!-- BEGIN switch_ticker_new -->
   .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;
   }
   <!-- END switch_ticker_new -->
   </style>
   {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 id="phpbb">
    <video autoplay id="video-background" xmlns="http://www.w3.org/1999/xhtml" loop="loop"
    poster="http://eu.battle.net/d3/static/images/reaper-of-souls/bg/malthael.jpg">
      <source src="http://media.blizzard.com/d3/media/videos/reaper-of-souls/bg/malthael.webm" type="video/webm">
      <source src="http://media.blizzard.com/d3/media/videos/reaper-of-souls/bg/malthael.mp4" type="video/mp4">
    </video>
<center><div class="navig">{GENERATED_NAV_BAR}</div></center>
<!-- 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;">
   <div class="h3">{SITENAME}</div>
   {LOGIN_POPUP_MSG}
   <div id="login_popup_buttons">
      <form action="{S_LOGIN_ACTION}" method="get">
         <input type="submit" class="button1" value="{L_LOGIN}" />
         <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
         <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
      </form>
   </div>
</div>
<!-- END switch_login_popup -->

<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
   <a id="top" name="top" accesskey="t"></a>
   {JAVASCRIPT}

   <div id="page-header">
      <div class="headerbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <div id="logo-desc">
            <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
            <!-- BEGIN switch_h1 -->
            <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
            <!-- END switch_h1 -->
            <!-- BEGIN switch_desc -->
            <p>{switch_desc.SITE_DESCRIPTION}</p>
            <!-- END switch_desc -->
         </div>

         <span class="corners-bottom"><span></span></span></div>
      </div>

      <div class="navbar">
         <div class="inner"><span class="corners-top"><span></span></span>



         <!-- BEGIN switch_search_box -->
         <div id="search-box">
            <form method="get" action="{ACTION_SEARCH}" id="search">
               <p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" value="{L_SEARCH}..." onclick="if (this.value == '{L_SEARCH}...') this.value = '';" onblur="if (this.value == '') this.value = '{L_SEARCH}...';" />
               {JS_SESSION_ID_INPUT}
               <input class="button2" type="submit" value="{L_SEARCH}" /></p>
            </form>
         </div>
         <!-- END switch_search_box -->

         <span class="corners-bottom"><span></span></span></div>
      </div>

      <!-- BEGIN switch_ticker_new -->
      <div id="fa_ticker_blockD" style="margin-top:4px;">
         <div class="module">
            <div class="inner">
               <span class="corners-top"><span></span></span>
                  <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>
               <span class="corners-bottom"><span></span></span>
            </div>
         </div>
      </div>
      <!-- END switch_ticker_new -->

      <!-- BEGIN switch_ticker -->
      <div id="fa_ticker_block" style="margin-top:4px;">
         <div class="module">
            <div class="inner">
               <span class="corners-top"><span></span></span>
                  <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>
               <span class="corners-bottom"><span></span></span>
            </div>
         </div>
      </div>
      <!-- END switch_ticker -->
   </div>

   <div id="page-body">

   <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
      <div id="outer-wrapper">
         <div id="wrapper">
            <div id="container">
               <div id="content">

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

                  <div id="main">
                     <div id="main-content">

Merci encore pour votre aide, je n'avancerai pas autant sans vous et l'aide formidable de ce forum.
Bien à vous

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par ◦Jay◦ le Mar 8 Mar 2016 - 20:36

Bonsoir Ancients, le code CSS est faux, vous pouvez le supprimer, nous y reviendrons après.

Est-ce qu'il y avait autre chose de modifié dans votre template ? Si non, donnez moi votre template non modifié s'il vous plait.

Bien à vous.


[Vous devez être inscrit et connecté pour voir cette image]

◦Jay◦
Créactif
Créactif

Masculin
Messages : 2106
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par Ancients le Mar 8 Mar 2016 - 20:39

Bonsoir Jay,

En fait j'ai anticipé, vu que j'avais modifié ma BDN précédente, je suis reparti du template par défaut.

J'ai juste remis la video en background après <body>

Code:
  <video autoplay id="video-background" xmlns="http://www.w3.org/1999/xhtml" loop="loop"
    poster="http://eu.battle.net/d3/static/images/reaper-of-souls/bg/malthael.jpg">
      <source src="http://media.blizzard.com/d3/media/videos/reaper-of-souls/bg/malthael.webm" type="video/webm">
      <source src="http://media.blizzard.com/d3/media/videos/reaper-of-souls/bg/malthael.mp4" type="video/mp4">
    </video>

Bien à vous

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par ◦Jay◦ le Mar 8 Mar 2016 - 20:46

Remplacez votre template par celui-ci et dites moi lorsque c'est fait :
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>
  <video autoplay id="video-background" xmlns="http://www.w3.org/1999/xhtml" loop="loop"
    poster="http://eu.battle.net/d3/static/images/reaper-of-souls/bg/malthael.jpg">
      <source src="http://media.blizzard.com/d3/media/videos/reaper-of-souls/bg/malthael.webm" type="video/webm">
      <source src="http://media.blizzard.com/d3/media/videos/reaper-of-souls/bg/malthael.mp4" type="video/mp4">
    </video>
<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="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_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 -->


[Vous devez être inscrit et connecté pour voir cette image]

◦Jay◦
Créactif
Créactif

Masculin
Messages : 2106
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par Ancients le Mar 8 Mar 2016 - 21:40

C'est fait, par contre regardez le résultat sur mon forum : tout est décalé sur la gauche.

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par ◦Jay◦ le Mar 8 Mar 2016 - 21:45

Ah oui, remettez votre ancien template pour le moment, le template est pour phpbb2 ...


[Vous devez être inscrit et connecté pour voir cette image]

◦Jay◦
Créactif
Créactif

Masculin
Messages : 2106
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par Ancients le Mar 8 Mar 2016 - 21:53

C'est fait.

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par ◦Jay◦ le Mar 8 Mar 2016 - 21:54

Je reviendrai vers vous plus tard, je suis en train de la coder sur un forum d'essai.

Bien à vous.


[Vous devez être inscrit et connecté pour voir cette image]

◦Jay◦
Créactif
Créactif

Masculin
Messages : 2106
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par Ancients le Mar 8 Mar 2016 - 21:56

D'accord, merci Jay

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par ◦Jay◦ le Mar 8 Mar 2016 - 22:31

La barre de navigation ne va pas car le profil ne peut pas être visible lorsque l'on n'est pas connecté, il faut donc que je règle ça !

Je verrai demain.

Bonne soirée.


[Vous devez être inscrit et connecté pour voir cette image]

◦Jay◦
Créactif
Créactif

Masculin
Messages : 2106
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par Ancients le Mar 8 Mar 2016 - 22:34

D'accord, merci encore.

Bonne soirée

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par ◦Jay◦ le Mer 9 Mar 2016 - 6:54

Bonjour Ancients, voila, j'ai essayé sur un phpbb3.

Dans votre template overall_header, repérez :

Code:
<ul class="linklist navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</ul>

et déplacez le après la ligne :

Code:
<div class="headerbar">

-Dans votre P.A.>Affichage>En-tête & Navigation>Afficher seulement des images dans la barre des liens :Cochez "oui"

-Dans votre P.A.>Affichage>Images et Couleurs>Gestion des images>Supprimez toutes les images de la barre de navigation.

Il m'a fallu refaire la barre qui n'allait pas ! La voici :

[Vous devez être inscrit et connecté pour voir cette image]

Ensuite, le code CSS :

Code:
.linklist.navlinks{
position: fixed;
width:100%;
top: 0px;
z-index:99;
}
/*IMAGE inscription*/
#i_icon_mini_register{width:180px; height:111px; background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -1012px 0px;}
#i_icon_mini_register:hover{background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -1012px -111px;}
/*IMAGE CONNEXION*/
#i_icon_mini_login{width:205px; height:111px; background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -1272px 0px;}
#i_icon_mini_login:hover{background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -1272px -111px;}
/*IMAGE PORTAIL*/
#i_icon_mini_portal{width:163px; height:111px; background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat 0 0px;}
#i_icon_mini_portal:hover{background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat 0px -111px;}
/*IMAGE INDEX*/
#i_icon_mini_index{width:154px; height:111px; background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -163px 0px;}
#i_icon_mini_index:hover{background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -163px -111px;}
/*IMAGE MEMBRES*/
#i_icon_mini_members{width:120px; height:111px; background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -316px 0px;}
#i_icon_mini_members:hover{background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -316px -111px;}
/*IMAGE GROUPES*/
#i_icon_mini_groups{width:130px; height:111px; background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -435px 0px;}
#i_icon_mini_groups:hover{background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -435px -111px;}
/*IMAGE PROFIL*/
#i_icon_mini_profile{width:98px; height:111px; background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -564px 0px;}
#i_icon_mini_profile:hover{background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -564px -111px;}
/*IMAGE MP (pas de nouveaux messages)*/
#i_icon_mini_message{width:82px; height:111px; background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -661px 0px;}
#i_icon_mini_message:hover{background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -661px -111px;}
/*IMAGE MP (nouveaux messages)*/
#i_icon_mini_new_message{width:82px; height:111px; background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -661px 0px;}
#i_icon_mini_new_message:hover{background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -661px -111px;}
/*IMAGE RECHERCHE*/
#i_icon_mini_search{width:81px; height:111px; background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -743px 0px;}
#i_icon_mini_search:hover{background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -743px -111px;}
/*IMAGE DECONEXION*/
#i_icon_mini_logout{width:175px; height:111px; background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -824px 0px;}
#i_icon_mini_logout:hover{background:url("http://image.noelshack.com/fichiers/2016/10/1457502053-bdn-1.png") no-repeat -824px -111px;}

Bien à vous.


Dernière édition par ◦Jay◦ le Mer 9 Mar 2016 - 14:11, édité 1 fois


[Vous devez être inscrit et connecté pour voir cette image]

◦Jay◦
Créactif
Créactif

Masculin
Messages : 2106
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par Ancients le Mer 9 Mar 2016 - 9:19

Bonjour Jay (vous n'avez pas beaucoup dormi),

Alors j'ai suivit vos instructions et rien ne s'affiche sur mon forum.

Dans les images > Général / Navigation

Toutes les images sont : [Vous devez être inscrit et connecté pour voir ce lien]

Bien à vous

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par ◦Jay◦ le Mer 9 Mar 2016 - 9:48

Cochez non à Afficher seulement des images dans la barre des liens, pour vois si la bdn S.V.P.


[Vous devez être inscrit et connecté pour voir cette image]

◦Jay◦
Créactif
Créactif

Masculin
Messages : 2106
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par Ancients le Mer 9 Mar 2016 - 9:49

C'est fait!

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par ◦Jay◦ le Mer 9 Mar 2016 - 10:04

Dans votre css, il y a ça :

Code:
a.mainmenu img {
    display: none;
}

Il faut le retirer puis vous pouvez recommencer la manœuvre.


[Vous devez être inscrit et connecté pour voir cette image]

◦Jay◦
Créactif
Créactif

Masculin
Messages : 2106
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par Ancients le Mer 9 Mar 2016 - 10:42

Ah, j'ai supprimé ce paramètre et coché Oui pour Afficher seulement des images dans la barre des liens.

La barre s'affiche mais de manière particulière.

Bien à vous.

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par ◦Jay◦ le Mer 9 Mar 2016 - 10:52

Et bien oui, il vous faut mettre les boutons dans le bon ordre, >P.A.>Affichage>En-tête & Navigation>Barre de navigation

-Mettez les boutons qui ne vous servent pas tous en haut, ensuite, les autres.

-Si vous souhaitez descendre votre forum pour y voir un peu plus clair, mettez ce code, réglez les px.

Code:
#page-header{margin-top:150px;}


[Vous devez être inscrit et connecté pour voir cette image]

◦Jay◦
Créactif
Créactif

Masculin
Messages : 2106
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par Ancients le Mer 9 Mar 2016 - 16:19

Bonjour Jay,

Alors j'ai suivit vos instructions (comme toujours me direz-vous!), quelques problèmes se créent :

La barre n'est pas complète, voici l'ordre des boutons :

[Vous devez être inscrit et connecté pour voir cette image]

Et voici l'apparence des boutons :

[Vous devez être inscrit et connecté pour voir cette image]

Il y a une fine bande en dessous de la BDN aussi je ne sais pas d'ou ça vient.

Merci Jay,
Bien à vous

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par ◦Jay◦ le Mer 9 Mar 2016 - 17:14

Pour le trait, retirez ceci de votre CSS :

Code:
ul.navlinks {
    border-bottom: 1px solid #322e2e;
    font-weight: 700;
    text-align: center;
}

Que voulez-vous dire par la barre n'est pas complète ? Vous voulez les boutons FAQ etc ... ?


[Vous devez être inscrit et connecté pour voir cette image]

◦Jay◦
Créactif
Créactif

Masculin
Messages : 2106
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par Ancients le Mer 9 Mar 2016 - 17:24

Bonjour,

Je n'ai pas ceci dans mon CSS :

Code:
ul.navlinks {
    border-bottom: 1px solid #322e2e;
    font-weight: 700;
    text-align: center;
}

Pour la barre regardez les photos que j'ai mit au dessus, elle n'a pas le bouton "Log out" (déconnexion) et elle n'est pas centrée

Bien à vous

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons de barre de navigation avec déclinaison : Hover

Message par ◦Jay◦ le Mer 9 Mar 2016 - 17:32

Et bien mettez ça pour le trait :

Code:
ul.navlinks{border:none;}

Pour la barre, avez-vous bien copié le code CSS ? Normalement, il ne doit pas y avoir de problème.

Le bouton s'enregistrer doit être avant le bouton rechercher.



[Vous devez être inscrit et connecté pour voir cette image]

◦Jay◦
Créactif
Créactif

Masculin
Messages : 2106
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Page 2 sur 3 Précédent  1, 2, 3  Suivant

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