Barre de menu en haut en dernier plan :/

2 participants

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

Résolu Barre de menu en haut en dernier plan :/

Message par Katsu Dim 23 Oct 2011 - 17:35

Bonjour !!
Voila j'ai modifié mon CSS pour mettre les liens en fondu lorsque la souris passe par dessus. Mais voila j'ai une barre de menu en haut du forum et le fait est que les liens passe au dessus de cette barre quand je fais défiler la barre de défilement.
Comme ici:
Spoiler:

Voici mon CSS:
Code:
body {
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top center;
text-shadow: 0px 0px 2px #693D19;
}

.bodyline
{
-moz-border-radius:  3px 3px 3px 3px ;
-webkit-border-radius:  3px 3px 3px 3px ;
border-radius: 3px 3px 3px 3px ;
border: solid 10px #693D19;
}
     
.mon_onglet{
  display: inline;
  padding: 2px;
  margin: 2px;
  color: #000;
  background: #693D19;
-moz-border-radius:  3px 3px 3px 3px ;
-webkit-border-radius:  3px 3px 3px 3px ;
border-radius: 3px 3px 3px 3px ;
border: solid 3px #693D19;
opacity: 0.7;
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
filter: alpha(opacity=70);
transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
-htm-transition: opacity 1s;
}
.mon_onglet:hover{
  background: #693D19;
  cursor : pointer;
-moz-border-radius:  3px 3px 3px 3px ;
-webkit-border-radius:  3px 3px 3px 3px ;
border-radius: 3px 3px 3px 3px ;
border: solid 3px #693D19;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
-htm-transition: opacity 1s;
}
        .mon_onglet_selected{
  display: inline;
  padding: 2px;
  margin: 2px;
  color: #000;
  background: #693D19;
-moz-border-radius:  3px 3px 3px 3px ;
-webkit-border-radius:  3px 3px 3px 3px ;
border-radius: 3px 3px 3px 3px ;
border: solid 3px #693D19;
}
          .clear{
  clear: both;
}
 .mon_contenu{
  color: #000;
  background: #693D19;
-moz-border-radius:  11px 11px 11px 11px ;
-webkit-border-radius:  11px 11px 11px 11px ;
border-radius: 11px 11px 11px 11px ;
border: solid 3px #B07443;
  padding: 10px;
  margin: 10 px;
  height: 300px;
  width: 300px;
  line-height: normal;
  font-size: 11px;

}
 #mes_contenus, #mes_onglets{
  height: 100%;  width:100%;
}
body.chatbox {
    background-color: #FFCB70;
}

.navig {
align: center;
position: fixed;
top: 0px;
width: 100% ;
background-color: #FFCB70;
border: 5px solid #a07348 ;
}

        .chatbox .msg span[style="color:green;"] strong {
          color:#ff8c00;
        }
       
        .chatbox .msg span[style="color:red;"] strong {
          color:#693D19;
        }

#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before { content: "MultiChat =)"; }

.forum-description {
      margin: auto;
      padding: 10px;
      color: #000000;
      width: 80%;
      border: 3px solid #000000;
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
      font-size: 12px;
}

.row3Right {
-moz-border-radius: 10px 10px 5px 5px;
-webkit-border-radius: 10px 10px 5px 5px;
border-radius: 10px 10px 5px 5px;
border: solid 5px #693D19;
border-style: double;
}

.row1 {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border: solid 5px #693D19;
border-style: double;
}
.row3 {
-moz-border-radius: 10px 10px 5px 5px;
-webkit-border-radius: 10px 10px 5px 5px;
border-radius: 10px 10px 5px 5px;
border: solid 5px #693D19;
border-style: double;
}
.row2 {
-moz-border-radius: 10px 10px 7px 7px;
-webkit-border-radius: 10px 10px 7px 7px;
border-radius: 10px 10px 7px 7px;
border: solid 5px #693D19;
border-style: double;
}
.secondarytitle {
-moz-border-radius: 5px 5px 5px 0px ;
-webkit-border-radius: 5px 5px 5px 0px ;
border-radius: 5px 5px 5px 0px ;
border: solid 5px #693D19;
}

        .table_1 td.row1{
        background-color: transparent !important;
        border: none !important;
        text-align: center !important; }

td.thHead {
-moz-border-radius: 10px 0px 10px 0px ;
-webkit-border-radius: 10px 0px 10px 0px ;
border-radius: 10px 0px 10px 0px ;
border: solid 5px #693D19;
}

td.thTop {
-moz-border-radius: 10px 0px 10px 0px ;
-webkit-border-radius: 10px 0px 10px 0px ;
border-radius: 10px 0px 10px 0px ;
border: solid 5px #693D19;
}

td.thSides , .thCornerL , .thCornerR {
-moz-border-radius: 10px 0px 10px 0px ;
-webkit-border-radius: 10px 0px 10px 0px ;
border-radius: 10px 0px 10px 0px ;
border: solid 5px #693D19;
}

td.catLeft {
-moz-border-radius: 10px 0px 10px 0px ;
-webkit-border-radius: 10px 0px 10px 0px ;
border-radius: 10px 0px 10px 0px ;
border: solid 5px #693D19;
}

td.catRight {
-moz-border-radius: 10px 0px 10px 0px ;
-webkit-border-radius: 10px 0px 10px 0px ;
border-radius: 10px 0px 10px 0px ;
border: solid 5px #693D19;
}

.spoiler {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border: solid 5px #693D19;
border-style: double;
}

.gen {
color: #B07443;
}

#i_logo {
-webkit-box-shadow: 0px 0px 15px;
-moz-box-shadow: 0px 0px 15px;
box-shadow: 0px 0px 15px;
background-color: transparent;
-moz-border-radius : 20px;

}

 .u1 { font-style: italic ; color: #850000; font-family: "georgia", serif; }

.row4 {
background-color: #946035;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border: solid 5px #693D19;
border-style: double;
}

.row5 {
background-color: #946035;
-moz-border-radius: 5px 5px 5px 0px ;
-webkit-border-radius: 5px 5px 5px 0px ;
border-radius: 5px 5px 5px 0px ;
border: dotted 2px #693D19;
width: 600px;
}
.row6 {
-moz-border-radius: 5px 5px 5px 0px ;
-webkit-border-radius: 5px 5px 5px 0px ;
border-radius: 5px 5px 5px 0px ;
border: double 7px #B07443;
width: 750px;
background-color: #693D19;
}

.sparrow
{
opacity: 0.7;
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
filter: alpha(opacity=70);
transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
-htm-transition: opacity 1s;
}

.sparrow:hover
{
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
-htm-transition: opacity 1s;
}

.navbar {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border: solid 3px #693D19;
opacity: 0.7;
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
filter: alpha(opacity=70);
transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
-htm-transition: opacity 1s;
}

.navbar:hover {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
-htm-transition: opacity 1s;}

.navindex {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border: solid 3px #693D19;
}

L'identifiant "sparrow" est celui des liens en fondu.

Et le template 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() {
         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 ?l?ments */
            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 contenur en fonction des ?l?ments et de la hauteur personnalis?e dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des ?l?ments 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']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}"><div class="navig" align="{MENU_POSITION}">{GENERATED_NAV_BAR}</div>
   <!-- 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}
            

            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

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

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

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     

                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     

                     <span class="gen">{SITE_DESCRIPTION}
  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
               
               </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>
</body>
</html>
<!-- END html_validation -->

Voila merci à ceux qui voudront bien m'aider.

Cordialement


Dernière édition par Katsu le Dim 30 Oct 2011 - 12:26, édité 1 fois
avatar

Katsu
**

Masculin
Messages : 51
Inscrit(e) le : 13/08/2011

http://multimanga.forumactif.fr/
Katsu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de menu en haut en dernier plan :/

Message par kheino Dim 23 Oct 2011 - 20:35

Bonsoir Kastu,

Juste pour être sûre d'avoir bien compris :
Par le hover les liens de la navbar doivent devenir opaques et sinon ils sont en transparence ?
Si c'est bien ça, c'est là qu'est le souci...

Pourrais-tu donner le lien du forum en cause ?
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de menu en haut en dernier plan :/

Message par Katsu Lun 24 Oct 2011 - 17:28

Et bien oui c'est exactement ça.
Sinon voici le lien du forum: http://test-multimanga.forumgratuit.org/
C'est un forum test.

Merci à vous de m'avoir répondu.
avatar

Katsu
**

Masculin
Messages : 51
Inscrit(e) le : 13/08/2011

http://multimanga.forumactif.fr/
Katsu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de menu en haut en dernier plan :/

Message par kheino Lun 24 Oct 2011 - 19:14

Oui, mais là en passant sur la navbar, je ne vois rien d'anormal, les liens deviennent "transparents" et ont un "underline" (pas très beau ça) que tu peux supprimer par ce simple code sur tout ton forum :
a, a:link, a:hover {
text-decoration: none!important;
}

Pour le reste, essaie d'expliquer encore une fois, étant de celle qui comprend super vite quand on lui explique très longtemps... (-:
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de menu en haut en dernier plan :/

Message par Katsu Ven 28 Oct 2011 - 15:04

Alors ! Tout d'abord merci pour le code ^^ C'est vrai que ça fais plus propre x)
Ensuite voila lorsque la barre de menu en haut "rencontre" les liens en class sparrow, elle est cachée par ceux ci.
Comme ici:

Barre de menu en haut en dernier plan :/ 341653Sanstitre2

Et donc je voudrais que la barre de menu ne soit plus "cachée" ^^
Voila !

Merci encore de votre aide
avatar

Katsu
**

Masculin
Messages : 51
Inscrit(e) le : 13/08/2011

http://multimanga.forumactif.fr/
Katsu a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Barre de menu en haut en dernier plan :/

Message par kheino Ven 28 Oct 2011 - 20:50

Bonsoir Katsu,

Commençons en douceur en ajoutant à l'identifiant de la navbar un z-index, sauf erreur ici :
.navbar {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border: solid 3px #693D19;
opacity: 0.7;
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
filter: alpha(opacity=70);
transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
-htm-transition: opacity 1s;
z-index: 3;
}
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de menu en haut en dernier plan :/

Message par Katsu Sam 29 Oct 2011 - 22:27

Voila !
J'ai ajouté le code !
Et aussi j'ai fais quelques modif' de mon CSS:

Code:
body {
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top center;
text-shadow: 0px 0px 2px #693D19;
}

.bodyline
{
-moz-border-radius:  3px 3px 3px 3px ;
-webkit-border-radius:  3px 3px 3px 3px ;
border-radius: 3px 3px 3px 3px ;
border: solid 10px #693D19;
}
     
.mon_onglet{
  display: inline;
  padding: 2px;
  margin: 2px;
  color: #000;
  background: #693D19;
-moz-border-radius:  3px 3px 3px 3px ;
-webkit-border-radius:  3px 3px 3px 3px ;
border-radius: 3px 3px 3px 3px ;
border: solid 3px #693D19;
opacity: 0.7;
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
filter: alpha(opacity=70);
transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
-htm-transition: opacity 1s;
}
.mon_onglet:hover{
  background: #693D19;
  cursor : pointer;
-moz-border-radius:  3px 3px 3px 3px ;
-webkit-border-radius:  3px 3px 3px 3px ;
border-radius: 3px 3px 3px 3px ;
border: solid 3px #693D19;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
-htm-transition: opacity 1s;
}
        .mon_onglet_selected{
  display: inline;
  padding: 2px;
  margin: 2px;
  color: #000;
  background: #693D19;
-moz-border-radius:  3px 3px 3px 3px ;
-webkit-border-radius:  3px 3px 3px 3px ;
border-radius: 3px 3px 3px 3px ;
border: solid 3px #693D19;
}
          .clear{
  clear: both;
}
 .mon_contenu{
  color: #000;
  background: #693D19;
-moz-border-radius:  11px 11px 11px 11px ;
-webkit-border-radius:  11px 11px 11px 11px ;
border-radius: 11px 11px 11px 11px ;
border: solid 3px #B07443;
  padding: 10px;
  margin: 10 px;
  height: 300px;
  width: 300px;
  line-height: normal;
  font-size: 11px;

}
 #mes_contenus, #mes_onglets{
  height: 100%;  width:100%;
}
body.chatbox {
    background-color: #FFCB70;
}

.navig {
align: center;
position: fixed;
top: 0px;
width: 100% ;
background-color: #FFCB70;
border: 5px solid #a07348 ;
}

        .chatbox .msg span[style="color:green;"] strong {
          color:#ff8c00;
        }
       
        .chatbox .msg span[style="color:red;"] strong {
          color:#693D19;
        }

#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before { content: "MultiChat =)"; }

.forum-description {
      margin: auto;
      padding: 10px;
      color: #000000;
      width: 80%;
      border: 3px solid #000000;
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
      font-size: 12px;
}

.row3Right {
-moz-border-radius: 10px 10px 5px 5px;
-webkit-border-radius: 10px 10px 5px 5px;
border-radius: 10px 10px 5px 5px;
border: solid 5px #693D19;
border-style: double;
}

.row1 {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border: solid 5px #693D19;
border-style: double;
}
.row3 {
-moz-border-radius: 10px 10px 5px 5px;
-webkit-border-radius: 10px 10px 5px 5px;
border-radius: 10px 10px 5px 5px;
border: solid 5px #693D19;
border-style: double;
}
.row2 {
-moz-border-radius: 10px 10px 7px 7px;
-webkit-border-radius: 10px 10px 7px 7px;
border-radius: 10px 10px 7px 7px;
border: solid 5px #693D19;
border-style: double;
}
.secondarytitle {
-moz-border-radius: 5px 5px 5px 0px ;
-webkit-border-radius: 5px 5px 5px 0px ;
border-radius: 5px 5px 5px 0px ;
border: solid 5px #693D19;
}

        .table_1 td.row1{
        background-color: transparent !important;
        border: none !important;
        text-align: center !important; }

td.thHead {
-moz-border-radius: 10px 0px 10px 0px ;
-webkit-border-radius: 10px 0px 10px 0px ;
border-radius: 10px 0px 10px 0px ;
border: solid 5px #693D19;
}

td.thTop {
-moz-border-radius: 10px 0px 10px 0px ;
-webkit-border-radius: 10px 0px 10px 0px ;
border-radius: 10px 0px 10px 0px ;
border: solid 5px #693D19;
}

td.thSides , .thCornerL , .thCornerR {
-moz-border-radius: 10px 0px 10px 0px ;
-webkit-border-radius: 10px 0px 10px 0px ;
border-radius: 10px 0px 10px 0px ;
border: solid 5px #693D19;
}

td.catLeft {
-moz-border-radius: 10px 0px 10px 0px ;
-webkit-border-radius: 10px 0px 10px 0px ;
border-radius: 10px 0px 10px 0px ;
border: solid 5px #693D19;
}

td.catRight {
-moz-border-radius: 10px 0px 10px 0px ;
-webkit-border-radius: 10px 0px 10px 0px ;
border-radius: 10px 0px 10px 0px ;
border: solid 5px #693D19;
}

.spoiler {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border: solid 5px #693D19;
border-style: double;
}


#i_logo {
-webkit-box-shadow: 0px 0px 15px;
-moz-box-shadow: 0px 0px 15px;
box-shadow: 0px 0px 15px;
background-color: transparent;
-moz-border-radius : 20px;

}

 .u1 { font-style: italic ; color: #850000; font-family: "georgia", serif; }

.row4 {
background-color: #946035;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border: solid 5px #693D19;
border-style: double;
}

.row5 {
background-color: #946035;
-moz-border-radius: 5px 5px 5px 0px ;
-webkit-border-radius: 5px 5px 5px 0px ;
border-radius: 5px 5px 5px 0px ;
border: dotted 2px #693D19;
width: 600px;
}
.row6 {
-moz-border-radius: 5px 5px 5px 0px ;
-webkit-border-radius: 5px 5px 5px 0px ;
border-radius: 5px 5px 5px 0px ;
border: double 7px #B07443;
width: 750px;
background-color: #693D19;
}

.sparrow
{
opacity: 0.7;
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
filter: alpha(opacity=70);
transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
-htm-transition: opacity 1s;
z-index: 3;
}

.sparrow:hover
{
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
-htm-transition: opacity 1s;
}

.navbar {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border: solid 3px #693D19;
}



.navindex {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border: solid 3px #693D19;
}

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

( En espérant que ça ne vous perturbera pas x)
avatar

Katsu
**

Masculin
Messages : 51
Inscrit(e) le : 13/08/2011

http://multimanga.forumactif.fr/
Katsu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de menu en haut en dernier plan :/

Message par kheino Sam 29 Oct 2011 - 22:53

Et alors, c'est réglé ?
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino 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

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