Sujets similaires

Sujet: Images et navigation, in barre Hitskinienne Jeu 27 Jan 2011, 10:52

(sur conseil de sNipe, copié-collé de mon message, posté ici : http://www.css-actif.com/t1424p15-barres-hitskinienne#92673)

Bonjour,

En suivant les 2 tutos de Orange et le conseil de Little Lady pour mettre la barre de navigation dans la barre Hitskinienne, ça a bien marché.
J'ai rajouté center et hauteur 25. Et pointillés sous la barre.

Mais les textes ou images de la barre de navigation restent en partie basse de la barre fixe,
et les images sont intégrées en mini mini.
scratch

J'ai cherché, mais rien trouvé, y compris dans les anciens messages.

Si quelqu'un peut m'aider ?

Je n'ai rien mis dans le CSS perso, car rien ne fonctionnait, j'ai tout enlevé.
Donc, est-ce utile de fournir le CSS de base ?.

Mon template, modifié uniquement sur l'intégration des barres de navigation et Hitki, comme indiqué ci-dessus :

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

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

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

<link rel="canonical" href="{switch_canonical_url.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>


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



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



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


<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
   
      pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
      pm.focus();
   
   
      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();
   
   
      ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
   
});


   var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;



$(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
      });
   });
});

//]]>
</script>
{GREETING_POPUP}

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



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

</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<table style="position: fixed; left: 0px; top: 0px; right: 0px; background-color: #560060; z-index:1000; width: 100%; border-bottom:1px white dotted;" ><tr height="20"></tr>
<tr><td>

<center><span class="navi">{GENERATED_NAV_BAR}</span></center>

</td></tr></tr></table>


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



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


<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>
               
               <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
               
               <td align="center" width="100%" valign="middle">
                  
                  <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>


                  
                  <div class="maintitle">{MAIN_SITENAME}</div>


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

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
            <tr>
   <td align="{MENU_POSITION}"{MENU_NOWRAP}></td>
            </tr>
         </table>

         <div style="clear: both;"></div>

         
         <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;">
                           
                           <li>{switch_ticker.ticker_row.ELEMENT}</li>
                           
                        </ul>
                     </div>
                  </td>
               </tr>
            </table>
         </div>
         

         
         <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">
                              
                              <div>{switch_ticker.ticker_row.ELEMENT}</div>
                              
                           </div>
                        </div>
                     </div>
                  </td>
               </tr>
            </table>
         </div>
         

         <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}">
                              
                              {giefmod_index1.MODVAR}
                                 
                                 <div style="height:{SPACE_ROW}px"></div>
                                 
                              
                           </div>
                        </td>
                        <td valign="top" width="100%">

                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </td>
   </tr>
</table>
</body>
</html>

Je vous donne également une image, c'est la barre provisoire de mon forum, avec l'option affichage sans les textes (je changerai les boutons plus tard avec du texte intégré) :
Images et navigation, in barre Hitskinienne Captur14

Images et navigation, in barre Hitskinienne Captur14

Les images utilisées font 1cmx1cm, j'aimerais bien que ça reste à peu près cette dimension dans la barre fixe.

Le résultat du test est ici : http://fjtest.kanak.fr/forum

Au code donné par Orange, j'ai ajouté height=25, mais je ne sais pas si la barre doit en fait s'élargir automatiquement en fonction du contenu ?

En résumé, je voudrais surtout que les images soient dimensionnables (1cmx1cm environ)
et éventuellement qu'elles soient centrées en hauteur dans la barre,
ou qu'elles soient de la même hauteur que la barre.

Merci pour vos réponses !

Bonjour,
J'ai reçu par mail un avis de réponse à ma question... mais il n'y a pas de réponse...

Je ne sais pas si c'est normal ?

Merci !

Bonjour,

Ce n'est pas à toi d'actualiser la demande. Les modérateurs de CSSActif s'en chargeront.

Bref, je n'ai pas trop compris où est le problème :/ Est-ce que tu peux reformuler ou ré expliquer s'il-te-plaît ?

Merci.

Pardon si j'ai enfreint le règlement, c'était bien involontaire.

Je n'ai pas voulu actualiser la demande : j'ai juste voulu indiquer que j'avais reçu un mail, visiblement par erreur.
Je pensais utile de le signaler.

Mais ne t'inquiète pas, la prochaine fois, je m'abstiendrai. Laughing

------
Concernant ma barre de navigation, je voudrais savoir :

1 - si la barre histkinienne se redimensionne automatiquement en fonction d'un contenu qu'on y met, ou si on doit en changer la hauteur dans le template; dans ce cas, comment.

2 - comment positionner les éléments qu'on met dans cette barre, par exemple pour les centrer verticalement.

3 - comment avoir dans la barre de navigation (dans la barre hitskinienne) textes et images ensemble, mais avec des images non réduite.

http://fjtest.kanak.fr/forum

Merci ! Very Happy

Coucou!

1) Si tu veux que le barre histkienne, s'ajuste automatiquement au contenu qui lui est associé, il te suffit simplement de mettre "height: auto;" dans le style de ta barre histkienne.

2) T'es sûre que tu veux les centrer verticalement ôO

3) Il me semble que ce soit impossible :/ A moins que tu créée une image avec le texte.

Voilà. C'est ce que tu voulais savoir ou tu as besoin de plus d'informations ?

Merci beaucoup Hari, c'est super !

pour :
1) c'est ok.
2) pas très important et je pense que tu as raison
3) plusieurs fois que je pose la question sous différentes formes, il semblerait que ce soit impossible, ...ou très compliqué (la question se pose pour ne pas avoir à refaire des boutons chaque fois qu'on change de look ; tant pis ! Je vais mettre au point une systématisation...)

Pas d'autre question... pour le moment.

Merci encore.
Smile

Je clôture.

Images et navigation, in barre Hitskinienne

Images et navigation, in barre Hitskinienne

Sujets similaires

Sujets similaires

Partenaires Or