Problème avec un background dans une navigation flottante

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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

Résolu Problème avec un background dans une navigation flottante

Message par Offrande Mer 30 Oct 2013 - 9:43

Bonjour à tous, 

J'ouvre ce post suite à un de mes autres gros soucis que j'ai rencontrer ce matin même. 
Je possède sur mon forum une navigation en jquiery sur la gauche de mon forum, elle est munis de 9 boutons cliquable qui coulisse vers la droite au survol; jusque là pas de problème.

Mon soucis vient de ma CSS (je pense), j'ai souhaiter rétrécir les image cliquable de cette navigation et donc j'ai changer par la même occasion l'image des background et la taille des boutons et maintenant je ne voie plus le background, donc entre-autre les image cliquable.

Voila mon code situer dans mon overall_header: 
Code:
<!-- NAVIGATION COULISSANTE QUIERY -->
   
         <ul id="bouton">
 
           <li class="1"><a href="#"></a></li>
            <li class="2"><a href="#"></a></li>
            <li class="3"><a href="#"></a></li>
            <li class="4"><a href="#"></a></li>
            <li class="5"><a href="#"></a></li>
            <li class="6"><a href="#"></a></li>
            <li class="7"><a href="#"></a></li>
            <li class="8"><a href="#"></a></li>
            <li class="9"><a href="#"></a></li>
  
        </ul>

        <script type="text/javascript">
            $(function() {
                $('#bouton a').stop().animate({'marginLeft':'-75px'},1000);

                $('#bouton > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                      $('a',$(this)).stop().animate({'marginLeft':'-75px'},200);
                    }
                );
            });
        </script>
<!-- FIN NAVIGATION COULISSANTE QUIERY -->

Voila mon code CSS en rapport: 
Code:
ul#bouton {
position: fixed; /* On fixe la position des boutons */
margin: 15px; /* marge extérieure */
padding: 0px; /* marge intérieure */
top: 50px; /* positionné à 50px du haut */
left: 75px; /* positionné à 0px du bord gauche */
list-style: none; /* pas de style pour la liste */
z-index: 999; /* place les boutons au dessus de tout le reste */
}

ul#bouton li {
width: 70px; /* largeur du bouton */
margin-bottom: 4px; /* marge inférieure */
}

ul#bouton li a {
display: block; /* défini en bloc */
margin-left: 0px; /* marge extérieure négative gauche */
width: 70px; /* largeur */
height: 70px; /* hauteur */
border: 1px dotted #ffffff!important; /* bordure */
-moz-box-shadow: 1px 1px 10px #000000; /* ombre portée */
-webkit-box-shadow: 1px 1px 10px #000000; /* ombre portée */
-o-box-shadow: 1px 1px 10px #000000; /* ombre portée */
box-shadow: 1px 1px 10px #000000; /* ombre portée */
opacity: 0.9; /* opacité */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); /* opacité pour IE */
}

ul#bouton .1 a{
background-image: url(http://i56.servimg.com/u/f56/17/99/16/25/les_po10.jpg)!important;
}
ul#bouton .2 a{
background-image: url(http://i56.servimg.com/u/f56/17/99/16/25/au_coe10.jpg)!important;
}
ul#bouton .3 a{
background-image: url(http://i56.servimg.com/u/f56/17/99/16/25/commun10.jpg)!important;
}
ul#bouton .4 a{
background-image: url(http://i56.servimg.com/u/f56/17/99/16/25/module10.jpg)!important;
}
ul#bouton .5 a{
background-image: url(http://i56.servimg.com/u/f56/17/99/16/25/les_ai10.jpg)!important;
}
ul#bouton .6 a{
background-image: url(http://i56.servimg.com/u/f56/17/99/16/25/repert10.jpg)!important;
}
ul#bouton .7 a{
background-image: url(http://i56.servimg.com/u/f56/17/99/16/25/papota10.jpg)!important;
}
ul#bouton .8 a{
background-image: url(http://i56.servimg.com/u/f56/17/99/16/25/les_se10.jpg)!important;
}
ul#bouton .9 a{
background-image: url(http://i56.servimg.com/u/f56/17/99/16/25/le_boi10.jpg)!important;
}
et voila au besoins mon Overall_header en entier:
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>
  
   <!-- POLICE GOOGLE FONT -->
  <link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Niconne' rel='stylesheet' type='text/css'>
   <!-- FIN POLICE GOOGLE FONT -->
   
    
  <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_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_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');
        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}');
        report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
        ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {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 -->

    
    
    
    
 <!-- BACKGROUND DU HAVRE -->
    
 <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}"
             text="{T_BODY_TEXT}"
             link="{T_BODY_LINK}"
       vlink="{T_BODY_VLINK}">
<!-- FIN BACKGROUND DU HAVRE -->
                
 <!-- Barre de Navigation -->

<TABLE STYLE="POSITION: ABSOLUTE;
             LEFT: 0PX;
             TOP: 0PX;
             RIGHT: 0PX;
             BACKGROUND-COLOR: none!important;
             Z-INDEX:1000;
WIDTH: 100%;" >
<TR><TD><CENTER>{GENERATED_NAV_BAR}</CENTER></TD></TR>
</TABLE>
                
 <!-- Fin barre de NAVIGATION -->
    
    
    
    
 <!-- NAVIGATION COULISSANTE QUIERY -->
   
         <ul id="bouton">
 
           <li class="1"><a href="#"></a></li>
            <li class="2"><a href="#"></a></li>
            <li class="3"><a href="#"></a></li>
            <li class="4"><a href="#"></a></li>
            <li class="5"><a href="#"></a></li>
            <li class="6"><a href="#"></a></li>
            <li class="7"><a href="#"></a></li>
            <li class="8"><a href="#"></a></li>
            <li class="9"><a href="#"></a></li>
  
        </ul>

        <script type="text/javascript">
            $(function() {
                $('#bouton a').stop().animate({'marginLeft':'-75px'},1000);

                $('#bouton > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                      $('a',$(this)).stop().animate({'marginLeft':'-75px'},200);
                    }
                );
            });
        </script>
<!-- FIN NAVIGATION COULISSANTE QUIERY -->
   
    
    
    
    
    
   <!-- FLECHE HAUT ET BAS -->
    <div class="top_bottom">
       <a href="#top" class="haut" ></a>
       <a href="#bottom" class="bas"></a>
  </div>
    <!-- FIN FLECHE HAUT ET BAS -->
  
  
  <!-- BEGIN hitskin_preview -->
  <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
        <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
        </p>
      </div>
  </div>
  <!-- END hitskin_preview -->

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

  <a name="top"></a>
  {JAVASCRIPT}
                
                
                
                
                
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0"
 align="center">
      <tr>
        <td  class="bodyline" colspan="2">
<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 />  </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 {CLASS_TABLE_TYPE} 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 {CLASS_TABLE_TYPE} 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>

<!-- END html_validation -->
J'espère que vous pourrez m'aider car je bloque complètement sur ce problème.
Je vous souhaite à tous une agréable journée Like a Star @ heaven .


Dernière édition par Offrande le Ven 8 Nov 2013 - 2:10, édité 1 fois
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un background dans une navigation flottante

Message par Invité Mer 30 Oct 2013 - 10:25

Salut Offrande Clin d\'oeil  ,

je pense que les class numérotées ne doivent pas être prisent en compte,
de plus ton affichage au survol à un léger décalage Wink .
Pour ce genre d'animation il l'appliquer au bord gauche de préférence et non avec une marge de 75px ,
sinon tu auras une animation saccadée Wink .
J'ai corrigée ta css Very Happy .

Pour le code html:
Utilises plutôt une class avec Item par exemple comme ceci:

Code:

  <ul id="bouton">
       
                    <li class="M14_Item1"><a href="#"></a></li>
                    <li class="M14_Item2"><a href="#"></a></li>
                    <li class="M14_Item3"><a href="#"></a></li>
                    <li class="M14_Item4"><a href="#"></a></li>
                    <li class="M14_Item5"><a href="#"></a></li>
                    <li class="M14_Item6"><a href="#"></a></li>
                    <li class="M14_Item7"><a href="#"></a></li>
                    <li class="M14_Item8"><a href="#"></a></li>
                    <li class="M14_Item9"><a href="#"></a></li>
       
                </ul>

Puis modifie le script comme ceci:
Code:


  <script type="text/javascript">
            $(function() {
                $('#bouton a').stop().animate({'marginLeft':'-65px'},1000);
 
                $('#bouton > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                      $('a',$(this)).stop().animate({'marginLeft':'-65px'},200);
                    }
                );
            });
        </script>



Puis la css:
Code:


        ul#bouton {
        position: fixed; /* On fixe la position des boutons */
        margin: 15px 15px 15px 0; /* marge extérieure */
        padding: 0px; /* marge intérieure */
        top: 50px; /* positionné à 50px du haut */
        left: 0; /* positionné à 0px du bord gauche */
        list-style: none; /* pas de style pour la liste */
        z-index: 999; /* place les boutons au dessus de tout le reste */
        }
       
        ul#bouton li {
       
        margin-bottom: 4px; /* marge inférieure */
        }
       
        ul#bouton li a {
        display: block; /* défini en bloc */
        left: 0px; /* marge extérieure négative gauche */
        width: 70px; /* largeur */
        height: 70px; /* hauteur */
        border: 1px dotted #ffffff!important; /* bordure */
        -moz-box-shadow: 1px 1px 10px #000000; /* ombre portée */
        -webkit-box-shadow: 1px 1px 10px #000000; /* ombre portée */
        -o-box-shadow: 1px 1px 10px #000000; /* ombre portée */
        box-shadow: 1px 1px 10px #000000; /* ombre portée */
        opacity: 0.9; /* opacité */
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); /* opacité pour IE */
        }
       
        ul#bouton li.M14_Item1 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/les_po10.jpg)no-repeat center;
        }
        ul#bouton li.M14_Item2 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/au_coe10.jpg);
        }
        ul#bouton li.M14_Item3 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/commun10.jpg);
        }
        ul#bouton li.M14_Item4 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/module10.jpg);
        }
        ul#bouton li.M14_Item5 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/les_ai10.jpg);
        }
        ul#bouton li.M14_Item6 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/repert10.jpg);
        }
        ul#bouton li.M14_Item7 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/papota10.jpg);
        }
        ul#bouton li.M14_Item8 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/les_se10.jpg);
        }
        ul#bouton li.M14_Item9 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/le_boi10.jpg);
        }



a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un background dans une navigation flottante

Message par Offrande Ven 1 Nov 2013 - 1:30

Coucou mon Milouze Wink 

Merci beaucoup, cela est tout de même beaucoup plus jolie et plus simple. Je me disait bien que le chiffre aussi simplement écrit pouvais ne pas être pris en compte mais je me demander toujours =) ! 

Par contre je voudrait que les bouton soit apparent à la base et non cacher car ceux-ci seront les raccourcis vers les catégories de mon forum, donc oui je souhaite bien une transition mais je veut qu'il soit complètement apparent en état normal Smile 

Merci beaucoup de ton aide mon ami dwarf 
Je te souhaite une très agréable soirée!
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un background dans une navigation flottante

Message par Offrande Ven 1 Nov 2013 - 3:08

Re bonsoir Milouze, 

Je viens d'arriver à régler la navigation comme je le souhaitais, voila mon code, j'espère que celui-ci est bon et qu'il ne comporte pas d'erreur. 

Code:
ul#bouton {
        position: fixed; /* On fixe la position des boutons */
        margin-bottom: 0px; /* marge extérieure */
        padding: 10px; /* marge intérieure */
        top: 5px; /* positionné à 5px du haut */
        left: 70px; /* positionné à 70px du bord gauche */
        list-style: none; /* pas de style pour la liste */
        z-index: 999; /* place les boutons au dessus de tout le reste */
        }
     
        ul#bouton li {
        margin-bottom: 0px; /* marge inférieure */
        }
     
        ul#bouton li a {
        display: block; /* défini en bloc */
        left: -5px; /* marge extérieure négative gauche */
        width: 30px; /* largeur */
        height: 30px; /* hauteur */
        border: 1px dotted #ffffff!important; /* bordure */
        -moz-box-shadow: 1px 1px 10px #000000; /* ombre portée */
        -webkit-box-shadow: 1px 1px 10px #000000; /* ombre portée */
        -o-box-shadow: 1px 1px 10px #000000; /* ombre portée */
        box-shadow: 1px 1px 10px #000000; /* ombre portée */
        opacity: 0.9; /* opacité */
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); /* opacité pour IE */
        }
     
        ul#bouton li.M14_Item1 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/les_po11.jpg);
     margin-bottom: 5px!important;
        }
        ul#bouton li.M14_Item2 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/au_coe12.jpg);
     margin-bottom: 5px!important;
        }
        ul#bouton li.M14_Item3 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/commun12.jpg);
   margin-bottom: 5px!important;       
   }
        ul#bouton li.M14_Item4 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/module11.jpg);
   margin-bottom: 5px!important;       
   }
        ul#bouton li.M14_Item5 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/les_ai11.jpg);
   margin-bottom: 5px!important;       
   }
        ul#bouton li.M14_Item6 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/repert11.jpg);
   margin-bottom: 5px!important;       
   }
        ul#bouton li.M14_Item7 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/papota11.jpg);
   margin-bottom: 5px!important;       
   }
        ul#bouton li.M14_Item8 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/les_se11.jpg);
   margin-bottom: 5px!important;       
   }
        ul#bouton li.M14_Item9 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/le_boi11.jpg);
   margin-bottom: 5px!important;       
   }
Maintenant il ne me reste plus qu'as faire une chose ^^ ,
Je souhaiterais comme prévus que chacun de ces petit icônes soit un lien "Ancre" vers chacune de mes catégories sur la page index. Je sais faire une ancre, mais est ce possible de poser celle-ci dans le titre de mes catégories? Si oui qu'elle liens devrai-je mettre dans mon overall_header sur chaque petit image? 

Merci beaucoup de votre aide Smile
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un background dans une navigation flottante

Message par Invité Ven 1 Nov 2013 - 6:16

Re Offrande ,

Ton lien devra être déposé à la place de # :
Code:
<li class="M14_Item1"><a href="#"></a></li>
Exemple:
Code:


<li class="M14_Item1"><a href="lien categorie 1"></a></li>
<li class="M14_Item2"><a href="lien categorie 2"></a></li>
<li class="M14_Item3"><a href="lien categorie 3"></a></li>
<li class="M14_Item4"><a href="lien categorie 4"></a></li>
<li class="M14_Item5"><a href="lien categorie 5"></a></li>
<li class="M14_Item6"><a href="lien categorie 6"></a></li>
<li class="M14_Item7"><a href="lien categorie 7"></a></li>
<li class="M14_Item8"><a href="lien categorie 8"></a></li>
<li class="M14_Item9"><a href="lien categorie 9"></a></li>

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un background dans une navigation flottante

Message par Offrande Ven 1 Nov 2013 - 18:21

Bonjour Milouze, je suis d'accord mais pourrait tu me donner un exemple de lien qui ressemblerais à un lien + ancre?

Car je sais faire des ancre mais pas des lien+ancre Like a Star @ heaven 
Cela devrait peut être ressembler à ceci : "http://lien#ancre" non? 
Merci beaucoup de ton aide.
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un background dans une navigation flottante

Message par Offrande Ven 1 Nov 2013 - 18:43

Re Bonsoir Milouze, 

Après réflexion j'ai mis des liens directe et non pas des liens + ancres se sera tout de même plus simple pour le moment, mon problème à présent est que je souhaiterais retiré la transition vers la droite, je souhaiterais que ma liste d'icone de raccourcis ne bouge jamais et reste t'elle qu'est. Si tu peut m'aider pour ce dernier petit soucis je t'en serais comme toujours entièrement reconnaissante ::fleur:: 

mon html: 
Code:
<ul id="bouton">
     
                    <li class="M14_Item1"><a href="http://le-grand-havre.lovelyforum.net/c7-les-portes-s-ouvres-pour-toi"></a></li>
                    <li class="M14_Item2"><a href="http://le-grand-havre.lovelyforum.net/c10-au-coeurs-des-plaines"></a></li>
                    <li class="M14_Item3"><a href="http://le-grand-havre.lovelyforum.net/c18-communaute-equideow"></a></li>
                    <li class="M14_Item4"><a href="http://le-grand-havre.lovelyforum.net/c1-modules-equideow"></a></li>
                    <li class="M14_Item5"><a href="http://le-grand-havre.lovelyforum.net/c9-toutes-les-aides-equideow"></a></li>
                    <li class="M14_Item6"><a href="http://le-grand-havre.lovelyforum.net/c5-repertoire-des-astuces-du-jeux"></a></li>
                    <li class="M14_Item7"><a href="http://le-grand-havre.lovelyforum.net/c11-papotage-dans-l-echos-des-plaines"></a></li>
                    <li class="M14_Item8"><a href="http://le-grand-havre.lovelyforum.net/c6-les-services-du-grand-havre"></a></li>
                    <li class="M14_Item9"><a href="http://le-grand-havre.lovelyforum.net/c13-le-bois-des-animations"></a></li>
     
                </ul>
   
 
  <script type="text/javascript">
            $(function() {
                $('#bouton a').stop().animate({'marginLeft':'-65px'},1000);
 
                $('#bouton > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                      $('a',$(this)).stop().animate({'marginLeft':'-65px'},200);
                    }
                );
            });
        </script>

mon css:
Code:
ul#bouton {
        position: fixed; /* On fixe la position des boutons */
        margin-bottom: 0px; /* marge extérieure */
        padding: 10px; /* marge intérieure */
        top: 5px; /* positionné à 5px du haut */
        left: 70px; /* positionné à 70px du bord gauche */
        list-style: none; /* pas de style pour la liste */
        z-index: 999; /* place les boutons au dessus de tout le reste */
        }
     
        ul#bouton li {
        margin-bottom: 0px; /* marge inférieure */
        }
     
        ul#bouton li a {
        display: block; /* défini en bloc */
        left: -5px; /* marge extérieure négative gauche */
        width: 30px; /* largeur */
        height: 30px; /* hauteur */
        border: 1px dotted #ffffff!important; /* bordure */
        -moz-box-shadow: 1px 1px 10px #000000; /* ombre portée */
        -webkit-box-shadow: 1px 1px 10px #000000; /* ombre portée */
        -o-box-shadow: 1px 1px 10px #000000; /* ombre portée */
        box-shadow: 1px 1px 10px #000000; /* ombre portée */
        opacity: 0.9; /* opacité */
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); /* opacité pour IE */
        }
     
        ul#bouton li.M14_Item1 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/les_po11.jpg);
     margin-bottom: 5px!important;
        }
        ul#bouton li.M14_Item2 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/au_coe12.jpg);
     margin-bottom: 5px!important;
        }
        ul#bouton li.M14_Item3 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/commun12.jpg);
   margin-bottom: 5px!important;       
   }
        ul#bouton li.M14_Item4 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/module11.jpg);
   margin-bottom: 5px!important;       
   }
        ul#bouton li.M14_Item5 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/les_ai11.jpg);
   margin-bottom: 5px!important;       
   }
        ul#bouton li.M14_Item6 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/repert11.jpg);
   margin-bottom: 5px!important;       
   }
        ul#bouton li.M14_Item7 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/papota11.jpg);
   margin-bottom: 5px!important;       
   }
        ul#bouton li.M14_Item8 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/les_se11.jpg);
   margin-bottom: 5px!important;       
   }
        ul#bouton li.M14_Item9 a{
        background: url(http://i56.servimg.com/u/f56/17/99/16/25/le_boi11.jpg);
   margin-bottom: 5px!important;       
   }
Je te fait d'énorme bisous <3
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un background dans une navigation flottante

Message par Invité Ven 1 Nov 2013 - 19:46

Re,

si tu ne veux plus de transition, il faut simplement supprimer ce script Offrande Wink 

Code:

<script type="text/javascript">
            $(function() {
                $('#bouton a').stop().animate({'marginLeft':'-65px'},1000);
 
                $('#bouton > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                      $('a',$(this)).stop().animate({'marginLeft':'-65px'},200);
                    }
                );
            });
        </script>

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un background dans une navigation flottante

Message par Offrande Lun 4 Nov 2013 - 2:50

Merci beaucoup Milouze cela a marcher parfaitement, j'ignorais que l'on pouvait faire ce genre de transitions par des scripts :/ je penser qu'il fallait toujours passer par le CSS3 ou un CSS avancer Like a Star @ heaven ! Connaîtrait tu un site ou je peut trouver des codes de ce type pour faire de jolie choses sur mon forum? 

Je voulait savoir aussi; serais t'il possible de rajouter un texte qui serais lié à l'icône, ainsi le membre pourrait soir cliquer sur l'icône, soit sur le liens et avec une petit texte d'indications d'ou sa vas le mener se serais pas mal =D car cliquer sur des icône au hasard c'est pas encore terrible :p !
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un background dans une navigation flottante

Message par Invité Lun 4 Nov 2013 - 10:30

Salut Offrande,

pour afficher un texte avec le lien qui mène sur une page définie à l'équivalence des
icônes , il va falloir tricher un peu Wink :

Le texte sera placé en haut de l'image est sera centré .

Modifies le code html comme ceci:
Le code est prêt à l'emploi Very Happy .
Code:

        <ul id="bouton">
           
<li class="M14_Item1"><span><a href="http://le-grand-havre.lovelyforum.net/c7-les-portes-s-ouvres-pour-toi">Titre 1</a></span>
<a href="http://le-grand-havre.lovelyforum.net/c7-les-portes-s-ouvres-pour-toi"></a></li>
<li class="M14_Item2"><span><a href="http://le-grand-havre.lovelyforum.net/c10-au-coeurs-des-plaines">Titre 2</a></span>
  <a href="http://le-grand-havre.lovelyforum.net/c10-au-coeurs-des-plaines"></a></li>
<li class="M14_Item3"><span> <a href="http://le-grand-havre.lovelyforum.net/c18-communaute-equideow">Titre 3</a></span>
  <a href="http://le-grand-havre.lovelyforum.net/c18-communaute-equideow"></a></li>
<li class="M14_Item4"><span><a href="http://le-grand-havre.lovelyforum.net/c1-modules-equideow">Titre 4</a></span>
  <a href="http://le-grand-havre.lovelyforum.net/c1-modules-equideow"></a></li>
<li class="M14_Item5"><span><a href="http://le-grand-havre.lovelyforum.net/c9-toutes-les-aides-equideow">Titre 5</a></span>
  <a href="http://le-grand-havre.lovelyforum.net/c9-toutes-les-aides-equideow"></a></li>
<li class="M14_Item6"><span><a href="http://le-grand-havre.lovelyforum.net/c5-repertoire-des-astuces-du-jeux">Titre 6</a></span>
  <a href="http://le-grand-havre.lovelyforum.net/c5-repertoire-des-astuces-du-jeux"></a></li>
<li class="M14_Item7"><span> <a href="http://le-grand-havre.lovelyforum.net/c11-papotage-dans-l-echos-des-plaines">Titre 7</a></span>
  <a href="http://le-grand-havre.lovelyforum.net/c11-papotage-dans-l-echos-des-plaines"></a></li>
<li class="M14_Item8"><span><a href="http://le-grand-havre.lovelyforum.net/c6-les-services-du-grand-havre">Titre 8</a></span>
  <a href="http://le-grand-havre.lovelyforum.net/c6-les-services-du-grand-havre"></a></li>
 <li class="M14_Item9"><span> <a href="http://le-grand-havre.lovelyforum.net/c13-le-bois-des-animations">Titre 9</a></span>
  <a href="http://le-grand-havre.lovelyforum.net/c13-le-bois-des-animations"></a></li>
           
                        </ul>

Pense a enregistrer les modifications en cliquant respectivement sur Problème avec un background dans une navigation flottante 907288 et Problème avec un background dans une navigation flottante Ajouter2024



Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Problème avec un background dans une navigation flottante Xyjv

Ajoutes simplement ceci:
Code:

ul#bouton li span  a
{ display:inline;
  background:none !important;
  text-align:center;
  font-size:10px;
  color:red;
  text-decoration:none;
  border:none !important;
}
Pense à cliquer sur le boutonProblème avec un background dans une navigation flottante Boutonvalider


a++


Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un background dans une navigation flottante

Message par Offrande Ven 8 Nov 2013 - 2:10

Bonsoir, 
Merci beaucoup de ton aide Milouze encore une fois ! I love you 
Je t'embrasse tendrement et te souhaite une bonne nuit.

Je met donc le sujet en résolus Wink .
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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