Barre de navigation

[-Mishirame-]

bonsoir à tous !

j'ai quelque petit soucis avec ma barre de navigation malgrès avoir respecter le tutotirel à la lettre ... ( celui pour mettre sa barre de navig' en haut du forum )

d'une part je n'arrive pas à changer ni la taille, ni la police du texte et en plus de ça quoi que je fasse avec les bordures y'a toujours un petit trou situé tout à gauche .... voyez par vous même http://wonderland.monfofo.net/

je n'arrive pas à corriger ça même en changeant toutes les dimensions

quelqu'un pourrais m'aider svp ?

merci d'avances !

[Modoki]

Je t'avoue que j'ai un peu la flemme d'aller faire un tour par le tutoriel pour voir si c'est compatible, mais dans mes souvenirs ça devrait marcher...
Le petit trou est du à la place que l'image prend en fait, donc quand il n'y en a pas, un petit carré transparent se place à l'endroit qu'elles devraient occuper. Pour les enlever définitivement il suffit de demander à ton CSS de les faire disparaître avec un code (il indique juste qu'il n'en veut pas) :

Code:

a.mainmenu img {display:none;}

Et pour ce qui est de changer la police... Tu as essayé en modifiant la barre de navigation aussi via sa propriété CSS ?

Code:

a.mainmenu
{font-size:14px; /*taille de la police*/
font-family:verdana; /*police*/
}

En espérant avoir aidé ♥

[-Mishirame-]

Bonsoir et merci de votre réponse rapide, cependant ce que vous m'avez donnée la je l'ai déja inclu dans le CSS justement ... ou alors j'ai mal compris les fermeture des codes ?

Voici comment j'ai fais ça :

Code:

.navig {
position: absolute;
top: 0px;
width: 100%;
 
  background-color: #000000;
  border: 3px solid #dedede;
  border-bottom: 3px solid #a17a55;
  border-top: 3px solid #a17a55;
  a.mainmenu img{display: none;}
 
a.mainmenu {
margin: 100px;
font-family: Arial;
font-size: 100px;
}
}

malheureusement oui j'ai toujours ces soucis, que ce soit pour la police ou le petit défaut en haut à gauche >,<

[Modoki]

J'aurais du aller regarder alors xD
Mais du coup j'ai un doute, je suis pas sûre que l'effet de police soit à placer dans mainmenu... Tu as essayé dans navig ? (non non je ne fais pas du tout au pif)
Et je pense que le petit espace à gauche est normal du coup... En fait au niveau du rendu ce serait pour avoir quoi ? :3

[-Mishirame-]

Pour la police, en effet je l'ai placé dans navig et ça fonctionne ! mais pour le trou je doute que ce soit normal car dans le tuto il n'y est pas sur l'exemple ... et j'aurais bien voulue un rendue comme celui ci sur ce fofo

http://keroro-family.forumactif.org/

merci encore !

EDIT : Ah ! je viens de me rendre compte que sur son fofo il y'a une image ... je n'avais pas remarquée x) dans ce cas, comment peut-on en inclure une svp ? é_è

[Modoki]

J'essaie de trouver d'où vient le petit carré mais je vois vraiment pas, on parie sur un truc idiot ? Autrement pour l'image, il faut ajouter le code suivant à navig :

Code:

background-image:url(http://);
background-repeat:repeat;

Si je trouve pour le premier problème je reviens, autrement je pense pas pouvoir aider plus pour le moment :3

[Anzu]

Bonsoir,

Pour les quelques px qui se baladent sur la gauche, j'ai déjà donné la solution une centaine de fois :p

Dans votre css, dans le navig, rajoutez:

Code:

left: 0px;

Cordialement.

[-Mishirame-]

Ah formidable merci ! par contre un dernier soucis ... je n'arrive pas à changer la taille de la police malgres le code que vous m'aviez demandé de mettre ...

je vous donne ce que j'ai mis au total :

Code:

.navig {
position: absolute;
top: 0px;
width: 100%;
 left: 0px;
  border-top: 20px solid #a17a55;
font-size:50px; /*taille de la police*/
font-family:verdana; /*police*/


  background-image:url(http://t2.gstatic.com/images?q=tbn:ANd9GcT7eDeXiMq_-Y7R7NTnEqH4wCJfBsIXvSuZGF2SxpfBHR9rKk3UGA);
background-repeat:repeat;);

 
 
}

vous pouvez voir que j'ai mis 50px à font-size, mais cela ne change rien du tout ...

comment faire svp?

merci d'avances !

[Anzu]

La taille se change dans le a.mainmenu

Mais vous avez l'air d'avoir plusieurs codes dans votre css, vous avez mis quoi exactement ?

[-Mishirame-]

oui j'ai d'autres CSS hormis celui que je vous ai donné mais ils ne concernent pas le navig.

mais en ce qui concerne le navig bah je vous ai donné ce que j'ai mis ... j'ai bidouillé un peu en effet mais hélas ça n'abouti pas partout =( je vous redonne ce que j'ai mis désormais ( enfait je fais juste du remplacement ect )

mais pour le navig j'ai vraiment que ça

Code:

a.mainmenu {
margin: 100px;
font-family: Arial;
font-size: 100px;

[Anzu]

Code:

        a.mainmenu {
        margin: 100px;
        font-family: Arial;
        font-size: 100px;

Remplacez le "100px" par 16px.

[-Mishirame-]

bonjour, j'ai inséré tout les codes que vous m'aviez recommandé de mettre depuis le début de mon sujet pour les tailles des bouttons sur le navig du fofo mais rien ne change ... mais l'espace du haut entre les bouttons et le haut de page s'aggrandit, quand je touche à font-size =/ mais la taille de la police non rien du tout

[Anzu]

Bonsoir,

On va reprendre depuis le début
Pourrais-je avoir le code du template overall header et le code de la css ? (toute la css).

Cordialement.

[-Mishirame-]

Bien sur,

Voici pour le template :

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <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');
         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 -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}"><center><div class="navig" align="{MENU_POSITION}">{GENERATED_NAV_BAR}</div></center>
   <!-- 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">
            <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>
</body>
</html>
<!-- END html_validation -->


Et le CSS ... ( je vous donne tout mes CSS je ne sais pas si ca répondra à votre question é_è ) celui du navig se situe en bas, avant ceux des catégories !

Code:


.bodyline {
  border-radius: 10px;
  border: none;
  box-shadow: 0 0 10px #354e76;
}

.forumline {
  border-radius: 10px;
}

body {
  background-position: top center;
}

a {
  color:#8FB2DC;
  text-decoration: none;
  transition: all 1s;
}

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

a.mainmenu img {display:none;}



#i_logo {
  margin-top:10px;
  margin-bottom:-45px;
}



/* SPOILER CODE CITATION */
.spoiler_closed {
     padding: 5px;
   display:block;
   font-family: Times New Roman...;
   font-size: 12px;
   color: #fff;
   line-height: 125%;
   border-top: none;
   border-radius: 5px 5px 5px 5px;
   background: url(http://img15.hostingpics.net/pics/237397Fond.png);
   box-shadow: 0px 0px 5px black;
   }
.spoiler_content {
     padding: 5px;
   display:block;
   font-family: Times New Roman...;
   font-size: 12px;
   color: #fff;
   line-height: 125%;
   border-radius: 5px 5px 5px 5px;
   background: #354E76;
     box-shadow: 0px 0px 5px black;
}
 
.quote {
     padding: 5px;
     display:block;
   font-family: Times New Roman...;
   font-size: 12px;
   color: #fff;
   line-height: 125%;
   border-radius: 5px 5px 5px 5px;
   background: #354E76;
     box-shadow: 0px 0px 5px black;
}

.code {
     padding: 5px;
       display:block;
   font-family: Times New Roman...;
   font-size: 12px;
   color: #fff;
     line-height: 125%;
   border-radius: 5px 5px 5px 5px;
   background: #354E76;
   box-shadow: 0px 0px 5px black;
}

/* ITALIQUE GRAS SOULIGNEMENT */

i {
  color : #4f7a2e;
  -moz-transition : color 1s;
  -webkit-transition : color 1s;
}

i:hover {
  color : black;
}

u {
  text-decoration : none;
  border-bottom : 1px dotted black;
}


a.forumlink {
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;}
 
a.forumlink:hover {
padding-left:20px;}

a.forumlink {
border-bottom:1px dashed #000000;
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;}

.navig {
position: absolute;
top: 0px;
width: 100%;
 left: 0px;
  border-top: 3px solid #203358;
 background-color: #203358;
border-bottom: 3px dashed #354E76;

 
font-family: Verdana;
font-size: 40px;
 
}

.lastbla {
border: 1px dashed #AAAAAA;
padding: 5px;
 
}
 
.lastbla2 {
border: 1px dashed #AAAAAA;
padding: 5px;
}


[Anzu]

Je ne vois nulle part le mainmenu

Donc rajoutez ce code dans votre css:

Code:

a.mainmenu {
font-size: 18px;
font-family: Arial;
}

Et ici:

Code:

.navig {
position: absolute;
top: 0px;
width: 100%;
 left: 0px;
  border-top: 3px solid #203358;
 background-color: #203358;
border-bottom: 3px dashed #354E76;
 
 
font-family: Verdana;
font-size: 40px;
 
}

Vous retirez le font family et le font size.

Cordialement.

[-Mishirame-]

Ca ne marche toujours pas snif ...

j'ai même changé la police en Verdana, et elle reste toujours en time new roman voyez par vous même

Code:


a.mainmenu {
font-size: 18px;
font-family: Arial;
}

http://wonderland.monfofo.net/

[Anzu]

Voilà c'est corrigé ^^

Il y avait une erreur au niveau des }
Du coup ça faisait cafouiller le tout.

Cordialement.

[-Mishirame-]

ah merci beaucoup fichu } xD

bon bah chose faite, je passe en résolue

cordialement